@vinctus/react-maplibre 0.2.24 → 0.2.26

package/dist/ErrorBoundary.js

@@ -13,9 +13,8 @@ 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,9 +3,8 @@ 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(JSON.parse(optionsString));
+        const control = new maplibre.GeolocateControl(options);
         if (map && position) {
             map.addControl(control, position);
         }
@@ -14,6 +13,6 @@ export const GeolocateControl = ({ position = 'bottom-right', options = { showUs
                 map.removeControl(control);
             }
         };
-    }, [position, optionsString, map]);
+    }, [position, options, map]);
     return null;
 };

package/dist/Layer.js

@@ -5,11 +5,9 @@ export const Layer = ({ layer, source }) => {
     const layerString = JSON.stringify(Object.assign({ source: layer.id }, layer));
     const sourceString = JSON.stringify(source);
     useEffect(() => {
-        let added = false;
         const parsedSource = JSON.parse(sourceString);
         const parsedLayer = JSON.parse(layerString);
         if (map && mapLoaded) {
-            added = true;
             map.addSource(parsedLayer.id, parsedSource); // when adding, the source must be added first, and then the layer
             map.addLayer(parsedLayer);
         }

package/dist/Map.js

@@ -44,50 +44,32 @@ 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;
-        }
+        if (map)
+            return; // initialize map only once
         if (mapContainer.current) {
-            const parsedOptions = JSON.parse(optionsString);
-            const m = new maplibre.Map(Object.assign({ container: mapContainer.current, style: mapStyle, center: [longitude, latitude], zoom }, parsedOptions));
+            const m = new maplibre.Map(Object.assign({ container: mapContainer.current, style: mapStyle, center: [longitude, latitude], zoom }, options));
             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 () => {
                 m.remove(); // This destroys the map and cleans up all layers/sources
                 mapInstanceRef.current = null;
-                setMap(null);
             };
         }
-    }, [
-        mapStyle,
-        longitude,
-        latitude,
-        zoom,
-        optionsString,
-        onDragEnd,
-        onLoad,
-        onMoveEnd,
-        onZoomEnd,
-    ]);
+    }, []); // Empty deps - only run once on mount
     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

@@ -21,16 +21,19 @@ export const Marker = (_a) => {
     const markerRef = useRef(null);
     const popupRef = useRef(null);
     const cleanupRef = useRef(null);
-    const optionsString = JSON.stringify(options || {});
+    const optionsString = JSON.stringify(options);
     useEffect(() => {
-        if (!map) {
+        if (!map)
             return;
-        }
         const element = document.createElement('div');
         const parsedOptions = JSON.parse(optionsString);
-        setResult(ReactDOM.createPortal(children, element));
+        if (children) {
+            setResult(ReactDOM.createPortal(children, element));
+        }
         // Create marker
-        const marker = new maplibre.Marker(Object.assign(Object.assign({}, parsedOptions), { element }));
+        const marker = children
+            ? new maplibre.Marker(Object.assign(Object.assign({}, parsedOptions), { element }))
+            : new maplibre.Marker(Object.assign({}, parsedOptions));
         marker.setLngLat([longitude, latitude]).addTo(map);
         markerRef.current = marker;
         // Handle popup manually if provided
@@ -84,6 +87,6 @@ export const Marker = (_a) => {
                 markerRef.current = null;
             }
         };
-    }, [map, optionsString, children, longitude, latitude, popup, closeOnClick, closeButton, popupClassName]);
+    }, [map, optionsString, children, longitude, latitude, popup, closeOnClick, closeButton]);
     return result;
 };

package/dist/NavigationControl.js

@@ -6,9 +6,8 @@ export const NavigationControl = ({ position = 'bottom-right', options = {
     showCompass: false,
 }, }) => {
     const { map } = useMap();
-    const optionsString = JSON.stringify(options || {});
     useEffect(() => {
-        const control = new maplibre.NavigationControl(JSON.parse(optionsString));
+        const control = new maplibre.NavigationControl(options);
         if (map && position) {
             map.addControl(control, position);
         }
@@ -17,6 +16,6 @@ export const NavigationControl = ({ position = 'bottom-right', options = {
                 map.removeControl(control);
             }
         };
-    }, [position, optionsString, map]);
+    }, [position, options, map]);
     return null;
 };

package/dist/Popup.js

@@ -16,7 +16,7 @@ import ReactDOMServer from 'react-dom/server'; // eslint-disable-line import/no-
 export const Popup = (_a) => {
     var { children, longitude, latitude } = _a, options = __rest(_a, ["children", "longitude", "latitude"]);
     const { map } = useMap();
-    const optionsString = JSON.stringify(options || {});
+    const optionsString = JSON.stringify(options);
     useEffect(() => {
         let popup = null;
         if (map) {
@@ -26,9 +26,8 @@ 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,11 +1,10 @@
 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(JSON.parse(optionsString));
+        const control = new maplibre.ScaleControl(options);
         if (map && position) {
             map.addControl(control, position);
         }
@@ -14,6 +13,6 @@ export const ScaleControl = ({ position = 'bottom-right', options }) => {
                 map.removeControl(control);
             }
         };
-    }, [position, optionsString, map]);
+    }, [position, options, map]);
     return null;
 };

package/package.json

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