@vinctus/react-maplibre 0.2.17 → 0.2.19

package/dist/ErrorBoundary.js

@@ -13,8 +13,9 @@ export class ErrorBoundary extends Component {
         console.error('Uncaught map error:', error, errorInfo);
     }
     render() {
-        if (this.state.hasError)
+        if (this.state.hasError) {
             return this.props.fallback || _jsx("h1", { children: "Sorry.. there was a map error" });
+        }
         return this.props.children;
     }
 }

package/dist/GeolocateControl.js

@@ -3,16 +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 () => {
-            if (map && map.hasControl && map.hasControl(control)) {
+            if (map && map.hasControl(control)) {
                 map.removeControl(control);
             }
         };
-    }, [position, options, map]);
+    }, [position, optionsString, map]);
     return null;
 };

package/dist/Layer.js

@@ -14,24 +14,14 @@ export const Layer = ({ layer, source }) => {
             map.addLayer(parsedLayer);
         }
         return () => {
-            if (added && map) {
-                try {
-                    // 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
-                    }
+            if (map) {
+                // 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
                 }
-                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
+                // Check if source exists before removing
+                if (map.getSource(parsedLayer.id)) {
+                    map.removeSource(parsedLayer.id);
                 }
             }
         };

package/dist/Map.js

@@ -44,24 +44,31 @@ 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)
+        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)
+            if (onDragEnd) {
                 addEventHandler(m, 'dragend', onDragEnd);
-            if (onLoad)
+            }
+            if (onLoad) {
                 addEventHandler(m, 'load', (ev) => {
                     onLoad(ev);
                     setMapLoaded(true);
                 });
-            if (onMoveEnd)
+            }
+            if (onMoveEnd) {
                 addEventHandler(m, 'moveend', onMoveEnd);
-            if (onZoomEnd)
+            }
+            if (onZoomEnd) {
                 addEventHandler(m, 'zoomend', onZoomEnd);
+            }
             setMap(m);
             // Cleanup when component unmounts
             return () => {
@@ -69,7 +76,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,22 @@ 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)
+        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 +86,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,16 +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 () => {
-            if (map && map.hasControl && map.hasControl(control)) {
+            if (map && map.hasControl(control)) {
                 map.removeControl(control);
             }
         };
-    }, [position, options, map]);
+    }, [position, optionsString, map]);
     return null;
 };

package/dist/Popup.js

@@ -26,8 +26,9 @@ export const Popup = (_a) => {
                 .addTo(map);
         }
         return () => {
-            if (popup)
+            if (popup) {
                 popup.remove();
+            }
         };
     }, [children, latitude, longitude, map, optionsString]);
     return null;

package/dist/ScaleControl.js

@@ -1,18 +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 () => {
-            if (map && map.hasControl && map.hasControl(control)) {
+            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.17",
+  "version": "0.2.19",
   "description": "Minimalist MapLibre GL JS React wrapper library",
   "type": "module",
   "types": "dist/index.d.ts",