Change Graph Parameter based on viewport size?

Dash Python
1

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

2

Is there really no solution for this? Changing graph parameters based on a condition?