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()