[Solved] Show points above choropleth layer

Dash Python
1

Hello,

I have the following map:

import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output

mapbox_access_token = 'pk.eyJ1IjoiZ2lsdHJhcG8iLCJhIjoiY2o4eWJyNzY4MXQ1ZDJ3b2JsZHZxb3N0ciJ9.MROnmydnXtfjqjIBtC-P5g'

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",
                            below = "mapbox",
                            opacity = 0.8
                        )
                    ]
                )
            )
        },
        style = {"height": "100%"}
    )
], style = {"border-style": "solid", "height": "98vh"})

app.run_server()

My question is if it is possible to show the point above the choropleth layer.

I’ve tried adding “below” to the choropleth layer, but then layer shows below the map, and I do not like it.

I have also tried to add the point inside “layers”, instead of including it within “data”, but that subtracts possibilities when instead of a point there are many (for example, when coloring the points according to some value).

Any ideas?

Thank you very much.

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()