@vinctus/react-maplibre 0.2.3 → 0.2.6

package/dist/GeolocateControl.d.ts

@@ -1,7 +1,8 @@
 import { FC } from 'react';
+import { GeolocateControlOptions } from 'maplibre-gl';
 import { ControlPosition } from './types';
 export type GeolocateControlProps = {
     position?: ControlPosition;
-    showUserLocation?: boolean;
+    options?: GeolocateControlOptions;
 };
 export declare const GeolocateControl: FC<GeolocateControlProps>;

package/dist/GeolocateControl.js

@@ -1,29 +1,16 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 import { useEffect } from 'react';
 import maplibre from 'maplibre-gl';
 import { useMap } from './Map';
-export const GeolocateControl = (_a) => {
-    var { position = 'top-right' } = _a, options = __rest(_a, ["position"]);
+export const GeolocateControl = ({ position = 'bottom-right', options = { showUserLocation: false }, }) => {
     const { map } = useMap();
-    const optionsString = JSON.stringify(options);
     useEffect(() => {
-        const control = new maplibre.GeolocateControl(Object.assign({}, JSON.parse(optionsString)));
-        if (map) {
+        const control = new maplibre.GeolocateControl(options);
+        if (map && position) {
             map.addControl(control, position);
         }
         return () => {
             map === null || map === void 0 ? void 0 : map.removeControl(control);
         };
-    }, [position, optionsString, map]);
+    }, [position, options, map]);
     return null;
 };

package/dist/Marker.d.ts

@@ -5,6 +5,7 @@ export type MarkerProps = {
     latitude: number;
     popup?: ReactElement;
     closeOnClick?: boolean;
+    closeButton?: boolean;
     anchor?: PositionAnchor;
     color?: string;
     children?: ReactNode;

package/dist/Marker.js

@@ -9,35 +9,84 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { useEffect, useState, Children } from 'react';
+import { useEffect, useState, Children, useRef } from 'react';
 import maplibre from 'maplibre-gl';
 import { useMap } from './Map';
 import ReactDOM from 'react-dom';
-import ReactDOMServer from 'react-dom/server'; // eslint-disable-line import/no-webpack-loader-syntax
+import ReactDOMServer from 'react-dom/server';
 export const Marker = (_a) => {
-    var { children, longitude, latitude, popup, closeOnClick } = _a, options = __rest(_a, ["children", "longitude", "latitude", "popup", "closeOnClick"]);
+    var { children, longitude, latitude, popup, closeOnClick = false, closeButton = true } = _a, options = __rest(_a, ["children", "longitude", "latitude", "popup", "closeOnClick", "closeButton"]);
     const { map } = useMap();
     const [result, setResult] = useState(null);
+    const markerRef = useRef(null);
+    const popupRef = useRef(null);
+    const cleanupRef = useRef(null);
     const optionsString = JSON.stringify(options);
     useEffect(() => {
-        let marker = null;
+        if (!map)
+            return;
         const isEmpty = Children.count(children) === 0;
-        if (map) {
-            const element = document.createElement('div');
-            const parsedOptions = JSON.parse(optionsString);
-            if (!isEmpty)
-                setResult(ReactDOM.createPortal(children, element));
-            marker = isEmpty
-                ? new maplibre.Marker(Object.assign({}, parsedOptions))
-                : new maplibre.Marker(Object.assign(Object.assign({}, parsedOptions), { element }));
-            if (popup)
-                marker.setPopup(new maplibre.Popup({ offset: [0, -15], closeOnClick }).setHTML(ReactDOMServer.renderToStaticMarkup(popup)));
-            marker = marker.setLngLat([longitude, latitude]).addTo(map);
+        const element = document.createElement('div');
+        const parsedOptions = JSON.parse(optionsString);
+        if (!isEmpty) {
+            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 }));
+        marker.setLngLat([longitude, latitude]).addTo(map);
+        markerRef.current = marker;
+        // Handle popup manually if provided
+        if (popup) {
+            const popupHTML = ReactDOMServer.renderToStaticMarkup(popup);
+            const handleMarkerClick = (e) => {
+                e.stopPropagation();
+                // Close existing popup if any
+                if (popupRef.current) {
+                    popupRef.current.remove();
+                    popupRef.current = null;
+                    return; // Toggle behavior - close if already open
+                }
+                // Create new popup directly on the map
+                const newPopup = new maplibre.Popup({
+                    offset: [0, -15],
+                    closeOnClick,
+                    closeButton,
+                })
+                    .setLngLat([longitude, latitude])
+                    .setHTML(popupHTML)
+                    .addTo(map);
+                popupRef.current = newPopup;
+                // Listen for popup close to clean up reference
+                newPopup.on('close', () => {
+                    popupRef.current = null;
+                });
+            };
+            // Add click listener to marker element
+            const markerElement = marker.getElement();
+            markerElement.style.cursor = 'pointer';
+            markerElement.addEventListener('click', handleMarkerClick);
+            // Cleanup function
+            const cleanup = () => {
+                markerElement.removeEventListener('click', handleMarkerClick);
+                if (popupRef.current) {
+                    popupRef.current.remove();
+                    popupRef.current = null;
+                }
+            };
+            cleanupRef.current = cleanup;
         }
         return () => {
-            if (marker)
-                marker.remove();
+            if (cleanupRef.current) {
+                cleanupRef.current();
+                cleanupRef.current = null;
+            }
+            if (markerRef.current) {
+                markerRef.current.remove();
+                markerRef.current = null;
+            }
         };
-    }, [closeOnClick, optionsString, setResult, children, latitude, longitude, map, popup]);
+    }, [map, optionsString, children, longitude, latitude, popup, closeOnClick, closeButton]);
     return result;
 };

package/dist/NavigationControl.d.ts

@@ -0,0 +1,8 @@
+import { FC } from 'react';
+import { NavigationControlOptions } from 'maplibre-gl';
+import { ControlPosition } from './types';
+export type NavigationControlProps = {
+    position?: ControlPosition;
+    options?: NavigationControlOptions;
+};
+export declare const NavigationControl: FC<NavigationControlProps>;

package/dist/NavigationControl.js

@@ -0,0 +1,19 @@
+import { useEffect } from 'react';
+import maplibre from 'maplibre-gl';
+import { useMap } from './Map';
+export const NavigationControl = ({ position = 'bottom-right', options = {
+    showZoom: true,
+    showCompass: false,
+}, }) => {
+    const { map } = useMap();
+    useEffect(() => {
+        const control = new maplibre.NavigationControl(options);
+        if (map && position) {
+            map.addControl(control, position);
+        }
+        return () => {
+            map === null || map === void 0 ? void 0 : map.removeControl(control);
+        };
+    }, [position, options, map]);
+    return null;
+};

package/dist/ScaleControl.d.ts

@@ -1,6 +1,8 @@
 import { FC } from 'react';
+import { ScaleControlOptions } from 'maplibre-gl';
 import { ControlPosition } from './types';
 export type ScaleControlProps = {
     position?: ControlPosition;
+    options?: ScaleControlOptions;
 };
 export declare const ScaleControl: FC<ScaleControlProps>;

package/dist/ScaleControl.js

@@ -1,29 +1,16 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 import { useEffect } from 'react';
 import maplibre from 'maplibre-gl';
 import { useMap } from './Map';
-export const ScaleControl = (_a) => {
-    var { position = 'top-right' } = _a, options = __rest(_a, ["position"]);
+export const ScaleControl = ({ position = 'bottom-right', options, }) => {
     const { map } = useMap();
-    const optionsString = JSON.stringify(options);
     useEffect(() => {
-        const control = new maplibre.ScaleControl();
-        if (map) {
+        const control = new maplibre.ScaleControl(options);
+        if (map && position) {
             map.addControl(control, position);
         }
         return () => {
             map === null || map === void 0 ? void 0 : map.removeControl(control);
         };
-    }, [position, optionsString, map]);
+    }, [position, options, map]);
     return null;
 };

package/dist/index.d.ts

@@ -5,3 +5,4 @@ export { Popup } from './Popup';
 export { Layer } from './Layer';
 export { GeolocateControl } from './GeolocateControl';
 export { ScaleControl } from './ScaleControl';
+export { NavigationControl } from './NavigationControl';

package/dist/index.js

@@ -4,3 +4,4 @@ export { Popup } from './Popup';
 export { Layer } from './Layer';
 export { GeolocateControl } from './GeolocateControl';
 export { ScaleControl } from './ScaleControl';
+export { NavigationControl } from './NavigationControl';

package/package.json

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