Develop Reference

Using a polygon as a marker with leaflet

I currently have a map for a game with item locations, i'm wanting to add animals to the side bar/legend but as a polygon instead of a marker, i get how to draw a polygon but i cannot figure out how to make it only show when selected from the legend (or even how to add one to the legend). Sorry for this very basic question.
I'm really very new to this, I only started learning about leaflet to make a map for a game, so i'm not really sure how to explain what i've done.. so i'll try my best:
I have a list of markers like:
var marker_combulbrsh2 = L.marker([-1474, 2661.5])
.bindPopup('Common Bullbrush');
and then i have the layer groups that have lines this like:
var lg_combulbrsh = L.layerGroup([
marker_combulbrsh1, marker_combulbrsh2
]);
and then an overlay list with the layer groups like:
"<i>Common Bullbrush" : lg_combulbrsh,
and then i have them display on the map with:
L.control.layers(null, overlays, {collapsed:true, position: 'topleft'}).addTo(map);
I am wanting to add a series of polygons that are selectable from the side panel/legend in the same way that the above L.marker is, so that I don't have to add individual locations that are close together for adding animal locations to the map.
`var polygonPoints = [
[-2263, 432],
[-2361, 435],
[-2337, 674],
[-2263, 432]];
var poly = L.polygon(polygonPoints).addTo(map);`
The code above draws the polygon i want to draw, but it's permanently there and I haven't been able to figure out how to make it a selectable item like the L.markers are. I figure i have to add the polygon as a marker some how and then have that marker added to the layer group and create an entry for them on the overlay list and then have them display through L.control.layers - I just cannot wrap my head around how though.
again, sorry for this very basic question and thank you to anyone who reads. if you are able to help with this and would like credit added to the website with a link to your work or social media or something i'm more than happy to do so.

How to get area coordinate in google map api

I have a address and i need to area coordinate(longitude and latitude) of that place in Google (recommended) or any map in JavaScript or PHP
I need list of longitude and latitude of above 4 corner using Google map API.
Google map link

One option would be to right click on the map, choose "What's here", take the coordinates from the box that appears
Doing that for your property, that gives me:
-33.801421, 151.133470
-33.801580, 151.133691
-33.801364, 151.133919
-33.801328, 151.133804
http://jsfiddle.net/geocodezip/otr0p64h/

Setting click priority on google maps polygon array

I am coding in JavaScript using the Google Maps API, and I was curious if there was a way to set the priority of what polygon array info window is shown when I click on an area. I have two polygons that are overlapping, and I need to control which info bubble appears when you click on the overlapped area. Thank you!

The click will be triggered on the most top Polygon.
The order of the polygons usually depends on the order in which they have been added to the map(when the map-property has been set) or by setting a custom zIndex-property.
So when you want to define a priority you must define the zIndex for the Polygons.
When you want to be able to click on each polygon(and each part of each polygon) there is a simple approach:
Observe the mouseover of the polygons and set the zIndex of the hovered polygon to a value higher than the zIndex of the other polygons. This will bring the polygon into front and you now may also click on the previously covered area.
You may implement this by extending the polygon-prototype:
(function(){
var a=z=0;
google.maps.Polygon_=function(opts){
this.setValues(opts)
google.maps.event.addListener(this,'mouseover',function(){
this.set('zIndex',++z);
});
google.maps.event.addListener(this,'rightclick',function(){
this.set('zIndex',--a);
});
};
google.maps.Polygon_.prototype = google.maps.Polygon.prototype;
google.maps.Polygon = google.maps.Polygon_;}
)();
Demo: http://jsfiddle.net/doktormolle/wznd5nsy/
(Use rightclick to send a polygon to back, e.g. when it completely covers another polygon).

AngularJS - plotting points on a map

I am new to AngularJS and I am looking to add some plotting functionality to my web app.
I have a map of the world (a png file) and X/Y coordinates that I want to overlay on top of the map image. For example, my data might look like:
[
{
'location_x':'123',
'location_y':'224',
'date':'20100505',
'text':'I loved this place!'
},
{
'location_x':'222',
'location_y':'333',
'date':'20110606',
'text':'Never again!'
}
]
I would like the date values to appear in the area designated by the x/y coordinates, and the text to appear as a tooltip for the date.
I do not need the application to expose the capability to edit the x/y coordinates, I only need to display the values that my data source gives me. I need to use a custom image as the map. What are my options for getting this done?

You could use LeafletJS .
Another option is to use the Google Static Maps API.

How to add custom street names on Google Maps?

So you want to add custom street names or other labels on your Google Map? For example on this location. After learning current (3.6) google map js API you have these possible options:
KmlLayer (not works now)
GroundOverlay (works!)
OverlayView (should work)
KmlLayer "...adds geographic markup to the map from a KML, KMZ or GeoRSS file that is hosted on a publicly accessible web server...”. We can try this latest feature to add path with label. And it will work in Google Earth. But if path is too short – Google Earth will not show us a label. Workaround for short path is just make it long by adding start and end points few times:
<coordinates>
55.043196,82.907145 55.043473,82.909902
55.043196,82.907145 55.043473,82.909902
55.043196,82.907145 55.043473,82.909902
55.043196,82.907145 55.043473,82.909902
</coordinates>
Then we already see our nice custom label in Google Earth, but in Google Map not. Most possible reason is that google earth's latest feature is too latest. Currently it’s a fail way, but may be later, google map's KML renderer will take that feature into account.
GroundOverlay is "... a rectangular image overlay on the map ...". All is much simple.
Create image:
Open your Google Earth (make sure your latitude/longitude settings are Mercator) and go to your location
Add one pixel white image on your area and make it 33% transparent
Go to properties / place tab of your image overlay and copy latitudes/longitudes from there
Make screenshot in Google Earth and paste it to your favorite graphic editor
Crop image to the borders of your white transparent area
Add layer, where you will add your custom labels and add them
Switch off your base layer and save the result as png, for example overlay.png
Add the resulting image to your google map as:
google.maps.event.addDomListener(window, 'load', function() {
var mapDiv = document.getElementById('map'),
opts = {mapTypeId: google.maps.MapTypeId.HYBRID},
map = new google.maps.Map(mapDiv, opts),
area = new google.maps.LatLngBounds(
new google.maps.LatLng(55.042297, 82.906337),
new google.maps.LatLng(55.043862, 82.910473)
),
overlay = new google.maps.GroundOverlay(
'overlay.png', area, {map: map, clickable: false}
);
map.fitBounds(area);
});
OverlayView you can try by yourself.
ps: Is this a correct format for article? Or may be it should be a community wiki?

I created a MapLabel utility library a while ago. While it doesn't have any rotation or text-on-path capabilities (I'd love to see you add it!), it does let you put text on a map.