@vinctus/react-maplibre 1.2.0 → 1.3.0

package/dist/Layer.js

@@ -1,31 +1,106 @@
-import { useContext, useEffect } from 'react';
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { useContext, useEffect, useRef } from 'react';
 import { MapContext } from './Map';
+const addSourceAndLayer = (map, id, strings) => {
+    const paint = JSON.parse(strings.paintString);
+    const layout = JSON.parse(strings.layoutString);
+    // The layer must be removed before its source, and the source added before its layer.
+    if (map.getLayer(id)) {
+        map.removeLayer(id);
+    }
+    if (map.getSource(id)) {
+        map.removeSource(id);
+    }
+    map.addSource(id, Object.assign(Object.assign({}, JSON.parse(strings.sourceOptionsString)), { data: JSON.parse(strings.dataString) }));
+    map.addLayer(Object.assign(Object.assign({ source: id }, JSON.parse(strings.layerStructureString)), { paint, layout }));
+    return { dataString: strings.dataString, paint, layout };
+};
+const updateProperties = (previous, next, setProperty) => {
+    const keys = new Set([...Object.keys(previous), ...Object.keys(next)]);
+    // A key missing from `next` is set to undefined, which resets it to the style default.
+    keys.forEach((key) => {
+        if (JSON.stringify(previous[key]) !== JSON.stringify(next[key])) {
+            setProperty(key, next[key]);
+        }
+    });
+};
 export const Layer = ({ layer, source }) => {
     const { map, mapLoaded } = useContext(MapContext);
-    const layerString = JSON.stringify(Object.assign({ source: layer.id }, layer));
-    const sourceString = JSON.stringify(source);
+    const { id } = layer;
+    const { paint, layout } = layer, layerStructure = __rest(layer, ["paint", "layout"]);
+    const { data } = source, sourceOptions = __rest(source, ["data"]);
+    const strings = {
+        layerStructureString: JSON.stringify(layerStructure),
+        paintString: JSON.stringify(paint !== null && paint !== void 0 ? paint : {}),
+        layoutString: JSON.stringify(layout !== null && layout !== void 0 ? layout : {}),
+        sourceOptionsString: JSON.stringify(sourceOptions),
+        dataString: JSON.stringify(data),
+    };
+    const { layerStructureString, paintString, layoutString, sourceOptionsString, dataString } = strings;
+    // Keeps the newest props available to the creation effect without making it depend on them, so
+    // that data, paint and layout changes update the existing source and layer in place.
+    const latest = useRef(strings);
+    const applied = useRef(null);
+    latest.current = strings;
     useEffect(() => {
-        const parsedSource = JSON.parse(sourceString);
-        const parsedLayer = JSON.parse(layerString);
-        if (map && mapLoaded) {
-            map.addSource(parsedLayer.id, parsedSource); // when adding, the source must be added first, and then the layer
-            map.addLayer(parsedLayer);
+        if (!map || !mapLoaded) {
+            return;
         }
+        applied.current = addSourceAndLayer(map, id, latest.current);
         return () => {
             try {
-                if (map && mapLoaded && !map._removed) {
-                    if (map.getLayer(parsedLayer.id)) {
-                        map.removeLayer(parsedLayer.id); // when removing, the layer must be removed first, and then the source
+                if (!map._removed) {
+                    if (map.getLayer(id)) {
+                        map.removeLayer(id);
                     }
-                    if (map.getSource(parsedLayer.id)) {
-                        map.removeSource(parsedLayer.id);
+                    if (map.getSource(id)) {
+                        map.removeSource(id);
                     }
                 }
             }
             catch (_a) {
                 console.warn('Error cleaning up Layer');
             }
+            applied.current = null;
         };
-    }, [layerString, sourceString, map, mapLoaded]);
+    }, [id, layerStructureString, sourceOptionsString, map, mapLoaded]);
+    useEffect(() => {
+        const current = applied.current;
+        if (!map || !mapLoaded || !current) {
+            return;
+        }
+        // The source disappears when the map's style is replaced, so the source and layer are rebuilt
+        // from the newest props.
+        if (!map.getSource(id)) {
+            try {
+                applied.current = addSourceAndLayer(map, id, latest.current);
+            }
+            catch (_a) {
+                console.warn('Error restoring Layer');
+            }
+            return;
+        }
+        if (current.dataString !== dataString) {
+            const geoJsonSource = map.getSource(id);
+            geoJsonSource.setData(JSON.parse(dataString));
+            current.dataString = dataString;
+        }
+        const nextPaint = JSON.parse(paintString);
+        const nextLayout = JSON.parse(layoutString);
+        updateProperties(current.paint, nextPaint, (key, value) => map.setPaintProperty(id, key, value));
+        updateProperties(current.layout, nextLayout, (key, value) => map.setLayoutProperty(id, key, value));
+        current.paint = nextPaint;
+        current.layout = nextLayout;
+    }, [id, dataString, paintString, layoutString, map, mapLoaded]);
     return null;
 };

package/dist/Marker.js

@@ -13,6 +13,14 @@ export const Marker = ({ children, longitude, latitude, className, anchor, color
     // them, so that a position change moves the existing marker instead of recreating it.
     const coordinates = useRef([longitude, latitude]);
     coordinates.current = [longitude, latitude];
+    // The popup is compared by its rendered markup because the `popup` element has a new identity on
+    // every parent render.
+    const popupHtml = popup ? ReactDOMServer.renderToStaticMarkup(popup) : undefined;
+    const hasPopup = popupHtml !== undefined;
+    const popupHtmlRef = useRef(popupHtml);
+    const popupInstance = useRef(null);
+    const appliedPopupHtml = useRef(undefined);
+    popupHtmlRef.current = popupHtml;
     useEffect(() => {
         if (!map || !mapLoaded) {
             return;
@@ -43,7 +51,8 @@ export const Marker = ({ children, longitude, latitude, className, anchor, color
         }
     }, [marker, latitude, longitude]);
     useEffect(() => {
-        if (!marker || !popup) {
+        var _a;
+        if (!marker || !hasPopup) {
             return;
         }
         const newPopup = new maplibre.Popup({
@@ -51,7 +60,9 @@ export const Marker = ({ children, longitude, latitude, className, anchor, color
             closeButton,
             closeOnClick,
             className: popupClassName,
-        }).setHTML(ReactDOMServer.renderToStaticMarkup(popup));
+        }).setHTML((_a = popupHtmlRef.current) !== null && _a !== void 0 ? _a : '');
+        popupInstance.current = newPopup;
+        appliedPopupHtml.current = popupHtmlRef.current;
         // 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);
@@ -63,7 +74,17 @@ export const Marker = ({ children, longitude, latitude, className, anchor, color
             catch (_a) {
                 console.warn('Error cleaning up Marker popup');
             }
+            popupInstance.current = null;
+            appliedPopupHtml.current = undefined;
         };
-    }, [marker, popup, popupClassName, closeButton, closeOnClick]);
+    }, [marker, hasPopup, popupClassName, closeButton, closeOnClick]);
+    // Updating the content in place keeps an open popup open across parent re-renders.
+    useEffect(() => {
+        const existingPopup = popupInstance.current;
+        if (existingPopup && popupHtml !== undefined && popupHtml !== appliedPopupHtml.current) {
+            existingPopup.setHTML(popupHtml);
+            appliedPopupHtml.current = popupHtml;
+        }
+    }, [popupHtml]);
     return createPortal(children, element);
 };

package/dist/Popup.js

@@ -1,27 +1,57 @@
-import { useEffect, useContext } from 'react';
+import { useEffect, useContext, useRef } from 'react';
 import maplibre from 'maplibre-gl';
 import ReactDOMServer from 'react-dom/server';
 import { MapContext } from './Map';
 export const Popup = ({ children, longitude, latitude, className, closeOnClick, closeButton, }) => {
     const { map, mapLoaded } = useContext(MapContext);
+    // The content is compared by its rendered markup because `children` has a new identity on every
+    // parent render.
+    const html = ReactDOMServer.renderToStaticMarkup(children);
+    // Keep the newest props available to the creation effect without making it depend on them, so
+    // that content and position changes update the existing popup instead of recreating it.
+    const latest = useRef({ html, coordinates: [longitude, latitude] });
+    const popupInstance = useRef(null);
+    const applied = useRef(null);
+    latest.current = { html, coordinates: [longitude, latitude] };
     useEffect(() => {
-        let popup = null;
-        if (map && mapLoaded) {
-            popup = new maplibre.Popup({ offset: [0, -15], className, closeOnClick, closeButton })
-                .setLngLat([longitude, latitude])
-                .setHTML(ReactDOMServer.renderToStaticMarkup(children))
-                .addTo(map);
+        if (!map || !mapLoaded) {
+            return;
         }
+        const { html: initialHtml, coordinates } = latest.current;
+        const popup = new maplibre.Popup({ offset: [0, -15], className, closeOnClick, closeButton })
+            .setLngLat(coordinates)
+            .setHTML(initialHtml)
+            .addTo(map);
+        popupInstance.current = popup;
+        applied.current = { html: initialHtml, coordinates };
         return () => {
             try {
-                if (popup) {
-                    popup.remove();
-                }
+                popup.remove();
             }
             catch (_a) {
                 console.warn('Error cleaning up Popup');
             }
+            popupInstance.current = null;
+            applied.current = null;
         };
-    }, [children, latitude, longitude, map, className, closeOnClick, closeButton, mapLoaded]);
+    }, [map, mapLoaded, className, closeOnClick, closeButton]);
+    useEffect(() => {
+        const popup = popupInstance.current;
+        const current = applied.current;
+        if (popup &&
+            current &&
+            (current.coordinates[0] !== longitude || current.coordinates[1] !== latitude)) {
+            popup.setLngLat([longitude, latitude]);
+            current.coordinates = [longitude, latitude];
+        }
+    }, [longitude, latitude]);
+    useEffect(() => {
+        const popup = popupInstance.current;
+        const current = applied.current;
+        if (popup && current && current.html !== html) {
+            popup.setHTML(html);
+            current.html = html;
+        }
+    }, [html]);
     return null;
 };

package/package.json

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

package/dist/tsconfig.tsbuildinfo

@@ -1 +0,0 @@
-{"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"}