@vinctus/react-maplibre 0.2.7 → 0.2.9

package/dist/Marker.d.ts

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

package/dist/Marker.js

@@ -9,35 +9,85 @@ 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, popupClassName, closeOnClick } = _a, options = __rest(_a, ["children", "longitude", "latitude", "popup", "popupClassName", "closeOnClick"]);
+    var { children, longitude, latitude, popup, popupClassName, closeOnClick = false, closeButton = true } = _a, options = __rest(_a, ["children", "longitude", "latitude", "popup", "popupClassName", "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, className: popupClassName }).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,
+                    className: popupClassName,
+                })
+                    .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/package.json

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