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!