Black Lives Matter. Please consider donating to Black Girls Code today.

How to select markers drawn on a mapbox in Dash?

Hi,
Can I select manually some markers drawn on Mapbox ?
My goal is to compare the csv feature of each markers afterwards.
Thank you

Select isn’t available in scattermapbox yet, but it will be shortly. I’ll keep this thread posted when the new version is up!

1 Like

PR here: https://github.com/plotly/dash-core-components/pull/46

1 Like

I just published the new version. Install with pip install dash-core-components==0.10.0 :beers:

1 Like

That was fast ! Thanks! :smile:

1 Like

Do you think it’s possible to perform selection marker by marker ? (No bounding box or lasso)

can you use hoverData or clickData in that case?

1 Like

That’s a good start. Thanks again !

I think it would be wonderful if the lasso selection could be as aesthetic as below

: Screeshot from Padmapper.com. Cheers!

Feel free to open an issue in the official plotly.js charting library repo: https://github.com/plotly/plotly.js/

I’m having trouble with lasso on scattermapbox. I used the code from the Plotly user guide on Cross Filtering and the lasso selection works on the example dataset in a simple chart. However, when I try to apply the code to my scattermapbox with markers, only the hover and click selection work. @deejep were there any tricks you had to use to get lasso selection to work?

@tgils24 - which version of dash-core-components are you on?

import dash_core_components as dcc
print(dcc.__version__)

Originally, I was using dash-core-components==0.12.5 as recommended by the installation section of the tutorial. I then uninstalled that version and installed dash-core-components==0.10.0. When I run print(ddc.version) it returns 0.10.0.

@tgils24 - Here is an example that works for me:

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

import json
import pandas as pd
df = pd.read_csv(
    'https://raw.githubusercontent.com/plotly' +
    '/datasets/master/2011_february_us_airport_traffic.csv')

app = dash.Dash()

app.layout = html.Div([
    html.Div(
        html.Pre(id='lasso', style={'overflowY': 'scroll', 'height': '100vh'}),
        className="three columns"
    ),

    html.Div(
        className="nine columns",
        children=dcc.Graph(
            id='graph',
            figure={
                'data': [{
                    'lat': df.lat, 'lon': df.long, 'type': 'scattermapbox'
                }],
                'layout': {
                    'mapbox': {
                        'accesstoken': (
                            'pk.eyJ1IjoiY2hyaWRkeXAiLCJhIjoiY2ozcGI1MTZ3M' +
                            'DBpcTJ3cXR4b3owdDQwaCJ9.8jpMunbKjdq1anXwU5gxIw'
                        )
                    },
                    'margin': {
                        'l': 0, 'r': 0, 'b': 0, 't': 0
                    },
                }
            }
        )
    )
], className="row")


app.css.append_css({
    'external_url': 'https://codepen.io/chriddyp/pen/bWLwgP.css'
})


@app.callback(
    Output('lasso', 'children'),
    [Input('graph', 'selectedData')])
def display_data(selectedData):
    return json.dumps(selectedData, indent=2)


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

Thanks for your help! The problem was that I had some nan lat/lon values from the geocoder. Once I took those out it worked perfectly.

1 Like