Hello
I am rendering several geoJSON Layers on a scattermapbox. This works very nicely but I do not understand how I can add hover callbacks to the layer data?
I was using the example from dash/plotly but the callbacks do not fire on layer information. Could anybody point me to the right solution?
import json
import dash
import dash_core_components as dcc
import plotly.graph_objects as go
import dash_html_components as html
from dash.dependencies import Output, Input
geojson = { # One simple geoJSON Layer
"name": "Brunnen",
"type": "FeatureCollection",
"features": [
{"type": "Feature", "geometry": {"type": "Point", "coordinates": [8.59925529182776, 47.3697523961496]}, "properties": {"objectid": 1, "nummer": "510", "brunnenart_txt": "öffentlicher Brunnen", "historisches_baujahr": 1970, "wasserart_txt": "Verteilnetz", "bezeichnung": "Aussichtsturm"}},
{"type": "Feature", "geometry": {"type": "Point", "coordinates": [8.59081129509797, 47.3692926221594]}, "properties": {"objectid": 2, "nummer": "349", "brunnenart_txt": "öffentlicher Brunnen", "historisches_baujahr": 1933, "wasserart_txt": "Verteilnetz", "bezeichnung": 'null'}},
{"type": "Feature", "geometry": {"type": "Point", "coordinates": [8.57575392154602, 47.3661299392281]}, "properties": {"objectid": 3, "nummer": "365", "brunnenart_txt": "öffentlicher Brunnen", "historisches_baujahr": 1965, "wasserart_txt": "Quellwasser", "bezeichnung": "Biberlinterrasse"}},
{"type": "Feature", "geometry": {"type": "Point", "coordinates": [8.56484539017695, 47.3709930413284]}, "properties": {"objectid": 4, "nummer": "338", "brunnenart_txt": "öffentlicher Brunnen", "historisches_baujahr": 1910, "wasserart_txt": "Quellwasser", "bezeichnung": 'null'}},
{"type": "Feature", "geometry": {"type": "Point", "coordinates": [8.56439032475034, 47.3693267015147]}, "properties": {"objectid": 5, "nummer": "6069", "brunnenart_txt": "Notwasserbrunnen", "historisches_baujahr": 1988, "wasserart_txt": "Quellwasser", "bezeichnung": 'null'}},
{"type": "Feature", "geometry": {"type": "Point", "coordinates": [8.56011028157148, 47.3651974485507]}, "properties": {"objectid": 6, "nummer": "317", "brunnenart_txt": "öffentlicher Brunnen", "historisches_baujahr": 1903, "wasserart_txt": "Quellwasser", "bezeichnung": 'null'}}
]
}
figure = go.Figure(go.Scattermapbox(
lat=[47.3769],
lon=[8.5417],
mode='markers',
marker=go.scattermapbox.Marker(
size=14
),
))
figure.update_layout(
hovermode='closest',
mapbox=go.layout.Mapbox(
accesstoken='REPLACE_WITH_YOUR_TOKEN',
bearing=0,
center=go.layout.mapbox.Center(
lat=47.3769,
lon=8.5417
),
pitch=0,
zoom=9,
layers=[
{
'sourcetype': 'geojson',
'source': geojson,
'type': 'circle',
'color': 'rgba(30, 30, 30, 0.5)',
'circle': {
'radius': 4
},
},
]
)
)
external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']
app = dash.Dash(__name__, external_stylesheets=external_stylesheets)
styles = {
'pre': {
'border': 'thin lightgrey solid',
'overflowX': 'scroll'
}
}
app.layout = html.Div([
dcc.Graph(
id='basic-interactions',
figure=figure,
style=dict(height='600px')
),
html.Div(className='row', children=[
html.Div([
dcc.Markdown("""
**Hover Data**
Mouse over values in the graph.
"""),
html.Pre(id='hover-data', style=styles['pre'])
], className='three columns'),
html.Div([
dcc.Markdown("""
**Click Data**
Click on points in the graph.
"""),
html.Pre(id='click-data', style=styles['pre']),
], className='three columns'),
html.Div([
dcc.Markdown("""
**Selection Data**
Choose the lasso or rectangle tool in the graph's menu
bar and then select points in the graph.
Note that if `layout.clickmode = 'event+select'`, selection data also
accumulates (or un-accumulates) selected data if you hold down the shift
button while clicking.
"""),
html.Pre(id='selected-data', style=styles['pre']),
], className='three columns'),
html.Div([
dcc.Markdown("""
**Zoom and Relayout Data**
Click and drag on the graph to zoom or click on the zoom
buttons in the graph's menu bar.
Clicking on legend items will also fire
this event.
"""),
html.Pre(id='relayout-data', style=styles['pre']),
], className='three columns')
])
])
@app.callback(
Output('hover-data', 'children'),
[Input('basic-interactions', 'hoverData')])
def display_hover_data(hoverData):
return json.dumps(hoverData, indent=2)
@app.callback(
Output('click-data', 'children'),
[Input('basic-interactions', 'clickData')])
def display_click_data(clickData):
return json.dumps(clickData, indent=2)
@app.callback(
Output('selected-data', 'children'),
[Input('basic-interactions', 'selectedData')])
def display_selected_data(selectedData):
return json.dumps(selectedData, indent=2)
@app.callback(
Output('relayout-data', 'children'),
[Input('basic-interactions', 'relayoutData')])
def display_relayout_data(relayoutData):
return json.dumps(relayoutData, indent=2)
#
if __name__ == '__main__':
app.run_server(debug=True)