@vinctus/react-maplibre 0.2.7 → 0.2.10

package/dist/Layer.js

@@ -14,9 +14,21 @@ export const Layer = ({ layer, source }) => {
             map.addLayer(parsedLayer);
         }
         return () => {
-            if (added) {
-                map === null || map === void 0 ? void 0 : map.removeLayer(parsedLayer.id); // when removing, the layer must be removed first, and then the source
-                map === null || map === void 0 ? void 0 : map.removeSource(parsedLayer.id);
+            if (added && map && !map._removed) {
+                try {
+                    // Check if layer exists before removing
+                    if (map.getLayer(parsedLayer.id)) {
+                        map.removeLayer(parsedLayer.id); // when removing, the layer must be removed first, and then the source
+                    }
+                    // Check if source exists before removing
+                    if (map.getSource(parsedLayer.id)) {
+                        map.removeSource(parsedLayer.id);
+                    }
+                }
+                catch (error) {
+                    // Silently handle cleanup errors during navigation
+                    console.warn('Layer cleanup error:', error);
+                }
             }
         };
     }, [layerString, sourceString, map, mapLoaded]);

package/dist/Marker.d.ts

@@ -6,6 +6,7 @@ export type MarkerProps = {
     popup?: ReactElement;
     popupClassName?: string;
     closeOnClick?: boolean;
+    closeButton?: boolean;
     anchor?: PositionAnchor;
     color?: string;
     children?: ReactNode;

package/dist/Marker.js

@@ -9,35 +9,85 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { useEffect, useState, Children } from 'react';
+import { useEffect, useState, Children, useRef } from 'react';
 import maplibre from 'maplibre-gl';
 import { useMap } from './Map';
 import ReactDOM from 'react-dom';
-import ReactDOMServer from 'react-dom/server'; // eslint-disable-line import/no-webpack-loader-syntax
+import ReactDOMServer from 'react-dom/server';
 export const Marker = (_a) => {
-    var { children, longitude, latitude, popup, popupClassName, closeOnClick } = _a, options = __rest(_a, ["children", "longitude", "latitude", "popup", "popupClassName", "closeOnClick"]);
+    var { children, longitude, latitude, popup, popupClassName, closeOnClick = false, closeButton = true } = _a, options = __rest(_a, ["children", "longitude", "latitude", "popup", "popupClassName", "closeOnClick", "closeButton"]);
     const { map } = useMap();
     const [result, setResult] = useState(null);
+    const markerRef = useRef(null);
+    const popupRef = useRef(null);
+    const cleanupRef = useRef(null);
     const optionsString = JSON.stringify(options);
     useEffect(() => {
-        let marker = null;
+        if (!map)
+            return;
         const isEmpty = Children.count(children) === 0;
-        if (map) {
-            const element = document.createElement('div');
-            const parsedOptions = JSON.parse(optionsString);
-            if (!isEmpty)
-                setResult(ReactDOM.createPortal(children, element));
-            marker = isEmpty
-                ? new maplibre.Marker(Object.assign({}, parsedOptions))
-                : new maplibre.Marker(Object.assign(Object.assign({}, parsedOptions), { element }));
-            if (popup)
-                marker.setPopup(new maplibre.Popup({ offset: [0, -15], closeOnClick, className: popupClassName }).setHTML(ReactDOMServer.renderToStaticMarkup(popup)));
-            marker = marker.setLngLat([longitude, latitude]).addTo(map);
+        const element = document.createElement('div');
+        const parsedOptions = JSON.parse(optionsString);
+        if (!isEmpty) {
+            setResult(ReactDOM.createPortal(children, element));
+        }
+        // Create marker
+        const marker = isEmpty
+            ? new maplibre.Marker(Object.assign({}, parsedOptions))
+            : new maplibre.Marker(Object.assign(Object.assign({}, parsedOptions), { element }));
+        marker.setLngLat([longitude, latitude]).addTo(map);
+        markerRef.current = marker;
+        // Handle popup manually if provided
+        if (popup) {
+            const popupHTML = ReactDOMServer.renderToStaticMarkup(popup);
+            const handleMarkerClick = (e) => {
+                e.stopPropagation();
+                // Close existing popup if any
+                if (popupRef.current) {
+                    popupRef.current.remove();
+                    popupRef.current = null;
+                    return; // Toggle behavior - close if already open
+                }
+                // Create new popup directly on the map
+                const newPopup = new maplibre.Popup({
+                    offset: [0, -15],
+                    closeOnClick,
+                    closeButton,
+                    className: popupClassName,
+                })
+                    .setLngLat([longitude, latitude])
+                    .setHTML(popupHTML)
+                    .addTo(map);
+                popupRef.current = newPopup;
+                // Listen for popup close to clean up reference
+                newPopup.on('close', () => {
+                    popupRef.current = null;
+                });
+            };
+            // Add click listener to marker element
+            const markerElement = marker.getElement();
+            markerElement.style.cursor = 'pointer';
+            markerElement.addEventListener('click', handleMarkerClick);
+            // Cleanup function
+            const cleanup = () => {
+                markerElement.removeEventListener('click', handleMarkerClick);
+                if (popupRef.current) {
+                    popupRef.current.remove();
+                    popupRef.current = null;
+                }
+            };
+            cleanupRef.current = cleanup;
         }
         return () => {
-            if (marker)
-                marker.remove();
+            if (cleanupRef.current) {
+                cleanupRef.current();
+                cleanupRef.current = null;
+            }
+            if (markerRef.current) {
+                markerRef.current.remove();
+                markerRef.current = null;
+            }
         };
-    }, [closeOnClick, optionsString, setResult, children, latitude, longitude, map, popup]);
+    }, [map, optionsString, children, longitude, latitude, popup, closeOnClick, closeButton]);
     return result;
 };

package/dist/tsconfig.tsbuildinfo

@@ -0,0 +1 @@
+{"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.tsx","../src/types.tsx"],"version":"5.8.2"}

package/package.json

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