Scattermapbox - fix radius of marker when zooming

Dash Python
1

I working in Dash and have a Scattermapbox displaying markers that vary in size depending on certain parameters selected by user. The problem is when user zooms in the markers scale with the zoom and become smaller in relation to the map itself. How can I fix the radius of the marker (say 5 mile radius) so that when I zoom in the marker stays the same size relative to the country map?

Using python Dash

1 Like
2

Any solution found for this? Got the same problem with a scatter plot representing a three-dimensional structure

1 Like
3

Hi, please add me to this list too. When user zooms in the markers become tiny. Quite counterintuitive. Almost frustrating. The question is old (2018) I’m wondering if there is a solution yet.

4

I am not sure how to do it in plotly, but it is possible in dash-leaflet.

5

I solved this in the past by adding a client side callback that listens to the plot relayoutData then uses Plotly.restyle to change the marker size based on zoom level.

2 Likes
6

can you share a little detail on how you did this? or the code excerpt specifically?

7

Something like

from dash import  Input, Output, clientside_callback

# In the layout, a dcc.Graph with id "map" is defined.

clientside_callback(
    """(relayout) => {
        var mapEl = document.getElementById("map").children[1]
        mapEl.id = "__map_js"
        if (relayout["mapbox.zoom"]) {
            relayout["marker.size"] = 2 + relayout["mapbox.zoom"] ** 2 / 30
            Plotly.update("__map_js", {}, layout_update)
        }
        return dash_clientside.no_update
    }""",
    Output("map", "id"),
    Input("map", "relayoutData"),
)
1 Like