0

How can I trigger a callback-event when zooming (in or out) in dash_leaflet which gives me the current range of the shown map (the minimal/maximal x/y position)?

Here a minimal working example with a callback which gives me the center, but not the x/y range.

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

from dash.dependencies import Output, Input, State

app = dash.Dash()
app.layout = html.Div([
dl.Map(dl.TileLayer(), style={'width': '1000px', 'height': '500px'}, id="map"),
html.Div(id="output1"), html.Div(id="output2"), html.Div(id="output3")
])

@app.callback(Output("output1", "children"), [Input("map", "zoom")])
def func(viewport):
        print(viewport)
        return json.dumps(viewport)

@app.callback(Output("output2", "children"), [Input("map", "center")])
def func(viewport):
        print(viewport)
        return json.dumps(viewport)

@app.callback(Output("output3", "children"), [Input("map", "viewport")])
def func(viewport):
        print(viewport)
        return json.dumps(viewport)

if __name__ == '__main__':
        app.run_server()
olli
  • 59
  • 4
  • I found the solution here: https://stackoverflow.com/questions/69399334/get-the-bounding-box-of-the-visible-dash-leaflet-map – olli Dec 17 '22 at 20:16

0 Answers0