Empty ghost Popup when dynamically rendering popup in react-leaflet

Question

I'm dynamically rendering a marker popup in react-leaflet via a series of nested marker elements: DonutMarker, BoundsDriftMarker, and DriftMarker. The Popup is created in DonutMarker (GitHub) and passed to BoundsDriftMarker as a prop:

export default function DonutMarker(props: DonutMarkerProps) {
  ...
  return (
    <BoundsDriftMarker
      ...
      popup={
        <Popup>
          ...
          test
        </Popup>
      }
      showPopup={props.showPopup}
    />
  );
}

then from BoundsDriftMarker (GitHub) it's dynamically rendered as a child to DriftMarker:

export default function BoundsDriftMarker({position, bounds, icon, duration, popup, showPopup}: BoundsDriftMarkerProps) {
  ...
  return (<DriftMarker
    ...
  >
    ...
    {showPopup && popup}
  </DriftMarker>)
}

This is what it looks like currently when showPopup == true, along with the React browser plugin correctly showing the Popup element under the marker:

However, when I switch showPopup == false after this, I get an empty popup even though the browser plugin shows no popup:

Are the nested marker components causing this issue, or is there some other problem?

score 1 · Answer 1 · answered Jul 09 '21 at 08:23

try Seth Lutske answer in

react-leaflet: Clear marker cluster before rendering new markers

He wraps markers in MarkerClusterGroup, and change the key every time he need to refresh markers in map. Works for me too

  <MarkerClusterGroup
    key={uuidv4()}  
    spiderfyDistanceMultiplier={1}
    showCoverageOnHover={true}
>

Empty ghost Popup when dynamically rendering popup in react-leaflet

1 Answers1