Dash-leaflet map bounds in state

Dash Python
1

Hello all. Not sure if this is the right place to ask (was either here or github issues), but is it possible to fetch the bounds of the leaflet map with state in dash-leaflet. I’ve tried the following

...
html.Div(
            [
                dl.Map(
                    [dl.TileLayer(), dl.LayerGroup(id="layer")],
                    id="map",
                    center=[47.5, 13],
                    zoom=7,
                )
            ]
        ),
...


@app.callback(
    Output("slider-div", "children"),
    [Input("submit-button", "n_clicks")],
    [
        State("date-picker", "start_date"),
        State("date-picker", "end_date"),
        State("environment", "value"),
        State("product", "value"),
        State("map", "bounds")
    ],
)
def date_picker(n_clicks, start_date, end_date, environment, product, bounds):
  # bounds is None

This only works if the map is defined with properties, but it doesn’t update when panning and zooming. Otherwise it would return None. Thanks in advance.

2

I only recently added this functionality, so it has only been available in rc releases so far. I have just pushed a new release, so if you upgrade to (0.1.5), the bounds should update on init/pan/zoom :slight_smile: . Here is a small example,

import json
import dash
import dash_html_components as html
import dash_leaflet as dl

from dash.dependencies import Input, Output

app = dash.Dash()
app.layout = html.Div([
    dl.Map(dl.TileLayer(), id="map", style={"height": "80%"}), html.Div(id="log")
], style={'width': '100%', 'height': '100vh', 'margin': "auto", "display": "block"})


@app.callback(Output("log", "children"), [Input("map", "bounds")])
def log(bounds):
    return json.dumps(bounds)


if __name__ == '__main__':
    app.run_server()
3

Thanks a lot! It works. Great job on the whole package

4

Thanks! I am happy you like it :smiley: