Dash leaflet scatterplot + dropdown

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.

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

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.