Annotations text is not able to rendered before being converted to image

đź“Š Plotly Python
1

fig.write_image(f’output/graphics/interesting_spots.svg’,width=1200, height=800)

Hi Guys I am using this code a map into an image. It is a heavy graph so the text annotations are not able to be completely rendered before it’s converted in image (look faded). Sometimes they don’t show at all because they couldn’t render.

I unfortunately can’t add any wait delay inside that function as there’s no option in plotly.
Plus I even tried with plotly offline, which is supposed to not be using any browser, but still same issue remains.
Adding any time.sleep before fig.write_image is not helpful.

Screenshot 2023-10-26 151316
Screenshot 2023-10-26 1513161376Ă—515 264 KB

n

2

Hey @Sim, welcome to the community!

Could you give us more information/code concerning the figure and want exactly is the issue?

How many annotations do you want to display, what kind of graph are you using?

3

Hey this is my complete code for the graph. There’s 75 polygons/rows in my df rn. It varies from suburb to suburb.

Issue is mainly when I am converting to image I am not seeing annotations appropriately. So as per my screenshot, either they look too faded or don’t show at all. The original annotation text is supposed to be bright cyan colour. Which shows sometimes when converted to an image.

if not df.empty:
    
    import plotly.graph_objects as go
    from shapely.geometry import LineString
    import plotly.express as px
    import plotly.graph_objects as go

    px.set_mapbox_access_token(mapbox_access_token)

    # Create the choropleth map with custom colors
    fig = px.choropleth_mapbox(df,
                               geojson=df.geometry,
                               locations=df.index,
                               color="Key",
                               color_discrete_map=color_map,  
                               mapbox_style="dark",
                               zoom=custom_zoom,
                               opacity=0.9,
                               title="Key Amenities Map",  )


    pdf=gpd.GeoDataFrame({'geometry': [sal_shape]}, columns=['geometry'])
    # Add the property polygon to the map
    fig.add_trace(
        go.Choroplethmapbox(
            geojson=pdf.geometry.__geo_interface__, 
            locations=pdf.index,
            z=[1],  # constant color value
            colorscale=[[0, 'red'], [1, 'red']],  # setting color to red
            showscale=False,  # do not show color scale
            marker_opacity=0.1
        )
    )

    # Assuming sal_shape is your polygon
    x,y=[a[0] for a in sal_exterior],[a[1] for a in sal_exterior]

    # Add the polygon boundary as a Scattermapbox trace
    fig.add_trace(go.Scattermapbox(
        mode='lines',
        lon=x,
        lat=y,
        line=dict(width=1, color='red'),
        showlegend=False
    ))
    

    # Update layout
    fig.update_layout(
        autosize=False,
        width=1250,
        height=800,
        mapbox=dict(
            center=dict(lat=sal_center.y, lon=sal_center.x)),
        margin=dict(t=70, l=40, b=0),
        #margin=dict(t=70),
        paper_bgcolor='rgba(255,255,204,0)'
    )


    offset = -0.0000 #-0.0002
    # Create a scatter mapbox trace for centroids
    scatter = go.Scattermapbox(
        lat=[lat + offset for lat in df.south.y],  # Adding vertical offset
        lon=df.centroid.x,
        mode='text',
        text=df['name'],
        textposition="middle center",
        textfont=dict(color='cyan'),
        marker=dict(size=0),
        showlegend=False,
    )


    # Add the scatter trace to the figure
    fig.add_trace(scatter)

    # Adding a logo
    fig.add_layout_image(mib_logo_temp)

    #For svg legend truncation
    fig.update_layout(legend=legend_font_dict)
    
    
    fig.write_image(f'output/graphics/suburb/{sal}/{typ}/interesting_spots.svg',width=1200, height=800)

    #fig.show()

Basically I am using “GeoAnnotations” by using scattermapbox in text mode.