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

How to add a custom symbol image inside map

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
https://github.com/plotly/dash/issues/155
i will close once i get answer from either community.

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

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

1 Like

@chriddyp Any icons with colors available ?

1 Like

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

1 Like

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

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.

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

2 Likes