Dash-leaflet using onEachFeature method of GeoJSON to apply bindPopup on point features malfunction

Dash Python
1

Steps to reproduce:

  1. Define a function like below
tooltip = assign("""function(feature, layer, context){
    layer.bindPopup(`<b>ID:</b> ${feature.properties.id}<br>`
                      )
}""")
  1. Add a geobuf or geojson point layer like below
dl.GeoJSON(url=geojson, format="geobuf", id="whatever",
                    pointToLayer=style_function,
                    filter=filterfunction,
                    hideout=hideout_options,
                    onEachFeature=tooltip
        )
  1. When click on a point feature on the layer, supposedly a popup will appear. However, in my case the popup seems to be appearing for a few milliseconds once clicked and then just disappear

Other things that I have noticed:

  • The method here works fine on a line layer

  • The method here, if using bindTooltip instead of bindPopup, will work on a computer (if hover over the point, the info appear). However, if on iPhone, click on the point the info appears for milliseconds and disappear as well

Has anyone encountered similar issue here? Any workaround or suggestion? Thanks!

2

Not the exact same, but I have something like this setup in my application but the code is based on a custom marker icon and an image pop up but what I’m using in this situation looks like:

point_to_layer_js = assign(
    """
function(feature, latlng){
    const iconData = feature.properties.icon_data;
    const flag = L.icon({
        iconUrl: iconData.url, 
        iconSize: [35, 35],
        tooltipAnchor: [20, 0]
    });
    const marker = L.marker(latlng, {icon: flag});
    marker.bindTooltip('<img src="' + feature.properties.image + '" style="width: 30vw; height: 20vh; max-width: 250px; max-height: 250px;">');
    marker.on('click', function(e) {
        var event = new CustomEvent('marker_click', {detail: feature.properties.pk});
        window.dispatchEvent(event);
    });
    return marker;
}
"""
)
1 Like
3

Thank you! Your example is so inspirational to me that I realize that I can also add tooltip or customize event handler in the styling function!

4

Still a work in progress but you can check out https://dash.geomapindex.com to get an idea of how I built it out. You can also extend this type of customized styling and event handler to clusters as well.

also you can create custom cursors with something like:

.leaflet-draw-draw-marker{
    cursor: url('https://cdn.custom-cursor.com/db/9914/32/minimal-geolocation-cursor.png'), auto !important;
}

.leaflet-pointer-target {
    cursor: url('https://cdn.custom-cursor.com/db/cursor/32/Disney_Hand_cursor.png'), pointer !important;
}

.leaflet-drag-target {
    cursor: url('https://cdn.custom-cursor.com/db/pointer/32/Disney_Hand_Pointer.png'), grabbing !important;
}

.leaflet-marker-icon {
    cursor: url('https://cdn.custom-cursor.com/db/9914/32/minimal-geolocation-cursor.png'), pointer !important;
}

.leaflet-marker-icon {
    transition: all 0.3s ease;
}

I used:
https://custom-cursor.com/ to find some nice mouse cursers to match the style I was going for the map

1 Like
5

Hi there I am working on something similar and want to call an API on opening a markers tooltip to retrieve an image and embed into the tooltip, is this possible?

6

Its possible, I’ve used django + rest api and django + ninja api in two separate applications that I’ve worked on that has been working well for me. I’d also recommend django-filer - Home - django-filer 3.2.3 documentation if you go down that route. When fully built out this setup will give you an api to hit for uploading pictures via a POST endpoint and an admin portal for manually creating models if you didn’t wan’t to build out the api post endpoints. You could launch them as separate applications that work in parallel or you could use django-plotly-dash — django-plotly-dash documentation to make one supper application.

1 Like