Dash leaflet scatterplot + dropdown

Dash Python
1

I want to start using dash leaflet for a project of mine (I was using folium). I´m trying to create a scatterplot with a dropdown functionality. I was able to create the scatterplot and add the dropdown but it doesn`t work.

Here is my code:

import dash_leaflet as dl
import dash_leaflet.express as dlx
import pandas as pd
from dash_extensions.javascript import assign
from dash import Dash, html, dcc

colorscale = ["white", "yellow", "red"]
chroma = "https://cdnjs.cloudflare.com/ajax/libs/chroma-js/2.1.0/chroma.min.js"
color_prop = 'NumerodeTrans'
# Pre process the data into geobuf.
df = pd.read_csv("assets/ParadasAtributos.csv")
da = df[['Latitud', 'Longitud', 'ID', color_prop, "CODIGOCONTRATO"]]
# da =  df.groupby(["Longitud", "Latitud", "ID"]).sum("NumerodeTrans").reset_index()
da[color_prop ]= da[color_prop ].astype(int)
dicts = da.to_dict('rows')
dd_options = df["CODIGOCONTRATO"].unique()
dd_defaults = ["Atributo Nacional"]
for item in dicts:
    item["tooltip"] = "{} ({:.1f})".format(item[color_prop], item[color_prop])
geojson = dlx.dicts_to_geojson(dicts, lat= "Latitud", lon = "Longitud")
geobuf = dlx.geojson_to_geobuf(geojson)  # convert to geobuf


# Create a colorbar.
vmax = (df[color_prop].max())
colorbar = dl.Colorbar(colorscale=colorscale, width=20, height=150, min=0, max=vmax, unit="Transacciones por parada")
# Geojson rendering logic, must be JavaScript as it is executed in clientside.
point_to_layer = assign("""function(feature, latlng, context){
    const {min, max, colorscale, circleOptions, colorProp} = context.props.hideout;
    const csc = chroma.scale(colorscale).domain([min, max]);  // chroma lib to construct colorscale
    circleOptions.fillColor = csc(feature.properties[colorProp]);  // set color based on color prop.
    return L.circleMarker(latlng, circleOptions);  // sender a simple circle marker.
}""")
# Create geojson.
geojson = dl.GeoJSON(data=geobuf, id="geojson", format="geobuf",
                     zoomToBounds=True,  # when true, zooms to bounds when data changes
                     options=dict(pointToLayer=point_to_layer),  # how to draw points
                     superClusterOptions=dict(radius=50),   # adjust cluster size
                     hideout=dict(colorProp=color_prop, circleOptions=dict(fillOpacity=1, stroke=False, radius=5),
                                  min=0, max=vmax, colorscale=colorscale))
# Create the app.
app = Dash(external_scripts=[chroma], prevent_initial_callbacks=True)
app.layout = html.Div([
    dl.Map([dl.TileLayer(), geojson, colorbar], id = "graph"), dcc.Dropdown(id="x", value=dd_defaults, options=dd_options, clearable=False, multi=True)], style={'width': '100%', 'height': '50vh', 'margin': "auto", "display": "block", "position": "relative"})



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

Where “NumerodeTrans” is the prop that I want to show and “CODIGOCONTRATO” the prop that I want to use as a filter.

Here is a link to a sample of the data : ParadasAtributos.csv - Google Drive

I will really appreciate any help.

2

What part is not working, i.e what happens when you run the code? Du you get errors?

3

Hi Emil, thank you for your answer.

The code run without error, but the dropdown doesnt work, i.e, you can see and use the dropdown but it doesnt change the map displayed.