[GIS] Different popup for every polygon (leaflet)

javascriptleafletpolygon

I'm making a map (you can see here) with different markers and layers to group these markers. I added polygons in another layer (Poligono layer), and I want to know if exist a way to add different information on each polygons that after can be show on a popup.

I can add different information on each marker using this

        L.marker ([21.017697, -89.641353], {icon:hospitalIcon}).bindPopup('Info info info').addTo(hospitales),

Exist a way to add information for each polygon using something like .bindPopup for the polygons I am using?

L.polygon ([
        [20.6894, -88.2017],
        [20.572997, -88.730264],
        [20.3457, -88.1677], 
    ]).addTo(polygon),

Something like the image. When you click, show information, I need to show different information for each polygon.

and you can see the complete code

Best Answer

If you read the Leaflet API documentation, you'll see that bindPopup is a method of L.Layer, so all interactive map layers have it. Lines, polygons, markers, circles, etc.

So, it is perfectly possible to do something like:

var poly1 = L.polygon(coordinatesForPolygon1).bindPopup('One');
var poly2 = L.polygon(coordinatesForPolygon2).bindPopup('Two');

Let me also copy-paste a bit of code from the Leaflet tutorial on map panes, that shows you that you can bind popups iterating through a list of polygons (or in a loop, or etc):

geojson.eachLayer(function (layer) {
    layer.bindPopup(layer.feature.properties.name);
});
Related Question