zoomInMapbox button

đź“Š Plotly Python
1

There appears to a “zoomInMapbox” and a “zoomOutMapbox” button for the modebar. These appear to be something I would like to use. I cannot seem to them to wok? Are these available for use or just stubs at the moment?

2

Hi @pman could you create an example for us to play around with?

I’m actually not sure I understand you correctly. Are these buttons available already and you don’t get them to work properly or are you searching for such a functionality?

3

Thank you for the reply. I certainly will make a toy version. But I am traveling until next week, so it wil be a few days.

1 Like
4

from dash import Dash, html, dcc
from dash.dependencies import Input, Output
import plotly.express as px
import pandas as pd
from dash_bootstrap_components.themes import BOOTSTRAP

MAPBOX_TOKEN = open(“.mapbox_token”).read()
px.set_mapbox_access_token(MAPBOX_TOKEN)

def render(app: Dash) → html.Div:

@app.callback(
    Output('map-info', "children"),
    Input('map-div-id', "relayoutData"),
)
def get_map_data(rod):

    if rod is None:
        return
    
    print(rod)

fig = px.scatter_mapbox(
    pd.DataFrame(),
    center=dict(lat=0, lon=0),
    zoom=1,
    mapbox_style="light",
)

fig.update_layout(
    margin={"r": 0, "t": 0, "l": 0, "b": 0},
    mapbox_bounds={
        "south": -90,
        "west": -180,
        "north": 90,
        "east": 180,
    },
)

map = html.Div([
        dcc.Graph(
            figure=fig,
            config={
                "modeBarButtonsToRemove": [
                    "lasso3d",
                    # "resetGeo",
                    # "resetView",
                    # "pan2d",
                    "select2d",
                    "lasso2d",
                ],
                "modeBarButtonsToAdd": [
                    "zoomInMapbox",
                    "zoomOutMapbox"
                ],
                "displaylogo": False,
                "doubleClick": False,
            },
            style={"height": "100", "width": "100", "margin": 0},
            id='map-div-id',
        ),
        html.Pre(id='map-info', style={'whiteSpace': 'pre-wrap'})
    ]
)

return map

def main() → None:
app = Dash(external_stylesheets=[BOOTSTRAP])
app.title = “Map viewer”
app.layout = html.Div(
className=“map-container”,
children=[render(app)],
)
app.run(debug=True)

if name == “main”:
main()

5

I am pretty new to dash, so please forgive any mistakes or silliness you may encounter. This all revolves around trying to get the map extent when navigating. The pan and mouse wheel zoom has a relaydataOut that returns complete information about the map (center point, zoom level, and map extent). But, when doing a button zoom on the map menu (right next to the pan button), returns only zoom level and that does help me because ultimately I am after the map extent. Then I saw the zoomInMapbox buttons, but they don’t seem to change anything with respect to the map information returned.