Hover on Scattermapbox Layers (GeoJSON)

@codefour wrote:

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)

Posts: 2

Participants: 1

Read full topic