@vinctus/react-maplibre 1.0.2 → 1.1.0

package/dist/Marker.js

@@ -1,69 +1,63 @@
-import { useEffect, useState, useContext } from 'react';
+import { useEffect, useMemo, useRef, useState, useContext, } from 'react';
 import maplibre from 'maplibre-gl';
-import ReactDOM from 'react-dom';
+import { createPortal } from 'react-dom';
 import ReactDOMServer from 'react-dom/server';
 import { MapContext } from './Map';
 export const Marker = ({ children, longitude, latitude, className, anchor, color, popup, popupClassName, closeOnClick = false, closeButton = false, }) => {
     const { map, mapLoaded } = useContext(MapContext);
-    const [result, setResult] = useState(null);
+    const [marker, setMarker] = useState(null);
+    // The DOM element the `children` are rendered into. It is created once and reused for the
+    // lifetime of the component so that the marker's content is never torn down and rebuilt.
+    const element = useMemo(() => document.createElement('div'), []);
+    // Keeps the newest coordinates available to the creation effect without making it depend on
+    // them, so that a position change moves the existing marker instead of recreating it.
+    const coordinates = useRef([longitude, latitude]);
+    coordinates.current = [longitude, latitude];
     useEffect(() => {
-        let marker;
-        let newPopup;
-        let handleMarkerClick;
-        if (map && mapLoaded) {
-            // We create the DOM element that we will attach to the marker, and then
-            // render the `children` props into the DOM element.
-            const element = document.createElement('div');
-            setResult(ReactDOM.createPortal(children, element));
-            marker = new maplibre.Marker({ anchor, className, color, element })
-                .setLngLat([longitude, latitude])
-                .addTo(map);
-            if (popup) {
-                const popupHTML = ReactDOMServer.renderToStaticMarkup(popup);
-                handleMarkerClick = (e) => {
-                    e.stopPropagation();
-                    newPopup = new maplibre.Popup({
-                        offset: [0, -15],
-                        closeButton,
-                        closeOnClick,
-                        className: popupClassName,
-                    })
-                        .setLngLat([longitude, latitude])
-                        .setHTML(popupHTML)
-                        .addTo(map);
-                };
-                marker.getElement().addEventListener('click', handleMarkerClick);
-            }
+        if (!map || !mapLoaded) {
+            return;
         }
+        const newMarker = new maplibre.Marker({ anchor, className, color, element })
+            .setLngLat(coordinates.current)
+            .addTo(map);
+        setMarker(newMarker);
         return () => {
             try {
-                if (marker) {
-                    marker.remove();
-                }
-                if (newPopup) {
-                    newPopup.remove();
-                }
-                if (marker && handleMarkerClick) {
-                    marker.getElement().removeEventListener('click', handleMarkerClick);
-                }
+                newMarker.remove();
             }
             catch (_a) {
                 console.warn('Error cleaning up Marker');
             }
+            setMarker(null);
+        };
+    }, [anchor, className, color, element, map, mapLoaded]);
+    useEffect(() => {
+        if (marker) {
+            marker.setLngLat([longitude, latitude]);
+        }
+    }, [marker, latitude, longitude]);
+    useEffect(() => {
+        if (!marker || !popup) {
+            return;
+        }
+        const newPopup = new maplibre.Popup({
+            offset: [0, -15],
+            closeButton,
+            closeOnClick,
+            className: popupClassName,
+        }).setHTML(ReactDOMServer.renderToStaticMarkup(popup));
+        // Attaching the popup to the marker lets MapLibre toggle it on click and keep it anchored to
+        // the marker as the marker moves.
+        marker.setPopup(newPopup);
+        return () => {
+            try {
+                newPopup.remove();
+                marker.setPopup(undefined);
+            }
+            catch (_a) {
+                console.warn('Error cleaning up Marker popup');
+            }
         };
-    }, [
-        anchor,
-        className,
-        children,
-        color,
-        latitude,
-        longitude,
-        map,
-        popup,
-        popupClassName,
-        closeOnClick,
-        closeButton,
-        mapLoaded,
-    ]);
-    return result;
+    }, [marker, popup, popupClassName, closeButton, closeOnClick]);
+    return createPortal(children, element);
 };

package/dist/tsconfig.tsbuildinfo

@@ -1 +1 @@
-{"root":["../src/ErrorBoundary.tsx","../src/GeolocateControl.tsx","../src/Layer.tsx","../src/Map.tsx","../src/Marker.tsx","../src/Popup.tsx","../src/ScaleControl.tsx","../src/index.tsx","../src/types.tsx"],"version":"5.7.2"}
+{"root":["../src/errorboundary.tsx","../src/geolocatecontrol.tsx","../src/layer.tsx","../src/map.tsx","../src/marker.tsx","../src/navigationcontrol.tsx","../src/popup.tsx","../src/scalecontrol.tsx","../src/index.ts"],"version":"5.8.2"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vinctus/react-maplibre",
-  "version": "1.0.2",
+  "version": "1.1.0",
   "description": "Minimalist MapLibre GL JS React wrapper library",
   "type": "module",
   "types": "dist/index.d.ts",

package/dist/types.d.ts

@@ -1 +0,0 @@
-export type ControlPosition = 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left';

package/dist/types.js

@@ -1 +0,0 @@
-export {};