Hello everyone
I am trying to build a Dash app with an interactive dash-leaflet map as the core element. To start out, I am trying to recreate the map shown n the official tutorial as seen here. I can’t get this to work, despite not changing anything about the code from the linked docu.
Here’s my attempt using dash 2.16.0 and dash-leaflet 1.0.15.
import dash_leaflet as dl
from dash import Dash, Input, Output, State
from dash_extensions.javascript import assign
# Color selected state(s) red.
style_handle = assign("""function(feature, context){
const {selected} = context.hideout;
if(selected.includes(feature.properties.name)){
return {fillColor: 'red', color: 'grey'}
}
return {fillColor: 'grey', color: 'grey'}
}""")
url = "https://raw.githubusercontent.com/PublicaMundi/MappingAPI/master/data/geojson/us-states.json"
# Create small example app.
app = Dash()
app.layout = dl.Map(
[
dl.TileLayer(),
dl.GeoJSON(
url=url,
zoomToBounds=True,
id="geojson",
hideout=dict(selected=[]),
style=style_handle,
),
],
style={"height": "50vh"},
center=[56, 10],
zoom=6,
)
@app.callback(
Output("geojson", "hideout"),
Input("geojson", "n_clicks"),
State("geojson", "clickData"),
State("geojson", "hideout"),
prevent_initial_call=True,
)
def toggle_select(_, feature, hideout):
selected = hideout["selected"]
name = feature["properties"]["name"]
if name in selected:
selected.remove(name)
else:
selected.append(name)
return hideout
if __name__ == "__main__":
app.run_server()
This is the exact same code from the tutorial, except for the explicit loading of the geojson dataset off of github. The polygons, however, are not displayed. This changes if I deactivate the style_handler like so:
import dash_leaflet as dl
from dash import Dash, Input, Output, State
from dash_extensions.javascript import assign
# Color selected state(s) red.
style_handle = assign("""function(feature, context){
const {selected} = context.hideout;
if(selected.includes(feature.properties.name)){
return {fillColor: 'red', color: 'grey'}
}
return {fillColor: 'grey', color: 'grey'}
}""")
url = "https://raw.githubusercontent.com/PublicaMundi/MappingAPI/master/data/geojson/us-states.json"
# Create small example app.
app = Dash()
app.layout = dl.Map(
[
dl.TileLayer(),
dl.GeoJSON(
url=url,
zoomToBounds=True,
id="geojson",
hideout=dict(selected=[]),
# style=style_handle,
),
],
style={"height": "50vh"},
center=[56, 10],
zoom=6,
)
@app.callback(
Output("geojson", "hideout"),
Input("geojson", "n_clicks"),
State("geojson", "clickData"),
State("geojson", "hideout"),
prevent_initial_call=True,
)
def toggle_select(_, feature, hideout):
selected = hideout["selected"]
name = feature["properties"]["name"]
if name in selected:
selected.remove(name)
else:
selected.append(name)
return hideout
if __name__ == "__main__":
app.run_server()
Now the map loads properly, but obviously without the desired styling feature.
What am I missing? The code appears to work fine on the docu page, but not when recreating locally.
I am quite certain that dash-extensions.javascript does not work as intended, although I have installed the newest published version 1.0.14.
Thanks a lot in advance.
