Two layers map in dash-leaflet

Dash Python
1

I’m trying to create two layers maps using dash-leaflet, the map will contain the us states by default as the following photo:

image
image1371×754 213 KB

If the user clicked on certain state the counties of clicked state will show like this:
image
image1371×751 154 KB

Note: I’m not interested in doing clustering or adding symbology or color bar

2

What is the question? :slight_smile:

3

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
4

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

5

Where are the clusters coming from?

6

No no, I don’t want to make clusters. I only want to make the interactivity between states and counties

7

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