How to select markers drawn on a mapbox in Dash?

Dash Python
1

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

2

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
3

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

1 Like
4

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

1 Like
5

That was fast ! Thanks! :smile:

1 Like
6

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

7

can you use hoverData or clickData in that case?

1 Like
8

That’s a good start. Thanks again !

9

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

Screenshot from 2017-08-13 21-05-21
Screenshot from 2017-08-13 21-05-21.png1025×753 377 KB
: Screeshot from Padmapper.com. Cheers!

10

Feel free to open an issue in the official plotly.js charting library repo: GitHub - plotly/plotly.js: Open-source JavaScript charting library behind Plotly and Dash

11

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?

12

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

import dash_core_components as dcc
print(dcc.__version__)
13

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.

14

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

mapbox-lasso
mapbox-lasso.gif1347×686 2.69 MB 

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)
15

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
16

Hi,

The lasso and box works wonderfully.
But is it possible to just be able to click on a single marker?
I can’t find anything related to my issue.

Thanks in advance.