I’m trying to create two layers maps using dash-leaflet, the map will contain the us states by default as the following photo:
If the user clicked on certain state the counties of clicked state will show like this:
Note: I’m not interested in doing clustering or adding symbology or color bar
A bit tricky without understanding what the underlying dataset is… but if it’s a geojson, you can achieve that using the hideout property.
I’m guessing you probably have three layers (point layer, state layer and county layer)?
1 Like
Yes I have two geojsons, one for states and other one for the counties and there is a common column which is FIBS that represents the code of the state
Where are the clusters coming from?
No no, I don’t want to make clusters. I only want to make the interactivity between states and counties
Got it!
So you want to set up your map like this…
You can put the javascript in a few different places, and this is probably something best done clientside to make it lightning fast (you can also just use a normal dash callback)
geojson_filter = assign("function(feature, context){return context.props.hideout.includes(feature.properties.fid);}")
map = dl.Map(
dl.TileLayer(),
dl.GeoJSON(data=[STATE-GEOJSON],id='state-json')
dl.GeoJSON(data=[COUNTY-GEOJSON],options=dict(filter=geojson_filter),id='county-json')
)
app.clientside_callback("function(x){return x;}", Output("count-json", "hideout"), Input("state-json", "click_feature"))
As long as you have the FID in both geojson properties, that should work. But basically, the idea here is you want to send the entire geojson (both of them) to the client and then choose what to expose via the hideout. But the 30’000 foot view here is you want to send the state FID to the county geojson layer hideout.
@Emil has some really good tutorials here: Dash, it just takes a bit of work to understand them. But just about everything is covered there.
edit: that javascript code isn’t going to work (in the callbacK)… I think it needs to be this (below), but might need to play around with it. Ultimately, it needs to return the FID.
function(x) {return x.properties.fid}
1 Like