@vinctus/react-maplibre 1.3.0 → 1.3.2

package/dist/Layer.js

@@ -39,14 +39,18 @@ export const Layer = ({ layer, source }) => {
     const { id } = layer;
     const { paint, layout } = layer, layerStructure = __rest(layer, ["paint", "layout"]);
     const { data } = source, sourceOptions = __rest(source, ["data"]);
+    const layerStructureString = JSON.stringify(layerStructure);
+    const paintString = JSON.stringify(paint !== null && paint !== void 0 ? paint : {});
+    const layoutString = JSON.stringify(layout !== null && layout !== void 0 ? layout : {});
+    const sourceOptionsString = JSON.stringify(sourceOptions);
+    const dataString = JSON.stringify(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),
+        layerStructureString,
+        paintString,
+        layoutString,
+        sourceOptionsString,
+        dataString,
     };
-    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);
@@ -76,7 +80,9 @@ export const Layer = ({ layer, source }) => {
     }, [id, layerStructureString, sourceOptionsString, map, mapLoaded]);
     useEffect(() => {
         const current = applied.current;
-        if (!map || !mapLoaded || !current) {
+        // A replaced map is removed before the context hands out the new one, so this effect can run
+        // once more against the removed map.
+        if (!map || !mapLoaded || !current || map._removed) {
             return;
         }
         // The source disappears when the map's style is replaced, so the source and layer are rebuilt

package/dist/Marker.js

@@ -51,8 +51,8 @@ export const Marker = ({ children, longitude, latitude, className, anchor, color
         }
     }, [marker, latitude, longitude]);
     useEffect(() => {
-        var _a;
-        if (!marker || !hasPopup) {
+        const initialHtml = popupHtmlRef.current;
+        if (!marker || initialHtml === undefined) {
             return;
         }
         const newPopup = new maplibre.Popup({
@@ -60,9 +60,9 @@ export const Marker = ({ children, longitude, latitude, className, anchor, color
             closeButton,
             closeOnClick,
             className: popupClassName,
-        }).setHTML((_a = popupHtmlRef.current) !== null && _a !== void 0 ? _a : '');
+        }).setHTML(initialHtml);
         popupInstance.current = newPopup;
-        appliedPopupHtml.current = popupHtmlRef.current;
+        appliedPopupHtml.current = initialHtml;
         // 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);

package/dist/Popup.js

@@ -11,7 +11,6 @@ export const Popup = ({ children, longitude, latitude, className, closeOnClick,
     // 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(() => {
         if (!map || !mapLoaded) {
@@ -23,7 +22,6 @@ export const Popup = ({ children, longitude, latitude, className, closeOnClick,
             .setHTML(initialHtml)
             .addTo(map);
         popupInstance.current = popup;
-        applied.current = { html: initialHtml, coordinates };
         return () => {
             try {
                 popup.remove();
@@ -32,26 +30,15 @@ export const Popup = ({ children, longitude, latitude, className, closeOnClick,
                 console.warn('Error cleaning up Popup');
             }
             popupInstance.current = null;
-            applied.current = null;
         };
     }, [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];
-        }
+        var _a;
+        (_a = popupInstance.current) === null || _a === void 0 ? void 0 : _a.setLngLat([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;
-        }
+        var _a;
+        (_a = popupInstance.current) === null || _a === void 0 ? void 0 : _a.setHTML(html);
     }, [html]);
     return null;
 };

package/package.json

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