Scattermapbox marker symbol

[bhowey]

In the code below. If i use any other marker symbol other that circle, the marker disappears on the plot. I want to plot the centroids with a black ‘x’

# Create a map figure
fig = go.Figure()

# Plot data points
scatter_trace = go.Scattermapbox(
    lat=df["Latitude"],
    lon=df["Longitude"],
    mode='markers',
    marker=dict(size=7, color=df["cluster"]),
    hoverinfo='text',
    hovertext=df[['GinNumber', 'DateIncident', 'IncidentLocation', 'CasualtyName', 'Latitude', 'Longitude']]
)

# Add the scatter plot trace
# fig.add_trace(scatter_trace)
centroid_trace = go.Scattermapbox(
    lat=centroid_df["Lats"],
    lon=centroid_df["Lons"],
    mode='markers',
    marker = dict(
        size = 20,
        symbol = 'circle',
        color='black'
    )
)
fig.add_trace(centroid_trace)
fig.add_trace(scatter_trace)


fig.update_layout(
    mapbox = {
        'zoom':3,
        'accesstoken': map_key,
        'style': "light",
        'center':go.layout.mapbox.Center(lat=df["Latitude"].mean(), lon=df["Longitude"].mean())},
        margin={"r": 0, "t": 0, "l": 0, "b": 0},
    showlegend = False)

# Show the plot
fig.show()

[AIMPED]

Hi @bhowey.

There are a few forum posts which indicate, that you need a mapbox token for the use of marker icons even if you use a map style which would not require a token.

Once you have the token, you should be able to use the icons. However, I did not manage to make this work with some of the icons provided, for example “cross”.

The “dog-park” icon works, for example:

import plotly.graph_objects as go

token = open("mapbox_token.txt").read()
lats = [52.370216]
lons = [4.895168]


fig = go.Figure(
    data=go.Scattermapbox(
        lat=lats,
        lon=lons,
        mode='markers',
        hovertext=['Amsterdam'],  
        hoverinfo='text',                 
    ),
    layout=go.Layout(
        height=900,
        mapbox = dict(center= dict(lat=52.370216, lon=4.895168),            
            accesstoken=token,
            zoom=15,
            style="streets"
        )
    )
)

fig.update_traces(marker={"size": 30, "symbol": "dog-park"})

[bhowey]

Yes… so i have a mapbox key that I’m using and some (very few) of the symbols work. For example ‘airport’ and a few others but many of them just return black makers that dont seem to render.

Is there not a more simple way to do this?

[AIMPED]

IMHO that is pretty simple- if it worked. Might be a bug, not sure.

[bhowey]

Agreed… only if it actually works. Why would it not just use standard matplotlib markers!

[AIMPED]

Hey @bhowey, there is an open issue concerning this on github:

Some Scattermapbox Symbols Not Available

The last response from @nicolaskruchten indicates what I mentioned earlier. The linked example from the docs works for me, changing one of the symbols to “cross” does not work.

Scatter

[adamschroeder]

I agree with @AIMPED , I think this is still a bug.

@bhowey I actually wasn’t able to get any other marker to display except for the circle. Were you able to get other markers to display?

[AIMPED]

Hey @adamschroeder ,

I downloaded the icons and globed a list with icon names.

import plotly.graph_objects as go

token = open("mapbox_token.txt").read() # you need your own token

icons = ['aerialway', 'airfield', 'airport', 'alcohol-shop', 'american-football', 'amusement-park', 'animal-shelter', 'aquarium', 'arrow', 'art-gallery', 'attraction', 'bakery', 'bank-JP', 'bank', 'bar', 'barrier', 'baseball', 'basketball', 'beach', 'beer', 'bicycle-share', 'bicycle', 'blood-bank', 'bowling-alley', 'bridge', 'building-alt1', 'building', 'bus', 'cafe', 'campsite', 'car-rental', 'car-repair', 'car', 'casino', 'castle-JP', 'castle', 'cemetery-JP', 'cemetery', 'charging-station', 'cinema', 'circle-stroked', 'circle', 'city', 'clothing-store', 'college-JP', 'college', 'commercial', 'communications-tower', 'confectionery', 'construction', 'convenience', 'cricket', 'cross', 'dam', 'defibrillator', 'dentist', 'diamond', 'doctor', 'dog-park', 'drinking-water', 'elevator', 'embassy', 'emergency-phone', 'entrance-alt1', 'entrance', 'farm', 'fast-food', 'fence', 'ferry-JP', 'ferry', 'fire-station-JP', 'fire-station', 'florist', 'fuel', 'furniture', 'gaming', 'garden-centre', 'garden', 'gate', 'gift', 'globe', 'golf', 'grocery', 'hairdresser', 'harbor', 'hardware', 'heart', 'heliport', 'highway-rest-area', 'historic', 'bbq', 'caution', 'danger', 'fitness-centre', 'home', 'logging', 'parking', 'ranger-station', 'school', 'teahouse', 'horse-riding', 'hospital-JP', 'hospital', 'hot-spring', 'ice-cream', 'industry', 'information', 'jewelry-store', 'karaoke', 'landmark-JP', 'landmark', 'landuse', 'laundry', 'library', 'lift-gate', 'lighthouse-JP', 'lighthouse', 'lodging', 'marker-stroked', 'marker', 'mobile-phone', 'monument-JP', 'monument', 'mountain', 'museum', 'music', 'natural', 'nightclub', 'observation-tower', 'optician', 'paint', 'park-alt1', 'park', 'parking-garage', 'parking-paid', 'pharmacy', 'picnic-site', 'pitch', 'place-of-worship', 'playground', 'police-JP', 'police', 'post-JP', 'post', 'prison', 'racetrack-boat', 'racetrack-cycling', 'racetrack-horse', 'racetrack', 'rail-light', 'rail-metro', 'rail', 'recycling', 'religious-buddhist', 'religious-christian', 'religious-jewish', 'religious-muslim', 'religious-shinto', 'residential-community', 'restaurant-bbq', 'restaurant-noodle', 'restaurant-pizza', 'restaurant-seafood', 'restaurant-sushi', 'restaurant', 'road-accident', 'roadblock', 'rocket', 'school-JP', 'scooter', 'shelter', 'shoe', 'shop', 'skateboard', 'skiing', 'slaughterhouse', 'slipway', 'snowmobile', 'soccer', 'square-stroked', 'square', 'stadium', 'star-stroked', 'star', 'suitcase', 'swimming', 'table-tennis', 'telephone', 'tennis', 'terminal', 'theatre', 'toilet', 'toll', 'town-hall', 'town', 'triangle-stroked', 'triangle', 'tunnel', 'veterinary', 'viewpoint', 'village', 'volcano', 'volleyball', 'warehouse', 'waste-basket', 'watch', 'water', 'waterfall', 'watermill', 'wetland', 'wheelchair', 'windmill', 'zoo']

lon = [-75 for _ in icons]
lat = [60-0.5*i for i,_ in enumerate(icons)]

fig = go.Figure(
        go.Scattermapbox(
        mode="markers+text",
        text=icons,
        lon=lon, 
        lat=lat,
        marker={
            'size': 20, 
            'symbol': icons,
        },
    )
)
                
fig.update_layout(
    mapbox = {
        'accesstoken': token,
        'style': "outdoors", 'zoom': 0.7
    },
    showlegend = False,
    height=800
)

fig.show()

[tjbaur]

Found this post from 2017 listing the (then) icons:

How to add a custom symbol image inside map

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 bicy…

Not sure what the icon set was in 2017, but it appears to be an issue with plotly.js. You can create a js plot with the following and get a warning from mapbox.

<head>
<script src="https://cdn.plot.ly/plotly-2.29.1.min.js" charset="utf-8"></script>
</head>
<body>
    <div id="myDiv">

    </div>
    <script type="text/javascript">
        var config = {mapboxAccessToken:"Your Token"}
        var data = [{
          type:'scattermapbox',
          lat:['45.5017'],
          lon:['-73.5673'],
          mode:'markers',
          marker: {
              size:14,symbol:'cross'
          },
          text:['Montreal']
        }]

        var layout = {
          autosize: true,
          hovermode:'closest',
          mapbox: {
              style:'outdoors',
            center: {
              lat:45,
              lon:-73
            },
            pitch:0,
            zoom:5
          },
        }

        Plotly.newPlot('myDiv', data, layout, config)</script>
</body>

I’ll see if I can come up with a reason.

[adamschroeder]

hi @AIMPED
How and where did you download the icons? did you put them in the same root folder as the python file running the graph?

[AIMPED]

Hey @adamschroeder

I actually just clicked on the download maki button on the page you linked to. If you download the zip file, you’ll find a icons folder. I used glob to get the icon names and created a list of strings for the use within plotly.

I assumed, that the filename of each icon.svg corresponds to the string used in plotly.graph_objects

I did not store the icons on my hdd.

Hope that helps!

[tjbaur]

Did some digging. I think this is maybe how mapbox does the symbols (or sprites as they call them). You can see the available sprites for a given style by going to https://api.mapbox.com/styles/v1/mapbox/outdoors-v9/sprite.png?access_token=your-token, the json object can be found at https://api.mapbox.com/styles/v1/mapbox/outdoors-v9/sprite.json?access_token=your-token. Plotly appends a “-15” to the symbol name, so anything with a “-15” after it will be available.

These appear to be different, depending on the style. Here’s the outdoor set:

and the light set:

This would also help explain why you can only color circles.

[tjbaur]

I wasn’t able to find much in plotly.js, but it looks like it may be handing off the hard work to GitHub - plotly/mapbox-gl-js: Interactive, thoroughly customizable maps in the browser, powered by vector tiles and WebGL (a fork of Mapbox’s repo).

In theory, it should be possible to add images to the sprite list, see below.

plotly/mapbox-gl-js/blob/52fa02f543e8403946a861b4736261561b2a2b6b/src/style/style_image.js#L45-L99

Not very useful for the Python lib, but at least should somewhat explain what’s going on.