[Solved] Show points above choropleth layer

Dash Python
2

In the end I managed to solve my problem, with the clues that my professor of the Data Science Master, Sebastian Perez, gave me. The truth is that I used an unorthodox method, but it has worked for me: I have edited a map in Mapbox Studio style editor.

I leave here the solution, in case someone needs to draw a map with these characteristics:

The “below” property of Plotly is taken directly from map.addlayer from Mapbox. This propertie allows you to define the id of the layer that you want to be immediately on top of your layer. So we just have to look in the style.json of our map what id has our set of points (trace)… But that is a little complicated, at least for me, when you are working on a jupyter notebook, as I am doing.

So I thought that if Mapbox has a default layer called “water”, maybe it had others in higher levels, that would work for any map, without having to find the id of our data set.

Well, when you edit a map in the Mapbox Studio style editor, all the layers that mapbox has by default appear in the column on the left. And there I found a series of layers referring to the names of the states: “state-label-lg”, “state-label-md” and “state-label-sm”. By referencing any of those layers in the “below” property, the choropleth layer will be displayed below our markers.

import dash
import dash_core_components as dcc
import dash_html_components as html

app = dash.Dash()

app.layout = html.Div([
    dcc.Graph(
        id = "mapbox",
        figure={
            "data": [
                dict(
                    type = "scattermapbox",
                    lat = ["40.394283311799995"],
                    lon = ["-3.69347283089"],
                    mode = "markers",
                    marker = dict(size = 14),
                    text = ["Miguel de Unamuno"]
                )
            ],
            "layout": dict(
                autosize = True,
                hovermode = "closest",
                margin = dict(l = 0, r = 0, t = 0, b = 0),
                mapbox = dict(
                    accesstoken = mapbox_access_token,
                    bearing = 0,
                    center = dict(lat = 40.395, lon = -3.69),
                    style = "light",
                    pitch = 0,
                    zoom = 14,
                    layers = [
                        dict(
                            type = "fill",
                            sourcetype = "geojson",
                            source = {'crs': {'properties': {'name': 'urn:ogc:def:crs:OGC:1.3:CRS84'},
                                              'type': 'name'},
                                      'features': [{'geometry': {'coordinates': [[[-3.691048, 40.401499],
                                                                                  [-3.704480, 40.398590],
                                                                                  [-3.697786, 40.385843],
                                                                                  [-3.684224, 40.40394668]]],
                                                                 'type': 'Polygon'},
                                                    'type': 'Feature'}],
                                      'type': 'FeatureCollection'},
                            color = "#eef5db",
                            opacity = 0.8,
                            below = "state-label-sm"
                        )
                    ]
                )
            )
        },
        style = {"height": "100%"}
    )
], style = {"border-style": "solid", "height": "98vh"})

app.run_server()