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

Dash Python
1

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!

2

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/

3

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:

4

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,

image
image951×462 192 KB

1 Like
5

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