1 year ago
#202517
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