onEachFeature is not called

0
votes

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.

1
javascriptleafletmarkers

1 Answers

2
votes

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.
    }
});