Setting the z-order of plotly traces - scattermapbox over Choropleth

Dash Python
1

I am looking for a way to explicitly set the z-order of plotly traces. My draw order is scattermapbox and then choropleth overlay on top. However, I’d like scattermapbox to always be the top layer as there is a click event associated with each point. Choropleth only has hoverinfo.

Here’s my code from callback for reference:

datad.append({

       "type": "scattermapbox",
       "lat": df1['Lat'],
       "lon": df1['Long'],
       "name": "Location",
       "hovertext": propname,
       "showlegend": False,
       "hoverinfo": "text",
       "mode": "markers",
       "clickmode": "event+select",
       "customdata": df1.loc[:,cd_cols].values,
       "marker": {
                           "autocolorscale": False,
                           "showscale":True,
                           "symbol": "circle",
                           "size": 9,
                           "opacity": 0.8,
                           "color": df1['diff_potential'],
                          "colorscale": "Viridis",
                          "cmin":0,
                          "cmax":df1['diff_potential'].max(),
                          "colorbar":dict(
                                                     title= 'Upside',
                                                     orientation= 'v',
                                                     side= 'left',
                                                     showticklabels=True,
                                                     thickness= 20,
                                                     tickformatstops=dict(dtickrange=[0,10]),
                                                     titleside= 'top',
                                                     ticks= 'outside'
                          )
                       }
})

# Choroplethmapbox
if demo_dropdown:

   datad.append({

                               "type": "choroplethmapbox",
                               "geojson": geo_json,
                               "locations": df_geo_sub['tract'],
                               "z": s,
                              "featureidkey": "properties.tract",
                              "hovertext": df_geo_sub['name'],
                              "autocolorscale":False,
                              "colorscale":"Grays",
                             "colorbar":dict(
                                                        title = label,
                                                        orientation = 'h',
                                                        x= -0.15,
                                                        xanchor= "left",
                                                        y= 0,
                                                        yanchor= "bottom",
                                                        showticklabels=True,
                                                        thickness= 20,
                                                        tickformatstops=dict(dtickrange=[0,10]),
                                                        titleside= 'top',
                                                        ticks= 'outside'
                                                      ),
                          "zmin": s.min(),
                          "zmax": s.max(), 
                          "marker_line_width": 0,
                          "opacity": 0.2, 
                         "labels": label,
                         "title": "Choropleth"
})


layout = {

                 "autosize": True,
                 "datarevision": 0,
                "hovermode": "closest",
                "mapbox": {
                                    "accesstoken": MAPBOX_KEY,
                                    "bearing": 0,
                                    "center": {
                                                      "lat": coords[0],
                                                      "lon": coords[1]
                                    },

               "pitch": 0,
               "opacity": 0.2,
               "zoom": zoom,
               "style": "streets",

        },

       "margin": {
                          "r": 0,
                          "t": 0,
                          "l": 0,
                          "b": 0,
                          "pad": 0
        }

}

if demo_dropdown:

   return ({"data": datad, "layout": layout}, no_update)

else:

   return ({"data": datad, "layout": layout}, df.to_dict("records"))
2

Hi, I’m just curious but have you been able to overlay two choropleth’s on top of one another? I’m currently struggling to figure this out. They share the same data but have different z’s and hovertemplates. Any suggestions?

3

I have been able to overlay choropleth over scatter and vice-versa. Pretty sure, I can do the same with two choropleth’s.

For order, I rearranged my data list. The last element in the list is always on top.