Search code examples
javascriptleafletmarkers

onEachFeature is not called


I'm trying to add some markers with specific Style and Popups, but if I use the PointToLayer function, onEachFeature is not called. So I can't add popup.

If I use only onEachFeature, I can use console.log(feature) But I can't show markers. And if I use pointToLayer, onEachFeature is not called.

var json_chambre = L.geoJson(response, {

    pointToLayer: function(feature, latlng) {
        var markerCh = L.circleMarker(latlng, {
            radius: 5,
            fillColor: "#ff7800",
            color: "#000",
            weight: 1,
            opacity: 1,
            fillOpacity: 0.8
        });
        chambre_pit.addLayer(markerCh);
    },
    onEachFeature: function(feature, layer) {
        console.log(feature);
    }
}); 

There is no errors, just I can't have popups and style at the same time.


Solution

  • Let me quote from the Leaflet reference for the pointToLayer callback option:

    A Function defining how GeoJSON points spawn Leaflet layers. It is internally called when data is added, passing the GeoJSON point feature and its LatLng. The default is to spawn a default Marker:

    function(geoJsonPoint, latlng) {
        return L.marker(latlng);
    }
    

    Notice what's different between that and your code? The pointToLayer callback returns the instance of L.Marker, and it gets added to the L.GeoJson instance (which is a subclass of L.LayerGroup).

    Since you do not return the marker (or layer) instances, the L.GeoJson instance ends up empty, and onEachFeature loops through a grand total of zero feature+layer pairs.

    Also note that you don't need to attach the popups at the onEachFeature step, i.e.:

    var json_chambre = L.geoJson(response, {
        pointToLayer: function(feature, latlng) {
            var markerCh = L.circleMarker(latlng, {
                radius: 5,
                fillColor: "#ff7800",
                color: "#000",
                weight: 1,
                opacity: 1,
                fillOpacity: 0.8
            });
            markerCh.bindPopup(feature.properties.label); // Or whatever
            return markerCh; // And do return the marker so it gets added to json_chambre.
        }
    });