Hello there,
I have a px.choropleth_mapbox
of which I’m controlling the width and height with CSS media queries. However, I’m not able to find a decent zoom
parameter value that is suitable for both mobile and desktop. I would like to change the value of zoom
based on the viewport size.
Over at dash bootstrap components I saw that there are these viewport size keyword arguments xs, sm, md, lg, xl
. What I’m trying to in simplified version:
if viewport_size == 'sm':
fig.update_layout(zoom = 3.5)
Is something like that possible?
I also read about hiding divs on the forum. So I guess I could create two px.choropleth_mapbox
with different zoom levels. And then display one of them based on viewport size, and hide the other. Would that be done using media queries in CSS or a function in Python?
I couldn’t quite figure out for which terms I should be searching for to do such a hide and display action.
fig_normal= px.choropleth_mapbox(df, geojson=json,.... zoom = 5.5)
and
fig_small = px.choropleth_mapbox(df, geojson=json,.... zoom = 3.5)
Given the size of the choropleth it seems smoother to change the zoom
parameter based on viewport size, over loading the choropleth twice. But I’m ok with whichever works.
Thank you,
Pololnger