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.
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 itsLatLng
. The default is to spawn a defaultMarker
: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.
}
});