I want to update the map when I change the sidebar.
It looks like this in Dash. On the right plot this dot represents the count value of hovered data. You can see that map only visualy doesn’t get updated.
I have shown the map that is being created in the callback in Jupyter, and it is being updated properly.
import pandas as pd
import geopandas as gpd
import plotly.graph_objects as go
import math
This is the snipset of my code:
def create_scatter_map(index):
date = df[“day”][index]
df_count = df.loc[df[“day”] == date]
df[“count”] = df[“count”].astype(int)
new_list = [count for count in df_count[“count”]]
print(new_list)
df_tiles[“count”] = new_list
new_list1 = [0 for count in df_count[“count”]]
df_tiles[“color”] = new_list1
print(df_tiles[“count”].min())
scatter_mapbox = go.Scattermapbox(
lat=df_tiles[‘n’],
lon=df_tiles[‘e’],
mode=‘markers’,
marker=go.scattermapbox.Marker(
size=df_tiles[‘count’],
color=df_tiles[‘count’],
sizemode=‘diameter’,
sizemin=4,
sizeref=10, # Update this according to your specific requirement
colorscale=‘Viridis’,
cmin=df_tiles[‘count’].min(), # set color scale minimum to minimum count
cmax=df_tiles[‘count’].max(),
showscale=True,
),
text=new_list,
showlegend=True,hoverinfo='text', cluster = {"enabled": True, "color":'yellow', "size" : 14} ) scatter_mapbox.customdata = df_tiles['tile'] # Create a choropleth_mapbox trace for the polygon data (geojson) gdf["dummy"] = 10 choropleth_mapbox = go.Choroplethmapbox( geojson=gdf.geometry.__geo_interface__, locations=gdf.index, z=gdf["dummy"], colorscale=[[0, 'rgba(255, 0, 0, 0.1)'], [1, 'rgba(255, 0, 0, 1)']], marker_line_width=10, marker_line_color = "red", marker_opacity=0.1, showscale=False, hoverinfo='skip', ) ) # Combine the scatter_mapbox and choropleth_mapbox into one figure fig = go.Figure(data=[choropleth_mapbox, scatter_mapbox]) # Calculate the bounding box of the GeoJSON bbox = gdf.geometry.total_bounds # Calculate the center of the bounding box center_lat = (bbox[1] + bbox[3]) / 2 center_lon = (bbox[0] + bbox[2]) / 2 # Calculate the zoom level based on the bounding box zoom = round(math.log(360 / max(bbox[2] - bbox[0], bbox[3] - bbox[1]), 2)) # Update the mapbox style, zoom, and center fig.update_layout( mapbox_style="carto-positron", mapbox=dict( zoom=zoom, center=dict(lat=center_lat, lon=center_lon), ), autosize=False, margin={"r":0,"t":0,"l":0,"b":0}, width=800, height=800 ) return fig
dash = Dash(name)
data = {“1”: “Mon”, “2”: “Tue”, “3”: “Wed”, “4”: “Thu”, “5”: “Fri”, “6”: “Sat”, “7”: “Sun”, “8” : “All”}dash.layout = html.Div([
html.H1(“Interactive Map”),
html.Div([
dcc.Graph(id=“scatter_map”, hoverData={‘points’: [{‘customdata’: df_tiles[‘tile’][0]}]}),
dcc.Graph(id=“grafic”),
], style={‘display’: ‘flex’}),
# Create slider with values from 0 to 5
dmc.SegmentedControl(
id=“days”,
value=“1”,
data= [{“label”: l, “value”: k} for k, l in data.items()],mt=10, ), dcc.Store(id = 'tile_id')
], style={‘display’: ‘flex’, ‘flex-direction’: ‘column’})
@dash.callback(
Output(“scatter_map”, “figure”),
Input(“days”, “value”))
def update_map(value):
#update the map with the new value
index = int(value)
fig = create_scatter_map(index)
fig.show()
return fig@dash.callback(
Output(“tile_id”, “data”),
Input(“scatter_map”, “hoverData”))
def update_grafic(hoverData):
if hoverData is None or ‘points’ not in hoverData or not hoverData[‘points’]:
print(“Unexpected hoverData:”, hoverData)
return None
a = hoverData[‘points’][0][‘customdata’]
time.sleep(0.1)
print(a)
return a@dash.callback(
Output(“grafic”, “figure”),
Input(“tile_id”, “data”))
def update_grafic(value):
#update the grafic with the new valuefig = create_grafic(value) return fig
dash.run_server( debug=True)
(This one just have day selection insteed of slider, but whatever)
It works well with px.scatter_mapbox but I am using only go for consistency purposes. Do you know what could be the problem?