1 year ago

#202517

test-img

justAStudent

How to return multiple markers for dash leaflet map based on the current page rows in a datatable

So I've tried many iterations of returning a for loop for this code everything else appears to be working as intended. I'll try to just include relevant code snips. '''

dcc.Dropdown(
            id='select_page_size',
            options=[
                {'label': '5', 'value': 5},
                {'label': '10', 'value': 10},
                {'label': '15', 'value': 15},
                {'label': '20', 'value': 20},
            ],
            # Default value for results per page.
            value=10,
            style=dict(width='40%', verticalAlign="middle")
        )

dcc.RadioItems(
            id='filter-type',
            options=[
                {'label': 'Water Rescue', 'value': 'water_filter'},
                {'label': 'Mountain Rescue', 'value': 'mountain_filter'},
                {'label': 'Disaster Rescue', 'value': 'disaster_filter'},
                {'label': 'Reset', 'value': 'no_filter'},
            ],
            value='no_filter',
            labelStyle={'display': 'inline-block'}
        )


dt.DataTable(
        id='datatable-id',
        columns=[
            {"name": i, "id": i,  "deletable ": False,  "selectable ": True} for i in df.columns
        ],
        filter_action='native',
        sort_action='native',
        page_action='native',
        page_current=0,
        page_size=PAGE_SIZE,
        data=df.to_dict('records'),
    )


@app.callback(
    Output('map-id', 'children'),
    [Input('datatable-id', 'derived_viewport_data')]
)
# Function of geolocation chart callback
def update_map(viewData):
    dff = pd.DataFrame.from_dict(viewData)
    # Austin TX is at [30.75,-97.48]
    return [
        dl.Map(style={'width': '1000px', 'height': '500px'}, center=[30.75,-97.48], zoom=10, children=[
            dl.TileLayer(id="base-layer-id"),
            # Marker with tool tip and popup
            # for i in range page_size:
            # create marker at i position long,lang
            dl.Marker(position=[30.75,-97.48], children=[
                dl.Tooltip(dff.iloc[0,4]),
                dl.Popup([
                    html.H3("Animal Name"),
                    html.P(dff.iloc[0,8])
                ])
            ])
        ])
    ]

''' Ideally when the datatable is updated with either the page or a filter option attached to a radioItem I could have multiple markers on the map show a latitude and longitude iloc[i,14] iloc[i, 15]. I assumed the way I would do that is with for i in range page_size.

python

jupyter-notebook

plotly-dash

dash-leaflet

0 Answers

Your Answer

Accepted video resources