How to stop the popup from disappearing when I pan to it or click on it?

[Sahib Bhai]

Heya, so I was wondering why this behavior differs from using dl.Popup and dl.MarkerClusterGroup. With that method, any marker's popup didn't disappear when I panned to it or clicked it. Now that I'm using dl.GeoJSON to generate markers, the popup immediately vanishes when I pan to it or click on it (if it's almost out of range), and I have to click it a second time for it to stay. It's a pretty bad UX for me. You can see it in action on my website. Try and click any marker that is at the edge of the map and watch the map pan to accommodate the popup, but the popup closes.

I have my whole code here: https://github.com/perfectly-preserved-pie/larentals/blob/master/pages/lease_page.py

But here in particular is where I'm generating the markers and popups (from a dataframe loaded as a pickle)

  markers = []
  # Iterate through the dataframe, create a marker for each row, and append it to the list
  for row in df_filtered.itertuples():
    markers.append(
      dict(
        lat=row.Latitude,
        lon=row.Longitude,
        popup=row.popup_html
        )
    )
  # Generate geojson with a marker for each listing
  geojson = dlx.dicts_to_geojson([{**m} for m in markers])

...

# Generate the map
  return dl.GeoJSON(
    id=str(uuid.uuid4()),
    data=geojson,
    cluster=True,
    zoomToBoundsOnClick=True,
    superClusterOptions={ # https://github.com/mapbox/supercluster#options
      'radius': 160,
      'minZoom': 3,
    }
  )

I saw an example using pure React Leaflet that has the exact behavior I want: https://codesandbox.io/embed/github/colbyfayock/egghead-code-examples/tree/master/add-data-to-map-geojson-react-leaflet?fontsize=14&hidenavigation=1&theme=dark

If you click on a marker (like if it's almost out of the view range) and the map pans to accommodate it, the popup stays. How can I mimic that with Dash Leaflet?

[Emil Haldrup Eriksen]

The behavior in dash-leaflet is the same - at least in the version 1.0.1 (I didn't test older versions). If you pan so that the Bermuda marker is at the edge in the component demo and click the marker, the map does exactly what you want,

https://www.dash-leaflet.com/components/vector_layers/geojson

EDIT: I just noticed that you enabled clustering. When you do that, the behavior may be different, as the clusters are re-calculated and redraw when the view port changes.

[Sahib Bhai]

EDIT: I just noticed that you enabled clustering. When you do that, the behavior may be different, as the clusters are re-calculated and redraw when the view port changes.

Yeah, clustering is the source of the problem, but I need to use it :(
I was sort of able to work around it by disabling the autoPan feature, but it's not ideal.

[Emil Haldrup Eriksen]

I have just created a release where I have changed the code to perform delta updates. Hence, markers than remain within the viewport will not be redrawn, and any popup should thus remain open on pan/zoom (as long as it stays within the viewport).

pip install dash-leaflet==1.0.5rc1

@perfectly-preserved-pie Could you test out if this change solves you issue?

[Sahib Bhai]

Yeah! Just tried the new RC and it solved the problem! I can autopan and move the map around without the popup closing.

Thank you so much!!