Question

Using the following code to add json points to a map using Leaflet.

var geojsonLayer = new L.GeoJSON(data, {
    pointToLayer: function (latlng){
        return new L.CircleMarker(latlng, {
            radius: 8,
               fillColor: "#fecb00",
               color: "#fecb00",
               weight: 1,
               opacity: 1,
               fillOpacity: 0.9,
           });

       }

});

I want to add functionality so that clicking the point brings up a popup with more information from the geojson file. How is this accomplished?

Answer 1

Assuming that the GeoJson contains a property called “myProperty”, to display that info inside a popup just place this instruction after your code:

geojsonLayer.on("featureparse", function (e) {
    e.layer.bindPopup("<p>Prop value: " + e.properties.myProperty + "</p>");
});

The “featureparse” event is called for each item inside your GeoJson collection. It’s typically used for more specific styling of the data and/or popup binding.