import { createElementObject, createOverlayComponent } from '@react-leaflet/core'; import { Popup as LeafletPopup } from 'leaflet'; import { useEffect } from 'react'; export const Popup = createOverlayComponent(function createPopup(props, context) { const popup = new LeafletPopup(props, context.overlayContainer); return createElementObject(popup, context); }, function usePopupLifecycle(element, context, { position }, setOpen) { useEffect(function addPopup() { const { instance } = element; function onPopupOpen(event) { if (event.popup === instance) { instance.update(); setOpen(true); } } function onPopupClose(event) { if (event.popup === instance) { setOpen(false); } } context.map.on({ popupopen: onPopupOpen, popupclose: onPopupClose }); if (context.overlayContainer == null) { // Attach to a Map if (position != null) { instance.setLatLng(position); } instance.openOn(context.map); } else { // Attach to container component context.overlayContainer.bindPopup(instance); } return function removePopup() { context.map.off({ popupopen: onPopupOpen, popupclose: onPopupClose }); context.overlayContainer?.unbindPopup(); context.map.removeLayer(instance); }; }, [ element, context, setOpen, position ]); });