Scattermapbox: Doesn't work with marker mode as "text"

Dash Python
1

Hello Plotly Community,

I would like to display the location of oil and gas wells over an open-street-map as markers along with static text ( well names on the map).

I have the following code:

 data = [
            {
                'lon': longs,
                'lat': lats,
                'text': text,
                'type': 'scattermapbox',
                'mode': "markers+text",
                'marker':{
            'color': '#636efa',
            'size': 8,
        },
}
]

where longs → list of longitude points, lats-> list of latitude points → list of Well names

 layout = {
        'title': 'Well locations',
        'mapbox': {'style': "open-street-map", 'center': {'lat': 80, 'lon': 80},'zoom': 8},
        'autosize': False,
        'margin': {"r": 0, "t": 0, "l": 0, "b": 0},
        'hovermode': 'closest',
        'showlegend': False,
        'height': 1080

    }

With this code, neither the marker points nor the text appears on the map. If I use mode as “markers” it works alright.

Could you please point me to what could be wrong with this code?

Thanks!

2

Hi @Ud29,

I am not sure what goes wrong with Scattermapbox, but with Dash Leaflet, the desired behavior can be achieved in a few lines. Here is a MWE for illustration,

import dash
import dash_html_components as html
import dash_leaflet as dl

# Setup some dummy data.
count, delta, center = 5, 0.1, [56, 10]
positions = [[center[0] - delta*(i - count/2), center[1]] for i in range(count)]
labels = [str(chr(97 + i)) for i in range(count)]
# Create markers with text.
markers = [dl.Marker(position=pos, children=[dl.Tooltip(labels[i])]) for i, pos in enumerate(positions)]
# Create small example app.
app = dash.Dash()
app.layout = html.Div([
    dl.Map(center=center, zoom=9, style={'width': '1000px', 'height': '500px'}, children=[dl.TileLayer()] + markers)
])

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

When you post a question like this, a self-contained example (i.e. a piece of code that can run) that illustrates the problem would be helpful :slight_smile:

Cheers,
Emher

1 Like
3

Hi @Ud29, welcome to the forum. There is indeed an open issue about this problem https://github.com/plotly/plotly.js/issues/4110. If you can use a mapbox style (with a free token) the problem disappears. This could be a workaround until the problem is fixed.

4

In case it’s useful to anyone else, go.Choroplethmapbox.mapbox_style accepts mapbox:// custom style URL. In my case, I wanted a plain white background and was originally using:

go.Layout(
    mapbox_style='white-bg',
    ...
)

but per bug report, the “non-mapbox” style prevents rendering of text. Logging in to mapbox and creating a new custom style via https://studio.mapbox.com/ solved this issue for me:

map_layout = go.Layout(
    mapbox_style='mapbox://styles/path/to/your/custom/style',
    mapbox_accesstoken='your_token_here'
)
1 Like
6

Is there still no solution for this problem?