Dash plotly choropleth map update_geos not working

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

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” ??

        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

    [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}")
    # {'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,
                 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)),
                  REL_RANGE_TEXT : INTERVAL
        fitbounds = "locations", 
        visible = False

    if relayoutData:
        if relayoutData.get('geo.projection.rotation.lat'):
            print("updating lat")
                center_lat = relayoutData['geo.projection.rotation.lat']
        if relayoutData.get('geo.projection.rotation.lon'):
            print("updating lon")
                center_lon = relayoutData['geo.projection.rotation.lon']
        if relayoutData.get('geo.projection.scale'):
            print("updating scale")
                projection_scale = relayoutData['geo.projection.scale']
        # title_text=MAP_TITLE,

    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.


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

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.

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