@vinctus/react-maplibre 0.2.18 → 0.2.20

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,7 +3,7 @@ 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);
+    const optionsString = JSON.stringify(options || {});
     useEffect(() => {
         const control = new maplibre.GeolocateControl(JSON.parse(optionsString));
         if (map && position) {

package/dist/Layer.js

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

package/dist/Map.js

@@ -44,34 +44,49 @@ 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);
+    const optionsString = JSON.stringify(options || {});
     useImperativeHandle(ref, () => map, [map]);
     useEffect(() => {
-        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));
             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);
             };
         }
-    }, [map, mapStyle, longitude, latitude, zoom, optionsString, onDragEnd, onLoad, onMoveEnd, onZoomEnd, setMap, setMapLoaded]);
+    }, [
+        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

@@ -21,11 +21,12 @@ export const Marker = (_a) => {
     const markerRef = useRef(null);
     const popupRef = useRef(null);
     const cleanupRef = useRef(null);
-    const optionsString = JSON.stringify(options);
-    const popupString = JSON.stringify(popup);
+    const optionsString = JSON.stringify(options || {});
+    const popupString = JSON.stringify(popup || null);
     useEffect(() => {
-        if (!map)
+        if (!map) {
             return;
+        }
         const element = document.createElement('div');
         const parsedOptions = JSON.parse(optionsString);
         setResult(ReactDOM.createPortal(children, element));
@@ -34,8 +35,8 @@ export const Marker = (_a) => {
         marker.setLngLat([longitude, latitude]).addTo(map);
         markerRef.current = marker;
         // Handle popup manually if provided
-        if (popup) {
-            const parsedPopup = JSON.parse(popupString);
+        const parsedPopup = JSON.parse(popupString);
+        if (parsedPopup) {
             const popupHTML = ReactDOMServer.renderToStaticMarkup(parsedPopup);
             const handleMarkerClick = (e) => {
                 e.stopPropagation();

package/dist/NavigationControl.js

@@ -6,7 +6,7 @@ export const NavigationControl = ({ position = 'bottom-right', options = {
     showCompass: false,
 }, }) => {
     const { map } = useMap();
-    const optionsString = JSON.stringify(options);
+    const optionsString = JSON.stringify(options || {});
     useEffect(() => {
         const control = new maplibre.NavigationControl(JSON.parse(optionsString));
         if (map && position) {

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,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

@@ -3,7 +3,7 @@ import maplibre from 'maplibre-gl';
 import { useMap } from './Map';
 export const ScaleControl = ({ position = 'bottom-right', options }) => {
     const { map } = useMap();
-    const optionsString = JSON.stringify(options);
+    const optionsString = JSON.stringify(options || {});
     useEffect(() => {
         const control = new maplibre.ScaleControl(JSON.parse(optionsString));
         if (map && position) {

package/package.json

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