Dash plotly choropleth map update_geos not working

Dash Python
1

I have a choropleth map that looks like this.
image
and I have a slider to make it an ‘animation’.

image
image1244×516 40.8 KB

I have a dataframe of data from an excel file and geographical data of the regions in a json file.

1st problem

My first issue is that the map is always in such a small box (as shown in the second image) and I couldn’t find a way to make it bigger.
Could the issue be with fitbounds=“locations” ??

fig.update_geos(
        fitbounds = "locations", 
        visible = False
)

2nd problem

And my second problem is that when I slide over to the next time period, the zoom and (lat,lon) restart to the original view of the whole map. I tried adding a state and updating geos of the figure but that did not work. Here is the code

@app.callback(
    [Output(component_id='output_container', component_property='children'),
     Output(component_id='my_bee_map', component_property='figure')],
    [Input(component_id='slct_year', component_property='value')],
    [State('my_bee_map', 'relayoutData')]
)
def update_graph(option_slctd, relayoutData):
    option_slctd = marks_to_label[option_slctd]
    print(f"### option_slctd = {option_slctd}")
    print(relayoutData)
    # {'geo.projection.rotation.lon': 15.454989036807794, 
    # 'geo.projection.rotation.lat': 49.903352371333405, 
    # 'geo.projection.scale': 28.646352645349214}

    container = ""

    dff = df_anim[df_anim[TIME_COL_NAME] == option_slctd]

    fig = px.choropleth(dff,
             locations=REGION_CODE_COL,
             featureidkey=f"properties.{REGION_CODE_COL}",
             geojson=regions_json,
             color=REL_RANGE_TEXT,
             hover_name=REGION_NAME_COL,
             hover_data={
                 REGION_CODE_COL: False, 
                 REGION_NAME_COL: False, 
                 TIME_COL_NAME: False, 
                 REL_COL_NAME: False, 
                 REL_RANGE_TEXT: False,
                 REL_TEXT_COL: True
             },
             color_discrete_map=dict(zip(INTERVAL, COLOR)),
             category_orders={
                  REL_RANGE_TEXT : INTERVAL
              },
             projection="orthographic"
    )
    fig.update_geos(
        fitbounds = "locations", 
        visible = False
    )

    if relayoutData:
        if relayoutData.get('geo.projection.rotation.lat'):
            print("updating lat")
            fig.update_geos(
                center_lat = relayoutData['geo.projection.rotation.lat']
            )
        if relayoutData.get('geo.projection.rotation.lon'):
            print("updating lon")
            fig.update_geos(
                center_lon = relayoutData['geo.projection.rotation.lon']
            )
        if relayoutData.get('geo.projection.scale'):
            print("updating scale")
            fig.update_geos(
                projection_scale = relayoutData['geo.projection.scale']
            )
        
    fig.update_layout(
        # title_text=MAP_TITLE,
        font=dict(size=16)
    )
    fig['layout']['geo']['subunitcolor']='rgba(255,255,255,0)'

    return container, fig

3rd problem

And the third thing which does not work is changing the colors of the region borders. I would like to change them to transparent but this piece of code doesn’t change anything. Even trying to change them to white or red did not do anything.

 fig['layout']['geo']['subunitcolor']='rgba(255,255,255,0)'

To summarize it all

  1. I want to make the box with the map larger (shown in the second image)
  2. I want the lat,lon, and zoom saved when sliding over to the next time period. It always jumps back to the view of the whole map.
  3. I want to change the border color of the regions to transparent. (This is so that the pinkish colors are seen when I work with much smaller regions)

Thanks for any help

2

For the second problem, try using uirevision?

For the first problem, try making the height of the graph div taller and reducing the margin.

For the third problem, I haven’t dug in but it might be a bug.

3

1st - increasing the hight helped make the map larger and lowering margins also helped, but there are still large white spaces on both sides.

2nd - uirevision worked

thanks

4

Can you elucidate how uirevsion worked for you?