How to add a custom symbol image inside map

Dash Python
1

I am able to plot a map with pin point as a circle using dash .However, I am willing to show custom image as pin point inside map.

i have gone through the plotly dash code & found below class
`class Marker(PlotlyDict):
“”"
Valid attributes for ‘marker’ at path under parents ():

['autocolorscale', 'blend', 'border', 'cauto', 'cmax', 'cmin', 'color',
'colorbar', 'colors', 'colorscale', 'colorsrc', 'colorssrc',
'gradient', 'line', 'maxdisplayed', 'opacity', 'opacitysrc',
'outliercolor', 'reversescale', 'showscale', 'size', 'sizemax',
'sizemin', 'sizemode', 'sizeref', 'sizesrc', 'symbol', 'symbolsrc']

Run <marker-object>.help('attribute') on any of the above.
‘’ is the object at

“”"
`

The Marker has symbolsrc option.Hence I tried below code to get the image i wanted
Scattermapbox(lat = lat ,lon = lon ,marker=Marker(size=13,color=‘rgb(6, 91, 112)’,symbolsrc=url_for(“static”,filename=‘pin.jpg’)), text = text )

Its giving error RuntimeError: Attempted to generate a URL without the application context being pushed. This has to be executed when application context is available.

I tried alternative like below giving the complete path of file.

Scattermapbox(lat = lat ,lon = lon ,marker=Marker(size=13,color=‘rgb(6, 91, 112)’,symbolsrc=r’D:\dashboard\static\pin.jpg’), text = text )

This do not give any error but not giving expected output i wanted.

I have mentioned the question in github below is link

i will close once i get answer from either community.

2

The *src keys inside plotly graphs are not used for images or links (unlike the html.A src attribute).

The currently is not a way to include custom symbols, you are limited to the symbols that are provided. Here is where all of these attributes are documented: https://plot.ly/python/reference/#scattermapbox-marker-symbol

And here is a full list of the available scattermapbox symbols:

airfield
airport
alcohol-shop
amusement-park
aquarium
art-gallery
attraction
bakery
bank
bar
beer
bicycle
bicycle-share
bus
cafe
campsite
car
castle
cemetery
cinema
circle
circle-stroked
clothing-store
college
dentist
doctor
dog-park
drinking-water
embassy
entrance
fast-food
ferry
fire-station
fuel
garden
golf
grocery
harbor
heliport
hospital
ice-cream
information
laundry
library
lodging
marker
monument
mountain
museum
music
park
pharmacy
picnic-site
place-of-worship
playground
police
post
prison
rail
rail-light
rail-metro
religious-christian
religious-jewish
religious-muslim
restaurant
rocket
school
shop
stadium
star
suitcase
swimming
theatre
toilet
town-hall
triangle
triangle-stroked
veterinary
volcano
zoo
2 Likes
3

(and what these symbols look like https://www.mapbox.com/maki-icons/)

1 Like
4

@chriddyp Any icons with colors available ?

1 Like
5

How is it going with this subject? Is it still not possible to add custom icons as marker symbols?

1 Like
6

Hi Chris! Is it not possible to change the color of these symbols? I am using star in my app, but no matter what color I choose for this marker, it always remains solid white.
image

1 Like
7

I noticed the same thing. As far as I can tell, the color of these symbols cannot be changed. I suspect these are raster graphics rather than vector graphics, which would also explain why they become pixelated at larger sizes.

1 Like
8

Dash Leaflet supports custom icons, so that could be an option. See e.g. example 1 here,

2 Likes
10

Some maki icons are missing from this. Are they supported now or this list is still accurate? I am looking for ‘city’, ‘industry’ etc.

11

You can use any icon. Also the maki ones :slight_smile:

import dash
import dash_leaflet as dl

app = dash.Dash()
app.layout = dl.Map([
    dl.TileLayer(),
    dl.Marker(position=(55, 9), icon=dict(iconUrl="https://api.iconify.design/maki-city-15.svg")),
    dl.Marker(position=(56, 9), icon=dict(iconUrl="https://api.iconify.design/maki-industry-15.svg"))],
    style={'width': '1000px', 'height': '500px'})

if __name__ == '__main__':
    app.run_server()