@vinctus/react-maplibre 0.2.6 → 0.2.7

package/dist/Marker.d.ts

@@ -4,8 +4,8 @@ export type MarkerProps = {
     longitude: number;
     latitude: number;
     popup?: ReactElement;
+    popupClassName?: string;
     closeOnClick?: boolean;
-    closeButton?: boolean;
     anchor?: PositionAnchor;
     color?: string;
     children?: ReactNode;

package/dist/Marker.js

@@ -9,84 +9,35 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { useEffect, useState, Children, useRef } from 'react';
+import { useEffect, useState, Children } from 'react';
 import maplibre from 'maplibre-gl';
 import { useMap } from './Map';
 import ReactDOM from 'react-dom';
-import ReactDOMServer from 'react-dom/server';
+import ReactDOMServer from 'react-dom/server'; // eslint-disable-line import/no-webpack-loader-syntax
 export const Marker = (_a) => {
-    var { children, longitude, latitude, popup, closeOnClick = false, closeButton = true } = _a, options = __rest(_a, ["children", "longitude", "latitude", "popup", "closeOnClick", "closeButton"]);
+    var { children, longitude, latitude, popup, popupClassName, closeOnClick } = _a, options = __rest(_a, ["children", "longitude", "latitude", "popup", "popupClassName", "closeOnClick"]);
     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(() => {
-        if (!map)
-            return;
+        let marker = null;
         const isEmpty = Children.count(children) === 0;
-        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;
+        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);
         }
         return () => {
-            if (cleanupRef.current) {
-                cleanupRef.current();
-                cleanupRef.current = null;
-            }
-            if (markerRef.current) {
-                markerRef.current.remove();
-                markerRef.current = null;
-            }
+            if (marker)
+                marker.remove();
         };
-    }, [map, optionsString, children, longitude, latitude, popup, closeOnClick, closeButton]);
+    }, [closeOnClick, optionsString, setResult, children, latitude, longitude, map, popup]);
     return result;
 };

package/package.json

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