✊🏿 Black Lives Matter. Please consider donating to Black Girls Code today.
⚡️ Concerned about the grid? Kyle Baranko teaches how to predicting peak loads using XGBoost. Register for the August webinar!

Setting zoom limits for Choropleth maps


I’m trying to prevent users from zooming out too much on a choropleth map, largely because it doesn’t look too great when users zoom out to the point where the map is small colored box in an expanse of white.

I’d like to set the maximum zoom out such that the map does not reduce beyond the initially defined area while still allowing zoom functionality.


Hi @shanv, that’s quite hacky and I haven’t tried it, but one thing you could do is to have a callback listening to the relayoutData of your figure (see https://dash.plot.ly/interactive-graphing), and if the zoom is too large / the axis range too small, then you reset the zoom. You would need to use a trick so that the callback does not generate an infinite sequence of callback triggering, what you can do is to store the time at which the callback is triggered in a dcc.Store and when the callback is triggered again compare the current time with the data in the dcc.Store (and raise dash.no_update if it’s too close, which will break the loop). Once again, not tested, so I don’t know if this would be smooth enough for your application.

Thanks @Emmanuelle

That’s a really interesting approach, but like you said, very hacky.
I gave it a go and it worked up to a point but definitely not smooth enough for my needs. I’ll take a look around and see if there are any other methods or perhaps I’ll have to switch to a different solution entirely for my map.

This may be off-topic but could anyone recommend a different library or plugin for geographical maps that can be used with Dash?

@shanv I’m very interested to know if you’ve found a solution to the problem you mentioned initially.

If you are not bound to using a plotly graph, dash-leaflet support limiting the zoom level.