Bring Drag & Drop to Dash with Dashboard Engine. 💫 Learn how at our next webinar!

Overlap polygons (.shp) to px.density_mapbox

I am trying to overlap a choropleth from a custom multipolygon geojson (with ids) to a density mapbox created from a pd.DataFrame.
I am now stuck on two challenges:
1 - the choropleth polygons are below the density plot, although below=''
2 - the polygons fill should be transparent, and their borders visible.

I read on the choropleth map page that ’ A Choropleth Map is a map composed of colored polygons. It is used to represent spatial variations of a quantity’.

Given this, my second point may sound weird to you. The reason why I want to display only the borders of the polygons is that they do not represent the spatial variation of a quantity, which is instead represented by the density map. My polygons only represent portions of terrain, and their function is only getting oriented in space.

Does anyone know how to 1 - bring a trace above another, and 2 - how to keep only the borders of a choropleth?

Here my code:

fig = px.density_mapbox(df, 
                        lat='lat', 
                        lon='lon', 
                        z='var',
                        radius=10,
                        center=center_map, 
                        zoom=15,
                        mapbox_style="carto-positron")

fig2 = go.Figure(
    data=[go.Choroplethmapbox(
        geojson=my_geojson,
        locations=[f["id"] for f in my_geojson["features"]],
        # We don't care much of the z value
        z=[1] * len(my_geojson["features"]),
        # because we don't show z anyways
        hoverinfo='none',
        # Bring polygons above any other layer - HOW?
        below='',
        # Make polygons transparent, keeping their borders - HOW?
        marker=dict(opacity=0.7, line=dict(color="#000", width=2)),
        showscale=False
    )]
)

fig.add_traces(fig2.data)

fig.update_layout(title="My Map", 
                  width=1000, 
                  height=600, 
                  margin=dict(r=5, l=5))

fig.show()

I do believe that writing down my questions helped me finding the solution!
Choropleth was not the way to go. I did not know another way to plot polygons in plotly, until I found this page.

I guess there is still much room for improvement, I’m quite new to plotly, but eventually I have managed doing what I wanted using go.Scattermapbox.

import geopandas as gpd
import plotly.express as px
import plotly.graph_objects as go

# Read MultiPolygon shapefile to geodataframe
gdf = gpd.read_file(shp)

# Create lists of coordinates from geometry 
### Pretty sure there is a more elegant way for doing this # please leave alternatives in comments
lon_all=[]
lat_all=[]
for id, poly in gdf.iterrows():
    pol = list(poly['geometry'].exterior.coords)
    lon_pol = [x[0] for x in pol]
    lon_all = lon_all + ['None'] + lon_pol
    lat_pol = [y[1] for y in pol]
    lat_all = lat_all + ['None'] + lat_pol

# Density map with overlapped polygons
fig = px.density_mapbox(df, 
                        lat='lat', 
                        lon='lon', 
                        z='var',
                        radius=10,
                        center=center_map, 
                        zoom=15,
                        mapbox_style="carto-positron")

fig2 = go.Figure(go.Scattermapbox(
    mode="lines", 
    fill="none",
    lon=lon_all,
    lat=lat_all,
    hoverinfo='none',
    marker={'size': 10, 'color': "blue"}))

fig.add_traces(fig2.data)

fig.update_layout(title="My Map", 
                  width=1000, 
                  height=600, 
                  margin=dict(r=5, l=5))

fig.show()