Black Lives Matter. Please consider donating to Black Girls Code today.

Show and Tell - Dash Leaflet

Thanks Emil, this is a great product
Can you please tell me how to get an array of coordinates between points using a polyline?
The array is needed to build a height map between points

Hi @Emil, thanks for the excellent package. I’m a python beginner creating a dash map and have benefited greatly from the insights here, the herokuapp docs and the github.

I’d like to set ‘autoClose’:‘false’ for my popups as they are dynamically generated, often overflow the map boundaries when opened and I find autoPan constantly closes the popups before they can be properly viewed. My popups are currently created in the same manner as to the final scatter example on the heroku-app docs i.e. with the code bit below - except I generate some dynamic html and assign it to the popup.

    for item in dicts:
        item["tooltip"] = "{:.1f}".format(item[color_prop])  # bind tooltip
        item["popup"] = item["city"]  # bind popup
    geojson = dlx.dicts_to_geojson(dicts, lon="lng")  # convert to geojson
    geobuf = dlx.geojson_to_geobuf(geojson)  # convert to geobuf
    return geobuf

However I can’t seem to construct popups as a dl.Popup object and thus set the autoClose property whilst passing it to the GeoJSON. I’ve tried setting the popup in a dash callback as detailed in issue #41 on the github. However this also creates unwanted popups on the clusters and means I need to use dangerouslySetHTML to properly render my html-based popups.
My preference is to continue passing the popup through the GeoJSON but I need to ensure that I can set autoClose to false. I’ve tried to pass a Javascript module to the GeoJSON by adapting nistran’s code in this post. My tweaks are reflected below but this code does nothing in my window. I have a similar point_to_layer module for my markers using the same syntax that works without incident so I’m not sure what I’m getting wrong here?

window.dash_props = Object.assign({}, window.dash_props, {
    module: {
        on_each_feature: function(feature, layer, context) {
            if (! {
            if ( {
            if ( {
                // here you can change all leaflet tooltip options
                layer.bindTooltip(, { opacity: 1.0 })

Alternatively, I see the GeoJSON’s hideout argument (as below) can be used to set OnEachFeature? Is it possible to set autoClose using this instead?

class GeoJSON(Component):
    """A GeoJSON component.
LayerGroup is a wrapper of LayerGroup in react-leaflet.
It takes similar properties to its react-leaflet counterpart.

Keyword arguments:
- hideout (dict; optional): Object intended for passing variables to functional properties, i.e. clusterToLayer, hoverStyle and (options) pointToLayer, style, filter, and onEachFeature functions.

Has anyone figured out if it is possible to change the style of feature (be it a point, polyline, or polygon) if it is clicked (i.e. selected). I love that the click-feature property is exposed in dash, but I’d like to change the color and/or size of a feature if was the last feature clicked.

I typically add two layers; one for the selected feature(s) and one for the other. And then I update the content of each layer from Dash. If you are using the GeoJSON component you could add a property to the features to keep track of which was the last clicked and render that one differently. You would then only need one layer, but i think the first approach will probably be simpler.

Thanks! When writing a callback to update the geojson component, where can I find a list of attributes dash can update? I know I can listen for click_feature, but could the callback output be the data property?