@geowiki/map 0.16.9-dev.20 → 0.16.9-dev.22

package/dist/{GeoWikiMap-4R5RAE4T.mjs → GeoWikiMap-WTTI3OZX.mjs}

@@ -1,7 +1,7 @@
 "use client";
 import {
   GeoWikiMap
-} from "./chunk-CMTGRR7U.mjs";
+} from "./chunk-EK6NVKCV.mjs";
 export {
   GeoWikiMap
 };

package/dist/{chunk-CMTGRR7U.mjs → chunk-EK6NVKCV.mjs}

@@ -6494,7 +6494,7 @@ import {
   createElementObject,
   createPathComponent
 } from "@react-leaflet/core";
-import * as L6 from "leaflet";
+import L6 from "leaflet";
 import "leaflet.markercluster";
 function getPropsAndEvents(props) {
   let clusterProps = {};
@@ -6523,7 +6523,7 @@ function createMarkerClusterGroup(props, context) {
 }
 var updateMarkerCluster = () => {
 };
-var MarkerClusterGroup2 = createPathComponent(
+var MarkerClusterGroup = createPathComponent(
   createMarkerClusterGroup,
   updateMarkerCluster
 );
@@ -7246,7 +7246,7 @@ var GeoJsonLayer = memo(
     if (error) return /* @__PURE__ */ jsx20("div", { children: "error" });
     if (isLoading) return /* @__PURE__ */ jsx20(LoaderFull5, {});
     return /* @__PURE__ */ jsx20(
-      MarkerClusterGroup2,
+      MarkerClusterGroup,
       {
         ref,
         iconCreateFunction: clusterIconFunction,
@@ -7468,7 +7468,7 @@ var IfbnPlotLayer = ({
   if (error) return /* @__PURE__ */ jsx21("div", { children: "error" });
   if (isLoading) return /* @__PURE__ */ jsx21(LoaderFull6, {});
   return /* @__PURE__ */ jsxs14(
-    MarkerClusterGroup2,
+    MarkerClusterGroup,
     {
       ref,
       chunkedLoading: true,
@@ -9287,7 +9287,7 @@ var GoogleSheetsLayer = ({
         }
       )
     ] }),
-    /* @__PURE__ */ jsx26(MarkerClusterGroup2, { ref, iconCreateFunction: createClusterIcon3(), children: /* @__PURE__ */ jsx26(
+    /* @__PURE__ */ jsx26(MarkerClusterGroup, { ref, iconCreateFunction: createClusterIcon3(), children: /* @__PURE__ */ jsx26(
       GeoJSON4,
       {
         data: processedData,
@@ -9510,7 +9510,7 @@ var MarkerClusterRenderer = memo2(
       return null;
     }
     return /* @__PURE__ */ jsx27(
-      MarkerClusterGroup2,
+      MarkerClusterGroup,
       {
         chunkedLoading: true,
         maxClusterRadius: 60,
@@ -10985,7 +10985,7 @@ export {
   parseMapMenuItems,
   BetterWMS,
   CustomWMSTileLayer,
-  MarkerClusterGroup2 as MarkerClusterGroup,
+  MarkerClusterGroup,
   GeoJsonLayer,
   useCustomLayerStore,
   statusColorMap,

package/dist/index.d.mts

@@ -776,15 +776,15 @@ interface Props$1 {
 declare const LayerSwitch: ({ layer }: Props$1) => react_jsx_runtime.JSX.Element;
 
 type ClusterEvents = {
-    onClick?: L.LeafletMouseEventHandlerFn;
-    onDblClick?: L.LeafletMouseEventHandlerFn;
-    onMouseDown?: L.LeafletMouseEventHandlerFn;
-    onMouseUp?: L.LeafletMouseEventHandlerFn;
-    onMouseOver?: L.LeafletMouseEventHandlerFn;
-    onMouseOut?: L.LeafletMouseEventHandlerFn;
-    onContextMenu?: L.LeafletMouseEventHandlerFn;
+    onClick?: L__default.LeafletMouseEventHandlerFn;
+    onDblClick?: L__default.LeafletMouseEventHandlerFn;
+    onMouseDown?: L__default.LeafletMouseEventHandlerFn;
+    onMouseUp?: L__default.LeafletMouseEventHandlerFn;
+    onMouseOver?: L__default.LeafletMouseEventHandlerFn;
+    onMouseOut?: L__default.LeafletMouseEventHandlerFn;
+    onContextMenu?: L__default.LeafletMouseEventHandlerFn;
 };
-declare const MarkerClusterGroup: ForwardRefExoticComponent<L.MarkerClusterGroupOptions & {
+declare const MarkerClusterGroup: ForwardRefExoticComponent<L__default.MarkerClusterGroupOptions & {
     children: React__default.ReactNode;
 } & ClusterEvents & RefAttributes<any>>;
 

package/dist/index.d.ts

@@ -776,15 +776,15 @@ interface Props$1 {
 declare const LayerSwitch: ({ layer }: Props$1) => react_jsx_runtime.JSX.Element;
 
 type ClusterEvents = {
-    onClick?: L.LeafletMouseEventHandlerFn;
-    onDblClick?: L.LeafletMouseEventHandlerFn;
-    onMouseDown?: L.LeafletMouseEventHandlerFn;
-    onMouseUp?: L.LeafletMouseEventHandlerFn;
-    onMouseOver?: L.LeafletMouseEventHandlerFn;
-    onMouseOut?: L.LeafletMouseEventHandlerFn;
-    onContextMenu?: L.LeafletMouseEventHandlerFn;
+    onClick?: L__default.LeafletMouseEventHandlerFn;
+    onDblClick?: L__default.LeafletMouseEventHandlerFn;
+    onMouseDown?: L__default.LeafletMouseEventHandlerFn;
+    onMouseUp?: L__default.LeafletMouseEventHandlerFn;
+    onMouseOver?: L__default.LeafletMouseEventHandlerFn;
+    onMouseOut?: L__default.LeafletMouseEventHandlerFn;
+    onContextMenu?: L__default.LeafletMouseEventHandlerFn;
 };
-declare const MarkerClusterGroup: ForwardRefExoticComponent<L.MarkerClusterGroupOptions & {
+declare const MarkerClusterGroup: ForwardRefExoticComponent<L__default.MarkerClusterGroupOptions & {
     children: React__default.ReactNode;
 } & ClusterEvents & RefAttributes<any>>;
 

package/dist/index.js

@@ -3170,7 +3170,7 @@ function getPropsAndEvents(props) {
 }
 function createMarkerClusterGroup(props, context) {
   const { clusterProps, clusterEvents } = getPropsAndEvents(props);
-  const markerClusterGroup = new L7.MarkerClusterGroup(clusterProps);
+  const markerClusterGroup = new import_leaflet5.default.MarkerClusterGroup(clusterProps);
   Object.entries(clusterEvents).forEach(([eventAsProp, callback]) => {
     const clusterEvent = `cluster${eventAsProp.substring(2).toLowerCase()}`;
     markerClusterGroup.on(clusterEvent, callback);
@@ -3180,17 +3180,17 @@ function createMarkerClusterGroup(props, context) {
     (0, import_core4.extendContext)(context, { layerContainer: markerClusterGroup })
   );
 }
-var import_core4, L7, import_leaflet5, updateMarkerCluster, MarkerClusterGroup2;
+var import_core4, import_leaflet5, import_leaflet6, updateMarkerCluster, MarkerClusterGroup;
 var init_MarkerClusterGroup = __esm({
   "src/Components/MarkerClusterGroup.tsx"() {
     "use strict";
     "use client";
     import_core4 = require("@react-leaflet/core");
-    L7 = __toESM(require("leaflet"));
-    import_leaflet5 = require("leaflet.markercluster");
+    import_leaflet5 = __toESM(require("leaflet"));
+    import_leaflet6 = require("leaflet.markercluster");
     updateMarkerCluster = () => {
     };
-    MarkerClusterGroup2 = (0, import_core4.createPathComponent)(
+    MarkerClusterGroup = (0, import_core4.createPathComponent)(
       createMarkerClusterGroup,
       updateMarkerCluster
     );
@@ -3816,14 +3816,14 @@ var init_GeoJsonLayerPopup = __esm({
 });
 
 // src/Components/GeoJsonLayer.tsx
-var import_react_query, import_react_leaflet6, import_leaflet6, ReactDOMServer, import_ui6, import_server2, import_MapPinIcon, import_react8, turf2, import_ui7, import_jsx_runtime13, getIcon, createIcon, createClusterIcon, GeoJsonLayer;
+var import_react_query, import_react_leaflet6, import_leaflet7, ReactDOMServer, import_ui6, import_server2, import_MapPinIcon, import_react8, turf2, import_ui7, import_jsx_runtime13, getIcon, createIcon, createClusterIcon, GeoJsonLayer;
 var init_GeoJsonLayer = __esm({
   "src/Components/GeoJsonLayer.tsx"() {
     "use strict";
     "use client";
     import_react_query = require("@tanstack/react-query");
     import_react_leaflet6 = require("react-leaflet");
-    import_leaflet6 = __toESM(require("leaflet"));
+    import_leaflet7 = __toESM(require("leaflet"));
     ReactDOMServer = __toESM(require("react-dom/server"));
     import_ui6 = require("@geowiki/ui");
     init_MarkerClusterGroup();
@@ -3844,7 +3844,7 @@ var init_GeoJsonLayer = __esm({
     };
     createIcon = (color, name) => {
       const background = color || "MediumSeaGreen";
-      return new import_leaflet6.default.DivIcon({
+      return new import_leaflet7.default.DivIcon({
         iconSize: [40, 40],
         html: `${getIcon(background, name)}`,
         className: "custom-div-icon"
@@ -3865,7 +3865,7 @@ var init_GeoJsonLayer = __esm({
           else if (status === "auxiliary") statusCount.auxiliary++;
           else statusCount.default++;
         });
-        return import_leaflet6.default.divIcon({
+        return import_leaflet7.default.divIcon({
           html: `<div style=
         "background-color: ${color};
          width: 36px;
@@ -3922,7 +3922,7 @@ var init_GeoJsonLayer = __esm({
             });
             if (feature.geometry.type !== "Point") {
               var center4 = turf2.center(feature);
-              var marker2 = import_leaflet6.default.marker(
+              var marker2 = import_leaflet7.default.marker(
                 [center4.geometry.coordinates[1], center4.geometry.coordinates[0]],
                 {
                   icon: layerIcon
@@ -3968,7 +3968,7 @@ var init_GeoJsonLayer = __esm({
         if (error) return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { children: "error" });
         if (isLoading) return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_ui6.LoaderFull, {});
         return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-          MarkerClusterGroup2,
+          MarkerClusterGroup,
           {
             ref,
             iconCreateFunction: clusterIconFunction,
@@ -3995,7 +3995,7 @@ function getIcon2(color) {
   const MyIcon = import_MapPinIcon2.default;
   return (0, import_server3.renderToString)(/* @__PURE__ */ (0, import_jsx_runtime14.jsx)(MyIcon, { height: 40, width: 40, color }));
 }
-var import_ui8, import_react_query2, import_react9, import_react_leaflet7, turf3, import_leaflet7, import_MapPinIcon2, import_server3, import_jsx_runtime14, createDotIcon, icon, createClusterIcon2, IfbnPlotLayer;
+var import_ui8, import_react_query2, import_react9, import_react_leaflet7, turf3, import_leaflet8, import_MapPinIcon2, import_server3, import_jsx_runtime14, createDotIcon, icon, createClusterIcon2, IfbnPlotLayer;
 var init_IfbnPlotLayer = __esm({
   "src/Components/Ifbn/IfbnPlotLayer.tsx"() {
     "use strict";
@@ -4005,13 +4005,13 @@ var init_IfbnPlotLayer = __esm({
     import_react_leaflet7 = require("react-leaflet");
     init_MarkerClusterGroup();
     turf3 = __toESM(require("@turf/turf"));
-    import_leaflet7 = __toESM(require("leaflet"));
+    import_leaflet8 = __toESM(require("leaflet"));
     init_IfbnSitePopup();
     import_MapPinIcon2 = __toESM(require("@heroicons/react/24/solid/MapPinIcon"));
     import_server3 = require("react-dom/server");
     import_jsx_runtime14 = require("react/jsx-runtime");
     createDotIcon = (color) => {
-      return new import_leaflet7.default.DivIcon({
+      return new import_leaflet8.default.DivIcon({
         html: `<span style="
       background-color: ${color};
       width: 10px;
@@ -4027,7 +4027,7 @@ var init_IfbnPlotLayer = __esm({
     };
     icon = (color) => {
       const background = color || "MediumSeaGreen";
-      return new import_leaflet7.default.DivIcon({
+      return new import_leaflet8.default.DivIcon({
         iconSize: [40, 40],
         iconAnchor: [28, 15],
         html: `<i>${getIcon2(background)}</i>`,
@@ -4054,7 +4054,7 @@ var init_IfbnPlotLayer = __esm({
       } else if (statusCount.auxiliary > statusCount.ongoing && statusCount.auxiliary > statusCount.default) {
         clusterColor = "red";
       }
-      return new import_leaflet7.default.DivIcon({
+      return new import_leaflet8.default.DivIcon({
         html: `<div style="
       background-color: ${clusterColor};
       color: white;
@@ -4069,7 +4069,7 @@ var init_IfbnPlotLayer = __esm({
       font-weight: bold;
     ">${cluster.getChildCount()}</div>`,
         className: "custom-cluster-icon",
-        iconSize: import_leaflet7.default.point(32, 32)
+        iconSize: import_leaflet8.default.point(32, 32)
       });
     };
     IfbnPlotLayer = ({
@@ -4128,7 +4128,7 @@ var init_IfbnPlotLayer = __esm({
         return zoom >= 16 ? 0 : 80;
       };
       (0, import_react9.useEffect)(() => {
-        markerClusterGroupRef.current = import_leaflet7.default.markerClusterGroup({
+        markerClusterGroupRef.current = import_leaflet8.default.markerClusterGroup({
           maxClusterRadius: (zoom) => getClusterRadius(zoom),
           disableClusteringAtZoom: 16,
           spiderfyOnMaxZoom: false,
@@ -4172,7 +4172,7 @@ var init_IfbnPlotLayer = __esm({
             }
           }
           var center4 = turf3.center(feature);
-          var marker2 = import_leaflet7.default.marker(
+          var marker2 = import_leaflet8.default.marker(
             [center4.geometry.coordinates[1], center4.geometry.coordinates[0]],
             {
               icon: createDotIcon(color)
@@ -4195,7 +4195,7 @@ var init_IfbnPlotLayer = __esm({
       if (error) return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { children: "error" });
       if (isLoading) return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_ui8.LoaderFull, {});
       return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
-        MarkerClusterGroup2,
+        MarkerClusterGroup,
         {
           ref,
           chunkedLoading: true,
@@ -5989,13 +5989,13 @@ var init_useGoogleSheetsData = __esm({
 });
 
 // src/Components/GoogleSheetsLayer.tsx
-var import_react_leaflet8, import_leaflet8, ReactDOMServer2, import_ui9, import_react10, turf4, import_lucide_react2, import_jsx_runtime19, RANDOM_COLORS, getRandomColor, createCircleIcon, createPinIcon, icon2, createClusterIcon3, getMarkerConfig, GoogleSheetsLayer;
+var import_react_leaflet8, import_leaflet9, ReactDOMServer2, import_ui9, import_react10, turf4, import_lucide_react2, import_jsx_runtime19, RANDOM_COLORS, getRandomColor, createCircleIcon, createPinIcon, icon2, createClusterIcon3, getMarkerConfig, GoogleSheetsLayer;
 var init_GoogleSheetsLayer = __esm({
   "src/Components/GoogleSheetsLayer.tsx"() {
     "use strict";
     "use client";
     import_react_leaflet8 = require("react-leaflet");
-    import_leaflet8 = __toESM(require("leaflet"));
+    import_leaflet9 = __toESM(require("leaflet"));
     ReactDOMServer2 = __toESM(require("react-dom/server"));
     import_ui9 = require("@geowiki/ui");
     init_MarkerClusterGroup();
@@ -6044,7 +6044,7 @@ var init_GoogleSheetsLayer = __esm({
       const index = Math.abs(hash) % RANDOM_COLORS.length;
       return RANDOM_COLORS[index];
     };
-    createCircleIcon = (color) => import_leaflet8.default.divIcon({
+    createCircleIcon = (color) => import_leaflet9.default.divIcon({
       html: `<div style="background-color: ${color}; width: 20px; height: 20px; border-radius: 50%; box-shadow: 0 2px 4px rgba(0,0,0,0.3);"></div>`,
       className: "custom-div-icon",
       iconSize: [20, 20],
@@ -6055,7 +6055,7 @@ var init_GoogleSheetsLayer = __esm({
       const iconHtml = ReactDOMServer2.renderToString(
         /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(IconComponent, { size: 40, color, strokeWidth: 2 })
       );
-      return import_leaflet8.default.divIcon({
+      return import_leaflet9.default.divIcon({
         html: iconHtml,
         className: "custom-pin-icon",
         iconSize: [40, 40],
@@ -6071,7 +6071,7 @@ var init_GoogleSheetsLayer = __esm({
     createClusterIcon3 = () => (cluster) => {
       const count = cluster.getChildCount();
       const size = count < 10 ? "small" : count < 100 ? "medium" : "large";
-      return import_leaflet8.default.divIcon({
+      return import_leaflet9.default.divIcon({
         html: `<div style="background-color: #ff6b35; color: white; border-radius: 50%; font-weight: bold; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 4px rgba(0,0,0,0.3); width: 100%; height: 100%; min-width: 100%; min-height: 100%;">${count}</div>`,
         className: "google-sheets-cluster-icon",
         iconSize: size === "small" ? [30, 30] : size === "medium" ? [45, 45] : [60, 60]
@@ -6139,7 +6139,7 @@ var init_GoogleSheetsLayer = __esm({
     }) => {
       var _a;
       const ref = (0, import_react10.useRef)(null);
-      const markerClusterGroup = import_leaflet8.default.markerClusterGroup();
+      const markerClusterGroup = import_leaflet9.default.markerClusterGroup();
       const { updateLayer } = mapLayers_default();
       const legendConfigUpdated = (0, import_react10.useRef)(false);
       const [forceUpdate, setForceUpdate] = (0, import_react10.useState)(0);
@@ -6215,7 +6215,7 @@ var init_GoogleSheetsLayer = __esm({
         });
         if (feature.geometry.type !== "Point") {
           var center4 = turf4.center(feature);
-          var marker2 = import_leaflet8.default.marker(
+          var marker2 = import_leaflet9.default.marker(
             [center4.geometry.coordinates[1], center4.geometry.coordinates[0]],
             {
               icon: icon2(markerConfig.color, markerConfig.icon)
@@ -6414,7 +6414,7 @@ var init_GoogleSheetsLayer = __esm({
             }
           )
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(MarkerClusterGroup2, { ref, iconCreateFunction: createClusterIcon3(), children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(MarkerClusterGroup, { ref, iconCreateFunction: createClusterIcon3(), children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
           import_react_leaflet8.GeoJSON,
           {
             data: processedData,
@@ -6435,7 +6435,7 @@ var init_GoogleSheetsLayer = __esm({
 });
 
 // src/Components/CustomLayerRenderer.tsx
-var import_react11, import_react_leaflet9, import_leaflet9, import_jsx_runtime20, createMarkerIcon, createClusterIcon4, createPopupContent, GeoJSONRenderer, MarkerRenderer, MarkerClusterRenderer, WMSRenderer, TileRenderer, GoogleSheetsRenderer, CustomLayerRenderer, CustomLayerList;
+var import_react11, import_react_leaflet9, import_leaflet10, import_jsx_runtime20, createMarkerIcon, createClusterIcon4, createPopupContent, GeoJSONRenderer, MarkerRenderer, MarkerClusterRenderer, WMSRenderer, TileRenderer, GoogleSheetsRenderer, CustomLayerRenderer, CustomLayerList;
 var init_CustomLayerRenderer = __esm({
   "src/Components/CustomLayerRenderer.tsx"() {
     "use strict";
@@ -6443,7 +6443,7 @@ var init_CustomLayerRenderer = __esm({
     import_react_leaflet9 = require("react-leaflet");
     init_customLayers();
     init_statusMapping();
-    import_leaflet9 = __toESM(require("leaflet"));
+    import_leaflet10 = __toESM(require("leaflet"));
     init_GoogleSheetsLayer();
     init_MarkerClusterGroup();
     import_jsx_runtime20 = require("react/jsx-runtime");
@@ -6476,7 +6476,7 @@ var init_CustomLayerRenderer = __esm({
       />
     </svg>
   `;
-      return import_leaflet9.default.divIcon({
+      return import_leaflet10.default.divIcon({
         html: iconHtml,
         className: "geotrees-marker-icon",
         iconSize: [size, size],
@@ -6487,7 +6487,7 @@ var init_CustomLayerRenderer = __esm({
       const count = cluster.getChildCount();
       const size = count < 10 ? "small" : count < 100 ? "medium" : "large";
       const iconSize = size === "small" ? [30, 30] : size === "medium" ? [40, 40] : [50, 50];
-      return import_leaflet9.default.divIcon({
+      return import_leaflet10.default.divIcon({
         html: `<div style="background-color: #22c55e; color: white; border-radius: 50%; font-weight: bold; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 4px rgba(0,0,0,0.3); width: 100%; height: 100%; min-width: 100%; min-height: 100%;">${count}</div>`,
         className: "geotrees-cluster-icon",
         iconSize
@@ -6650,7 +6650,7 @@ var init_CustomLayerRenderer = __esm({
           return null;
         }
         return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-          MarkerClusterGroup2,
+          MarkerClusterGroup,
           {
             chunkedLoading: true,
             maxClusterRadius: 60,
@@ -10830,14 +10830,14 @@ var GeoWikiMap_exports = {};
 __export(GeoWikiMap_exports, {
   GeoWikiMap: () => GeoWikiMap
 });
-var import_react60, import_react_leaflet28, import_leaflet22, import_dist, import_core44, import_ui43, import_core45, import_react_hotkeys_hook3, import_jsx_runtime77, GeoWikiMapComponent, GeoWikiMap;
+var import_react60, import_react_leaflet28, import_leaflet23, import_dist, import_core44, import_ui43, import_core45, import_react_hotkeys_hook3, import_jsx_runtime77, GeoWikiMapComponent, GeoWikiMap;
 var init_GeoWikiMap = __esm({
   "src/Components/Map/GeoWikiMap.tsx"() {
     "use strict";
     "use client";
     import_react60 = require("react");
     import_react_leaflet28 = require("react-leaflet");
-    import_leaflet22 = require("leaflet/dist/leaflet.css");
+    import_leaflet23 = require("leaflet/dist/leaflet.css");
     import_dist = require("@bopen/leaflet-area-selection/dist/index.css");
     import_core44 = require("@geowiki/core");
     init_EvolandContainer();
@@ -11275,7 +11275,7 @@ __export(index_exports, {
   MapEvents: () => MapEvents,
   MapLibre: () => MapLibre,
   MapSidebar: () => MapSidebar,
-  MarkerClusterGroup: () => MarkerClusterGroup2,
+  MarkerClusterGroup: () => MarkerClusterGroup,
   OverlayLayer: () => OverlayLayer,
   PointSelection: () => PointSelection,
   Questions: () => Questions,
@@ -11473,7 +11473,7 @@ init_evoland();
 init_EvoLandRasterType();
 
 // src/Components/Map/BasicMap.tsx
-var import_leaflet10 = require("leaflet/dist/leaflet.css");
+var import_leaflet11 = require("leaflet/dist/leaflet.css");
 var import_react36 = require("react");
 var import_react_leaflet15 = require("react-leaflet");
 var import_core33 = require("@geowiki/core");
@@ -12744,6 +12744,7 @@ var LayerSwitcher = (0, import_react27.memo)(() => {
         /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
           import_react30.Disclosure,
           {
+            as: "div",
             "data-component": menu.title,
             defaultOpen: mapMenus.length === 1,
             children: ({ open }) => {
@@ -13257,7 +13258,7 @@ var BasicMap = () => {
 };
 
 // src/Components/Map/BasfMap.tsx
-var import_leaflet14 = require("leaflet/dist/leaflet.css");
+var import_leaflet15 = require("leaflet/dist/leaflet.css");
 var import_react46 = require("react");
 var import_react_leaflet19 = require("react-leaflet");
 var import_useMapSettings2 = __toESM(require("@geowiki/core/src/hooks/useMapSettings"));
@@ -13384,7 +13385,7 @@ init_map();
 // src/Components/Basf/SelectedPixelsLayer.tsx
 var import_react38 = require("react");
 var import_react_leaflet16 = require("react-leaflet");
-var import_leaflet11 = __toESM(require("leaflet"));
+var import_leaflet12 = __toESM(require("leaflet"));
 var SelectedPixelsLayer = () => {
   const { data } = useSelectedPixelStore();
   const layerRef = (0, import_react38.useRef)(null);
@@ -13392,13 +13393,13 @@ var SelectedPixelsLayer = () => {
   const prevDataRef = (0, import_react38.useRef)(data);
   (0, import_react38.useEffect)(() => {
     if (!layerRef.current) {
-      layerRef.current = import_leaflet11.default.layerGroup().addTo(map);
+      layerRef.current = import_leaflet12.default.layerGroup().addTo(map);
     }
     if (prevDataRef.current !== data) {
       layerRef.current.clearLayers();
       data.forEach((geoJson) => {
         var _a;
-        const layer = import_leaflet11.default.geoJSON(geoJson, {
+        const layer = import_leaflet12.default.geoJSON(geoJson, {
           style: () => ({
             color: "red",
             weight: 2,
@@ -14063,8 +14064,8 @@ var import_ui32 = require("@geowiki/ui");
 // src/Components/Controls/MeasureControl.tsx
 var import_react44 = require("react");
 var import_react_leaflet17 = require("react-leaflet");
-var import_leaflet12 = __toESM(require("leaflet"));
-var import_leaflet13 = require("leaflet.polylinemeasure");
+var import_leaflet13 = __toESM(require("leaflet"));
+var import_leaflet14 = require("leaflet.polylinemeasure");
 var import_ui31 = require("@geowiki/ui");
 var import_core38 = require("@geowiki/core");
 var import_jsx_runtime60 = require("react/jsx-runtime");
@@ -14074,7 +14075,7 @@ function PolylineMeasureControl() {
   const [active, setActive] = (0, import_react44.useState)(false);
   (0, import_react44.useEffect)(() => {
     if (!map) return;
-    controlRef.current = import_leaflet12.default.control.polylineMeasure({
+    controlRef.current = import_leaflet13.default.control.polylineMeasure({
       position: "topright",
       unit: "metres",
       showBearings: true,
@@ -14247,7 +14248,7 @@ var BasfMap = (0, import_react46.memo)(BasfMapComponent);
 BasfMap.displayName = "BasfMap";
 
 // src/Components/Map/GeoTreesMap.tsx
-var import_leaflet16 = require("leaflet/dist/leaflet.css");
+var import_leaflet17 = require("leaflet/dist/leaflet.css");
 var import_react_leaflet23 = require("react-leaflet");
 
 // src/Components/Map/GeoTreesControlList.tsx
@@ -14670,7 +14671,7 @@ var import_react52 = require("react");
 var import_react50 = require("react");
 var import_react_leaflet22 = require("react-leaflet");
 init_MarkerClusterGroup();
-var import_leaflet15 = __toESM(require("leaflet"));
+var import_leaflet16 = __toESM(require("leaflet"));
 init_mapLayers();
 init_customLayers();
 var import_MapPinIcon3 = __toESM(require("@heroicons/react/24/solid/MapPinIcon"));
@@ -14693,7 +14694,7 @@ var createTreeIcon = (color = "#22c55e") => {
   const iconHtml = (0, import_server5.renderToString)(
     /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(import_MapPinIcon3.default, { height: 24, width: 24, color })
   );
-  return new import_leaflet15.default.DivIcon({
+  return new import_leaflet16.default.DivIcon({
     html: `<div style="
       display: flex;
       align-items: center;
@@ -14717,7 +14718,7 @@ var createClusterIcon5 = (cluster) => {
     size = 48;
     fontSize = 16;
   }
-  return new import_leaflet15.default.DivIcon({
+  return new import_leaflet16.default.DivIcon({
     html: `<div style="
       background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
       color: white;
@@ -14735,7 +14736,7 @@ var createClusterIcon5 = (cluster) => {
       text-shadow: 0 1px 2px rgba(0,0,0,0.5);
     ">${childCount}</div>`,
     className: "custom-tree-cluster-icon",
-    iconSize: import_leaflet15.default.point(size, size)
+    iconSize: import_leaflet16.default.point(size, size)
   });
 };
 var TreeMarkerPopup = ({
@@ -14944,7 +14945,7 @@ var GeoTreesCustomLayerComponent = () => {
   );
   return /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)(import_jsx_runtime66.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
-      MarkerClusterGroup2,
+      MarkerClusterGroup,
       {
         chunkedLoading: true,
         maxClusterRadius: 60,
@@ -15350,7 +15351,7 @@ var GeoTreesMap = () => {
 };
 
 // src/Components/Canopy/CanopyMap.tsx
-var import_leaflet21 = require("leaflet/dist/leaflet.css");
+var import_leaflet22 = require("leaflet/dist/leaflet.css");
 var import_react58 = require("react");
 var import_react_leaflet27 = require("react-leaflet");
 var import_core41 = require("@geowiki/core");
@@ -15366,7 +15367,7 @@ var import_react_leaflet26 = require("react-leaflet");
 // src/Components/Map/GenericAreaSelect.tsx
 var import_react53 = require("react");
 var import_react_leaflet24 = require("react-leaflet");
-var import_leaflet17 = require("leaflet");
+var import_leaflet18 = require("leaflet");
 
 // src/store/AreaSelectStore.ts
 var import_zustand8 = require("zustand");
@@ -15404,7 +15405,7 @@ var useAreaSelect = ({
     if (!map.selectArea) return;
     (_a = map.selectArea) == null ? void 0 : _a.setControlKey(false);
     if (!rectangleRef.current) {
-      rectangleRef.current = new import_leaflet17.Rectangle(
+      rectangleRef.current = new import_leaflet18.Rectangle(
         [
           [0, 0],
           [0, 0]
@@ -15482,7 +15483,7 @@ var useAreaSelect = ({
 var import_react54 = require("react");
 var import_lucide_react5 = require("lucide-react");
 var import_ui36 = require("@geowiki/ui");
-var import_leaflet18 = __toESM(require("leaflet"));
+var import_leaflet19 = __toESM(require("leaflet"));
 var import_jsx_runtime70 = require("react/jsx-runtime");
 var CanopyAtlasDownload = () => {
   const [format, setFormat] = (0, import_react54.useState)("shape-zip");
@@ -15500,7 +15501,7 @@ var CanopyAtlasDownload = () => {
       maxFeatures: 1e3
     };
     const baseUrl = "https://geoserver.iiasa.ac.at/geoserver/canopyatlas/ows";
-    const wfsUrl = baseUrl + import_leaflet18.default.Util.getParamString(params, baseUrl, true);
+    const wfsUrl = baseUrl + import_leaflet19.default.Util.getParamString(params, baseUrl, true);
     try {
       const response = yield fetch(wfsUrl);
       if (!response.ok) throw new Error("Download failed");
@@ -15553,7 +15554,7 @@ var CanopyAtlasDownload = () => {
 var import_react55 = require("react");
 var import_ui37 = require("@geowiki/ui");
 var import_lucide_react6 = require("lucide-react");
-var import_leaflet19 = __toESM(require("leaflet"));
+var import_leaflet20 = __toESM(require("leaflet"));
 var import_ui38 = require("@geowiki/ui");
 var import_react_hook_form5 = require("react-hook-form");
 var z2 = __toESM(require("zod"));
@@ -15696,7 +15697,7 @@ var CanopyFilter = (0, import_react55.memo)(({ onFilterChange }) => {
       maxFeatures: 1e3
     }, cqlFilters.length > 0 && { CQL_FILTER: cqlFilters.join(" AND ") });
     const baseUrl = "https://geoserver.iiasa.ac.at/geoserver/canopyatlas/ows";
-    const wfsUrl = baseUrl + import_leaflet19.default.Util.getParamString(params, baseUrl, true);
+    const wfsUrl = baseUrl + import_leaflet20.default.Util.getParamString(params, baseUrl, true);
     try {
       const response = yield fetch(wfsUrl);
       if (!response.ok) throw new Error("Download failed");
@@ -15924,7 +15925,7 @@ var import_react56 = require("react");
 var import_react_leaflet25 = require("react-leaflet");
 var import_react_query6 = require("@tanstack/react-query");
 var turf7 = __toESM(require("@turf/turf"));
-var import_leaflet20 = __toESM(require("leaflet"));
+var import_leaflet21 = __toESM(require("leaflet"));
 init_MarkerClusterGroup();
 var import_server7 = __toESM(require("react-dom/server"));
 init_map();
@@ -15983,7 +15984,7 @@ var defaultIcon = (() => {
   const iconSvg = import_server7.default.renderToString(
     /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(import_lucide_react7.MapPin, { size: 41, color: "#2196F3", strokeWidth: 2, fill: "#ffffff" })
   );
-  return new import_leaflet20.default.DivIcon({
+  return new import_leaflet21.default.DivIcon({
     html: iconSvg,
     className: "wfs-layer-marker-icon",
     iconSize: [41, 41],
@@ -16322,7 +16323,7 @@ var WfsLayer = ({
       }
       const content = typeof popupContent === "string" ? popupContent : import_server7.default.renderToString(popupContent);
       if (popupContent) {
-        const popup = import_leaflet20.default.popup(__spreadValues(__spreadValues({}, DEFAULT_POPUP_OPTIONS), popupOptions.popupOptions || {}));
+        const popup = import_leaflet21.default.popup(__spreadValues(__spreadValues({}, DEFAULT_POPUP_OPTIONS), popupOptions.popupOptions || {}));
         popup.on("add", () => {
           setSelectedFeatureId(featureId);
         });
@@ -16408,7 +16409,7 @@ var WfsLayer = ({
       },
       layerKey
     ),
-    showMarkers && shouldRenderMarkers && /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(MarkerClusterGroup2, __spreadProps(__spreadValues({}, clusterOptions), { children: filteredGeoJson.features.map(
+    showMarkers && shouldRenderMarkers && /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(MarkerClusterGroup, __spreadProps(__spreadValues({}, clusterOptions), { children: filteredGeoJson.features.map(
       (feature, index) => {
         var _a2;
         const coordinates = getFeaturePoint(feature);
@@ -17259,6 +17260,7 @@ var LayerSwitcher2 = (0, import_react62.memo)((({ mapMenuItems, customLayers })
         /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
           import_react65.Disclosure,
           {
+            as: "div",
             "data-component": menu.title,
             defaultOpen: mapMenuItems.length === 1,
             children: ({ open }) => {
@@ -20564,9 +20566,9 @@ init_MarkerClusterGroup();
 
 // src/Components/LocationMarker.tsx
 var import_react_leaflet30 = require("react-leaflet");
-var import_leaflet23 = require("leaflet");
+var import_leaflet24 = require("leaflet");
 var import_jsx_runtime84 = require("react/jsx-runtime");
-var ICON = (0, import_leaflet23.icon)({
+var ICON = (0, import_leaflet24.icon)({
   iconUrl: "/assets/img/marker-icon.png",
   iconSize: [25, 35]
 });

package/dist/index.mjs

@@ -38,7 +38,7 @@ import {
   useEvolandStore,
   useMapLayerStore,
   useMapStore
-} from "./chunk-CMTGRR7U.mjs";
+} from "./chunk-EK6NVKCV.mjs";
 
 // src/Components/CanvasImage.tsx
 var CanvasImage = () => {
@@ -1471,6 +1471,7 @@ var LayerSwitcher = memo2(() => {
         /* @__PURE__ */ jsx14(
           Disclosure,
           {
+            as: "div",
             "data-component": menu.title,
             defaultOpen: mapMenus.length === 1,
             children: ({ open }) => {
@@ -6027,6 +6028,7 @@ var LayerSwitcher2 = memo13((({ mapMenuItems, customLayers }) => {
         /* @__PURE__ */ jsx46(
           Disclosure2,
           {
+            as: "div",
             "data-component": menu.title,
             defaultOpen: mapMenuItems.length === 1,
             children: ({ open }) => {
@@ -9217,7 +9219,7 @@ MapLibre.displayName = "MapLibre";
 import { Suspense, lazy, useEffect as useEffect22, useState as useState18 } from "react";
 import { jsx as jsx49 } from "react/jsx-runtime";
 var MapComponent = lazy(
-  () => import("./GeoWikiMap-4R5RAE4T.mjs").then((m) => ({ default: m.GeoWikiMap }))
+  () => import("./GeoWikiMap-WTTI3OZX.mjs").then((m) => ({ default: m.GeoWikiMap }))
 );
 var ClientOnlyMap = ({ children }) => {
   const [isClient, setIsClient] = useState18(false);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@geowiki/map",
-  "version": "0.16.9-dev.20",
+  "version": "0.16.9-dev.22",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "files": [
@@ -24,72 +24,72 @@
     "react-hotkeys-hook": "^4.5.0",
     "react-leaflet": "^4.2.1",
     "zod": "^3.25.7",
-    "@geowiki/cms-proxy": "0.16.9-dev.20",
-    "@geowiki/core": "0.16.9-dev.20",
-    "@geowiki/evoland-api-proxy": "0.16.9-dev.20",
-    "@geowiki/ui": "0.16.9-dev.20",
-    "@geowiki/design-system": "0.16.9-dev.20"
+    "@geowiki/cms-proxy": "0.16.9-dev.22",
+    "@geowiki/design-system": "0.16.9-dev.22",
+    "@geowiki/evoland-api-proxy": "0.16.9-dev.22",
+    "@geowiki/core": "0.16.9-dev.22",
+    "@geowiki/ui": "0.16.9-dev.22"
   },
   "dependencies": {
     "@dnd-kit/core": "^6.3.1",
     "@dnd-kit/sortable": "^10.0.0",
     "@dnd-kit/utilities": "^3.2.2",
     "@headlessui/react": "^2.2.10",
-    "@heroicons/react": "^2.1.1",
-    "@hookform/resolvers": "^3.3.1",
+    "@heroicons/react": "^2.2.0",
+    "@hookform/resolvers": "^3.10.0",
     "@radix-ui/react-popover": "^1.1.15",
     "@turf/turf": "^6.5.0",
-    "csv-parse": "^6.1.0",
-    "d3": "^7.8.5",
-    "dompurify": "^3.1.7",
-    "driver.js": "^1.3.1",
-    "esri-leaflet": "^3.0.14",
-    "geoblaze": "^2.2.0",
+    "csv-parse": "^6.2.1",
+    "d3": "^7.9.0",
+    "dompurify": "^3.4.5",
+    "driver.js": "^1.4.0",
+    "esri-leaflet": "^3.0.19",
+    "geoblaze": "^2.8.0",
     "geojson-to-kml": "^0.0.1",
     "georaster": "^1.6.0",
     "georaster-layer-for-leaflet": "^3.10.0",
-    "geotiff": "^2.0.7",
-    "konva": "^9.2.0",
+    "geotiff": "^2.1.3",
+    "konva": "^9.3.22",
     "leaflet-area-select": "^1.1.1",
     "leaflet.markercluster": "^1.5.3",
     "leaflet.polylinemeasure": "^3.0.0",
     "lucide-react": "^0.224.0",
-    "maplibre-gl": "^5.23.0",
+    "maplibre-gl": "^5.24.0",
     "plotty": "^0.4.9",
     "pngjs": "^7.0.0",
-    "proj4": "^2.9.0",
-    "react-konva": "^18.2.10",
-    "react-select": "^5.7.4",
-    "use-image": "^1.1.1",
-    "uuid": "^9.0.0",
+    "proj4": "^2.20.8",
+    "react-konva": "^18.2.16",
+    "react-select": "^5.10.2",
+    "use-image": "^1.1.4",
+    "uuid": "^9.0.1",
     "zustand": "4.3.9"
   },
   "devDependencies": {
     "@tailwindcss/aspect-ratio": "^0.4.2",
-    "@tailwindcss/forms": "^0.5.3",
-    "@tailwindcss/typography": "^0.5.9",
-    "@types/d3": "^7.4.0",
-    "@types/dompurify": "^3.0.5",
-    "@types/esri-leaflet": "^3.0.3",
-    "@types/geojson": "^7946.0.10",
+    "@tailwindcss/forms": "^0.5.11",
+    "@tailwindcss/typography": "^0.5.19",
+    "@types/d3": "^7.4.3",
+    "@types/dompurify": "^3.2.0",
+    "@types/esri-leaflet": "^3.0.4",
+    "@types/geojson": "^7946.0.16",
     "@types/leaflet": "^1.9.21",
-    "@types/leaflet-draw": "^1.0.7",
-    "@types/leaflet.markercluster": "^1.5.1",
+    "@types/leaflet-draw": "^1.0.13",
+    "@types/leaflet.markercluster": "^1.5.6",
     "@types/node": "18.11.18",
-    "@types/pngjs": "^6.0.1",
-    "@types/react": "^19.2.0",
-    "@types/react-dom": "^19.2.0",
+    "@types/pngjs": "^6.0.5",
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
     "@types/uuid": "^10.0.0",
-    "autoprefixer": "^10.4.14",
-    "eslint": "^8.46.0",
-    "postcss": "^8.4.21",
-    "tailwindcss": "^3.3.3",
+    "autoprefixer": "^10.5.0",
+    "eslint": "^8.57.1",
+    "postcss": "^8.5.14",
+    "tailwindcss": "^3.4.19",
     "tailwindcss-animate": "^1.0.7",
-    "tsup": "^8.0.2",
+    "tsup": "^8.5.1",
     "typescript": "5.4.2",
     "eslint-config-custom": "0.0.0",
-    "tailwind-config": "0.0.0",
-    "tsconfig": "0.0.0"
+    "tsconfig": "0.0.0",
+    "tailwind-config": "0.0.0"
   },
   "scripts": {
     "build": "tsup && tailwindcss -i styles.css -o dist/styles.css --minify",