CODEWITHSUNDEEP
javascriptleaflet
Chris Dixon
Chris Dixon

Reputation: 1046

Custom Leaflet markers when markers are coded as a layer, not built individually?

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?

Upvotes: 1

Views: 160

Answers (1)

Falke Design
Falke Design

Reputation: 11338

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

Upvotes: 2

Related Questions