@vinctus/react-maplibre 0.2.16 → 0.2.18

package/dist/GeolocateControl.js

@@ -3,19 +3,17 @@ import maplibre from 'maplibre-gl';
 import { useMap } from './Map';
 export const GeolocateControl = ({ position = 'bottom-right', options = { showUserLocation: false }, }) => {
     const { map } = useMap();
+    const optionsString = JSON.stringify(options);
     useEffect(() => {
-        const control = new maplibre.GeolocateControl(options);
+        const control = new maplibre.GeolocateControl(JSON.parse(optionsString));
         if (map && position) {
             map.addControl(control, position);
         }
         return () => {
-            try {
-                map === null || map === void 0 ? void 0 : map.removeControl(control);
-            }
-            catch (_a) {
-                // Map might be destroyed already, ignore cleanup errors
+            if (map && map.hasControl(control)) {
+                map.removeControl(control);
             }
         };
-    }, [position, options, map]);
+    }, [position, optionsString, map]);
     return null;
 };

package/dist/Layer.js

@@ -14,20 +14,15 @@ export const Layer = ({ layer, source }) => {
             map.addLayer(parsedLayer);
         }
         return () => {
-            if (added && map) {
-                try {
-                    // Try to remove layer and source, ignoring errors if map is destroyed
-                    map.removeLayer(parsedLayer.id);
+            if (map) {
+                // Check if layer exists before removing
+                if (map.getLayer && map.getLayer(parsedLayer.id)) {
+                    map.removeLayer(parsedLayer.id); // when removing, the layer must be removed first, and then the source
                 }
-                catch (_a) {
-                    // Layer might not exist or map might be destroyed
-                }
-                try {
+                // Check if source exists before removing
+                if (map.getSource && map.getSource(parsedLayer.id)) {
                     map.removeSource(parsedLayer.id);
                 }
-                catch (_b) {
-                    // Source might not exist or map might be destroyed
-                }
             }
         };
     }, [layerString, sourceString, map, mapLoaded]);

package/dist/Map.js

@@ -44,12 +44,14 @@ export const Map = React.forwardRef((_a, ref) => {
     const mapContainer = useRef(null);
     const mapInstanceRef = useRef(null);
     const { map, setMap, setMapLoaded } = useMap();
+    const optionsString = JSON.stringify(options);
     useImperativeHandle(ref, () => map, [map]);
     useEffect(() => {
         if (map)
             return; // initialize map only once
         if (mapContainer.current) {
-            const m = new maplibre.Map(Object.assign({ container: mapContainer.current, style: mapStyle, center: [longitude, latitude], zoom }, options));
+            const parsedOptions = JSON.parse(optionsString);
+            const m = new maplibre.Map(Object.assign({ container: mapContainer.current, style: mapStyle, center: [longitude, latitude], zoom }, parsedOptions));
             mapInstanceRef.current = m;
             if (onDragEnd)
                 addEventHandler(m, 'dragend', onDragEnd);
@@ -69,7 +71,7 @@ export const Map = React.forwardRef((_a, ref) => {
                 mapInstanceRef.current = null;
             };
         }
-    }, []); // Empty deps - only run once on mount
+    }, [map, mapStyle, longitude, latitude, zoom, optionsString, onDragEnd, onLoad, onMoveEnd, onZoomEnd, setMap, setMapLoaded]);
     const memoizedStyle = useMemo(() => (Object.assign({ position: 'relative', width: '100%', height: '100%' }, style)), [style]);
     return (_jsx(ErrorBoundary, { fallback: fallback, children: _jsx("div", { id: id, ref: mapContainer, style: memoizedStyle, children: children }) }));
 });

package/dist/Marker.js

@@ -9,7 +9,7 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { useEffect, useState, Children, useRef } from 'react';
+import { useEffect, useState, useRef } from 'react';
 import maplibre from 'maplibre-gl';
 import { useMap } from './Map';
 import ReactDOM from 'react-dom';
@@ -22,24 +22,21 @@ export const Marker = (_a) => {
     const popupRef = useRef(null);
     const cleanupRef = useRef(null);
     const optionsString = JSON.stringify(options);
+    const popupString = JSON.stringify(popup);
     useEffect(() => {
         if (!map)
             return;
-        const isEmpty = Children.count(children) === 0;
         const element = document.createElement('div');
         const parsedOptions = JSON.parse(optionsString);
-        if (!isEmpty) {
-            setResult(ReactDOM.createPortal(children, element));
-        }
+        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 }));
+        const marker = 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 parsedPopup = JSON.parse(popupString);
+            const popupHTML = ReactDOMServer.renderToStaticMarkup(parsedPopup);
             const handleMarkerClick = (e) => {
                 e.stopPropagation();
                 // Close existing popup if any
@@ -88,6 +85,6 @@ export const Marker = (_a) => {
                 markerRef.current = null;
             }
         };
-    }, [map, optionsString, children, longitude, latitude, popup, closeOnClick, closeButton]);
+    }, [map, optionsString, children, longitude, latitude, popupString, closeOnClick, closeButton, popupClassName]);
     return result;
 };

package/dist/NavigationControl.js

@@ -6,19 +6,17 @@ export const NavigationControl = ({ position = 'bottom-right', options = {
     showCompass: false,
 }, }) => {
     const { map } = useMap();
+    const optionsString = JSON.stringify(options);
     useEffect(() => {
-        const control = new maplibre.NavigationControl(options);
+        const control = new maplibre.NavigationControl(JSON.parse(optionsString));
         if (map && position) {
             map.addControl(control, position);
         }
         return () => {
-            try {
-                map === null || map === void 0 ? void 0 : map.removeControl(control);
-            }
-            catch (_a) {
-                // Map might be destroyed already, ignore cleanup errors
+            if (map && map.hasControl(control)) {
+                map.removeControl(control);
             }
         };
-    }, [position, options, map]);
+    }, [position, optionsString, map]);
     return null;
 };

package/dist/ScaleControl.js

@@ -1,21 +1,19 @@
 import { useEffect } from 'react';
 import maplibre from 'maplibre-gl';
 import { useMap } from './Map';
-export const ScaleControl = ({ position = 'bottom-right', options, }) => {
+export const ScaleControl = ({ position = 'bottom-right', options }) => {
     const { map } = useMap();
+    const optionsString = JSON.stringify(options);
     useEffect(() => {
-        const control = new maplibre.ScaleControl(options);
+        const control = new maplibre.ScaleControl(JSON.parse(optionsString));
         if (map && position) {
             map.addControl(control, position);
         }
         return () => {
-            try {
-                map === null || map === void 0 ? void 0 : map.removeControl(control);
-            }
-            catch (_a) {
-                // Map might be destroyed already, ignore cleanup errors
+            if (map && map.hasControl(control)) {
+                map.removeControl(control);
             }
         };
-    }, [position, options, map]);
+    }, [position, optionsString, map]);
     return null;
 };

package/package.json

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