Interactivity of choropleth mapbox not working with dropdown buttons

@pradel wrote:

Hi. I have made an app with a header and a dropdown button. Below the header there is a div with a choropleth mapbox inside.

The first problem was that the choropleth mapbox div and the choropleth mapbox were covering the dropdown buttons. Then in the css stylesheet I fixed the z-index of the svg-container (of the map) to -1. So now the dropdown buttons show without problem, but the map doesn’t have interactivity anymore (like zoom, drag, hover, etc.)

I had tried to establish several z-index on the css stylesheet, placing the one for the map lower than the one of the dropdown button, but it hasn’t work.

I don’t know what else to try. Am I missing something?

Here is my code. I made a reproducible example (using the one in the plotly documentation).

Python code

import json
import dash
import pandas as pd
import plotly.graph_objects as go
import dash_html_components as html
import dash_core_components as dcc

from urllib.request import urlopen

app = dash.Dash(__name__)

with urlopen('https://raw.githubusercontent.com/plotly/datasets/master/geojson-counties-fips.json') as response:
    counties = json.load(response)

df = pd.read_csv("https://raw.githubusercontent.com/plotly/datasets/master/fips-unemp-16.csv", dtype={"fips": str})

# MAP
trace = go.Choroplethmapbox(geojson=counties,
                            locations=df.fips,
                            z=df.unemp,
                            colorscale='Viridis',
                            zmin=0,
                            zmax=12,
                            marker_opacity=0.5,
                            marker_line_width=0)

layout = go.Layout(mapbox_style='carto-positron',
                   mapbox_zoom=3,
                   mapbox_center={"lat": 37.0902, "lon": -95.7129},
                   margin={"r": 0, "t": 0, "l": 0, "b": 0})

figure = go.Figure(data=trace, layout=layout)


app.layout = html.Div([html.Header([html.Div([html.Button([html.Div(className='bar1'),
                                                           html.Div(className='bar2'),
                                                           html.Div(className='bar3')],
                                                          id='myBtn', className='dropbtn'),
                                              html.Div([html.Button(html.Span('Pronóstico'), id='pronostico_button',
                                                                    n_clicks_timestamp=0, className='button'),
                                                        html.Button(html.Span('Concentraciones'),
                                                                    id='concentracion_button', n_clicks_timestamp=0,
                                                                    className='button'),
                                                        html.Button(html.Span('Documentación'),
                                                                    id='documentacion_button', n_clicks_timestamp=0,
                                                                    className='button')], id='myDropdown',
                                                       className='dropdown-content')], className='dropdown')]),
                       html.Div(dcc.Graph(id='map', figure=figure, className='map'), className='map-container')])


if __name__ == '__main__':
    app.run_server(debug=True)

css stylesheet

.contenedor-buttons {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 0px;
    padding-top: 0px;
    top: 0px;
}

.button {
    display: flex;
    font-size: 16px;
    font-family: "Avenir LT Std 55 Roman";
    text-align: center;
    border: 1px solid #f9f9f9;
    align-items: center;
    justify-content: center;
    background-color: #f9f9f9;
    color: black;
    cursor: pointer;
    margin: 5px;
    opacity: 1.0;
    padding: 6px 4px 4px 4px;
}

.button:hover,
.button:active,
.button:target,
.button:focus {background-color: #ccffff;}



.bar1, .bar2, .bar3 {
    width: 25px;
    height: 3px;
    background-color: grey;
    margin: 3px 0;
}

.dropbtn {
    background-color: white;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
}

.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

.dropdown-content a:hover {background-color: #f1f1f1}

.dropdown:hover .dropdown-content {display: block;}

.dropdown:hover .dropbtn {background-color: #ccffff;}

header {
    position: sticky;
    display: flex;
    height: 50px;
    margin-top: 0px;
    background-color: white;
    align-items: flex-end;
    justify-content: space-between;
    flex-direction: row;
}

header .container {
    display: inline-block;
    cursor: pointer;
    padding-left: 5px;
    padding-bottom: 7px;
}

header .titulo-app {
    position: sticky;
    height: 50px;
    padding-bottom: 17px;
    padding-left: 10px;
    float: left;
}

header .logo {
    position: sticky;
    height: 50px;
    margin-top 10px;
    padding-right: 10px;
    float: right;
}

.titulo-app {
    position: relative;
    margin-top: 5px;
}

.map-container {
    z-index: -1;
}

.map {
    z-index: -1;
}

.svg-container {
    z-index: -1
}

Thanks in advance!

Posts: 3

Participants: 2

Read full topic