Black Lives Matter. Please consider donating to Black Girls Code today.

Images/SVG/Custom Icons Scatter-mapbox

Hello community,

I’ve drawn a scattermap with points as marker, but my client wants to specific icons.
These icons don’t appear in the documentation or the mapbox icons. He wants to his own icons…
so how can I put images or my own SVGs on scatter-map and legend? I need custom the icon color too.

I need something like this.


Thank you so much.

Hi @Sampal, maybe you could use layout images as described in, and add transparent markers on top of it (for the hover in particular).

@Sampal Mapbox provides many icons, but they aren’t colored like in your posted image. Take a look at this discussion, where you can find an example: Scattermapbox marker with no fill and the link to mapbox icons.

Dash Leaflet supports custom icons, so that could be an options.

1 Like

Hi Emil, I was using dash leaflet and I looks awesome, But I just can’t reallize how to plot n markets that are in a pandas dataframe. I need help!.Thanks Emil!

Thanks! You can create markers (or any other object on the map) in the same way as you create other Dash components. Here is a small example,

import dash
import dash_html_components as html
import dash_leaflet as dl
import numpy as np
import pandas as pd

# Create data frame with coordinates.
lats = [55, 56, 57, 55, 56, 57]
lons = [10, 10, 10, 11, 11, 11]
df = pd.DataFrame(data=np.column_stack((lats, lons)), columns=["lat", "lon"])
# Create markers from data frame.
markers = [dl.Marker(position=(row["lat"], row["lon"])) for i, row in df.iterrows()]
# Create app.
app = dash.Dash(external_stylesheets=[''])
app.layout = html.Div([
    dl.Map(children=[dl.TileLayer(url="{z}/{x}/{y}.png")] + markers,
           style={'width': "100%", 'height': "100%"}, center=[56, 10.5], zoom=7),
], style={"position": "relative", 'width': '1000px', 'height': '500px'})

if __name__ == '__main__':

Thanks Emil, It was really helpful, are labels included in the package?. I mean to be able to plot by categories (changing the type of the market and showing what each color represents). I did it using mapbox, but I think dash leaflet is more flexible. thanks again for your help!

Sorry typo mistake…is marker