@vinctus/react-maplibre 0.2.19 → 0.2.21

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/Map.js

@@ -44,12 +44,9 @@ 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));
@@ -74,9 +71,22 @@ export const Map = React.forwardRef((_a, ref) => {
             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,8 +21,7 @@ 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 || {});
     useEffect(() => {
         if (!map) {
             return;
@@ -36,8 +35,7 @@ export const Marker = (_a) => {
         markerRef.current = marker;
         // Handle popup manually if provided
         if (popup) {
-            const parsedPopup = JSON.parse(popupString);
-            const popupHTML = ReactDOMServer.renderToStaticMarkup(parsedPopup);
+            const popupHTML = ReactDOMServer.renderToStaticMarkup(popup);
             const handleMarkerClick = (e) => {
                 e.stopPropagation();
                 // Close existing popup if any
@@ -86,6 +84,6 @@ export const Marker = (_a) => {
                 markerRef.current = null;
             }
         };
-    }, [map, optionsString, children, longitude, latitude, popupString, closeOnClick, closeButton, popupClassName]);
+    }, [map, optionsString, children, longitude, latitude, popup, closeOnClick, closeButton, popupClassName]);
     return result;
 };

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) {

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.19",
+  "version": "0.2.21",
   "description": "Minimalist MapLibre GL JS React wrapper library",
   "type": "module",
   "types": "dist/index.d.ts",