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 (!feature.properties) {
                return
            }
            if (feature.properties.popup) {
                layer.bindPopup(feature.properties.popup,{autoClose:false,closeOnClick:true})
            }
            if (feature.properties.tooltip) {
                // here you can change all leaflet tooltip options
                layer.bindTooltip(feature.properties.tooltip, { 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?