Leaflet map adapted from this tutorial builds markers like:
async function render_markers() {
const markers = await load_markers();
L.geoJSON(markers)
.bindPopup((layer) => layer.feature.properties.name)
.addTo(layerGroup);
}
I want to change this map's markers to any of the solutions recommended in this good thread. But I don't know how to get a handle on them as all markers seem built individually, eg:
L.marker([51.5, -0.09], {icon: greenIcon}).addTo(map);
Leaflet documentation also only seems to show how to change markers individually. How can we get a solution like this working with the way our map is built? What are we missing?
You are searching for this Leaflet-Tutorial.
To customize markers or circles you need to add pointToLayer function:
L.geoJSON(markers, {
pointToLayer: function (feature, latlng) {
return L.marker(latlng, {icon: greenIcon} );
}
})
.bindPopup((layer) => layer.feature.properties.name)
.addTo(layerGroup);