✊🏿 Black Lives Matter. Please consider donating to Black Girls Code today.
🧬 Learn how to build RNA-Seq data apps with Python & Dash. Register for the May 20 Webinar!

Dash-leaflet custom marker icon on data from geoJSON [SOLVED]

Hey guys,

I’m trying to make custom marker icon based on value in dataframe column.

I changed df to geojson (geobuf), everything works but I don’t know how to make custom marker.

I followed “dash leaflet express” code from this doc: Dash (dash-leaflet.herokuapp.com)

So I changed default marker to circlemaker but I don’t know how to change it to custom icon or even change colors based on dataframe column.

Can you please help me out or get me some references?

Thanks!

You can take a look at the Leaflet reference. Here is the documentation on how to create a marker with a custom icon,

https://leafletjs.com/examples/custom-icons/

Yeah, I found that references but still no luck. ^^ If you could elaborate more, that would be awesome.

I will try to make it work later today, I hope. :slight_smile: But if someone got code snippet, show me pls! :slight_smile:

Well, it depends on what you want to do :smiley: . If you want a custom marker, following the leaflet docs, the JS code would be,

window.myNamespace = Object.assign({}, window.myNamespace, {
    mySubNamespace: {
        pointToLayer: function (feature, latlng, context) {
            const greenIcon = L.icon({
                iconUrl: 'https://leafletjs.com/examples/custom-icons/leaf-green.png',
                shadowUrl: 'https://leafletjs.com/examples/custom-icons/leaf-shadow.png',
                iconSize: [38, 95], // size of the icon
                shadowSize: [50, 64], // size of the shadow
                iconAnchor: [22, 94], // point of the icon which will correspond to marker's location
                shadowAnchor: [4, 62],  // the same for the shadow
                popupAnchor: [-3, -76] // point from which the popup should open relative to the iconAnchor
            });
            return L.marker(latlng, {icon: greenIcon})
        }
    }
});

and the resulting map (using the code from dash-leaflet docs) looks like this,

1 Like

Thank you, Emil! I did it alone like two hours ago, finally. But thanks! :slight_smile: