Linked Map Views with Dash-Leaflet

Dash Python
1

Hi all,

I am new to Dash-Leaflet. Is it possible to link the zoom and location of two Leaflet maps? I.e. scrolling on one is reflected on the other? I’m not seeing any documentation on this capability.

thanks.

2

Funny, actually was in the middle of setting this up for one of my projects. Yes its possible:

Just need this callback, main-edit-map is the main map and preview-leaflet-map is the second map you want to follow the main map.

def calculate_center(bounds):
    lat_center = (bounds[0][0] + bounds[1][0]) / 2
    lon_center = (bounds[0][1] + bounds[1][1]) / 2
    return [lat_center, lon_center]


@app.callback(
    [Output("preview-leaflet-map", "center"), Output("preview-leaflet-map", "zoom")],
    [Input("main-edit-map", "bounds"),
    Input("main-edit-map", "zoom"),
    ],
    prevent_initial_call=True # Avoids running on initial load if views are already synced
)
def sync_preview_map_view(bounds, zoom):
    if not bounds or zoom is None:
        return dash.no_update
    try:
        center = calculate_center(bounds)
        new_center = center
        new_zoom = zoom
        return new_center, new_zoom
    except Exception as e:
        print(f"Error in update_center: {e}")
        print(f"bounds: {bounds}, zoom: {zoom}")
        return dash.no_update
3

Fantastic, thank you!