@metastringfoundation/map-list 0.1.1 → 0.1.3

package/dist/components/Handler/MapComparisonControl.d.ts

@@ -0,0 +1,7 @@
+interface MapComparisonControlProps {
+    isActive: boolean;
+    onToggle: () => void;
+}
+export default function MapComparisonControl({ isActive, onToggle, }: MapComparisonControlProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=MapComparisonControl.d.ts.map

package/dist/components/Handler/MapComparisonControl.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MapComparisonControl.d.ts","sourceRoot":"","sources":["../../../src/components/Handler/MapComparisonControl.tsx"],"names":[],"mappings":"AAIA,UAAU,yBAAyB;IACjC,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,MAAM,CAAC,OAAO,UAAU,oBAAoB,CAAC,EAC3C,QAAQ,EACR,QAAQ,GACT,EAAE,yBAAyB,2CAuD3B"}

package/dist/components/Handler/MapComparisonControl.js

@@ -0,0 +1,8 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = MapComparisonControl;
+const jsx_runtime_1 = require("react/jsx-runtime");
+function MapComparisonControl({ isActive, onToggle, }) {
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "absolute bottom-4 right-4 z-50 flex gap-2", children: [!isActive && ((0, jsx_runtime_1.jsxs)("button", { onClick: onToggle, className: "px-4 py-2 bg-blue-600 hover:bg-blue-700 \n                     text-white rounded-lg shadow-md text-md flex items-center gap-2 font-semibold transition-colors", title: "Open Map Comparison", children: [(0, jsx_runtime_1.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [(0, jsx_runtime_1.jsx)("path", { d: "M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z" }), (0, jsx_runtime_1.jsx)("polyline", { points: "3.27 6.96 12 12.01 20.73 6.96" }), (0, jsx_runtime_1.jsx)("line", { x1: "12", y1: "22.08", x2: "12", y2: "12" })] }), "Map Comparison"] })), isActive && ((0, jsx_runtime_1.jsxs)("button", { onClick: onToggle, className: "px-4 py-2 bg-blue-600 hover:bg-blue-700 \n                     text-white rounded-lg shadow-md text-md flex items-center gap-2 font-semibold transition-colors", title: "Close Map Comparison", children: [(0, jsx_runtime_1.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [(0, jsx_runtime_1.jsx)("line", { x1: "18", y1: "6", x2: "6", y2: "18" }), (0, jsx_runtime_1.jsx)("line", { x1: "6", y1: "6", x2: "18", y2: "18" })] }), "Close Comparison"] }))] }));
+}

package/dist/components/core/button.js

@@ -17,5 +17,5 @@ const CloseButton = (props) => ((0, jsx_runtime_1.jsx)("button", { className: "a
 exports.CloseButton = CloseButton;
 const LayersButton = (props) => ((0, jsx_runtime_1.jsx)("button", { className: "absolute top-4 left-4 rounded-lg z-10 h-10 w-10 bg-white cursor-pointer hover:bg-gray-100 text-gray-700 text-lg flex items-center justify-center", ...props, children: (0, jsx_runtime_1.jsx)(icons_1.LayersIcon, {}) }));
 exports.LayersButton = LayersButton;
-const InfobarButton = (props) => ((0, jsx_runtime_1.jsx)("button", { className: "absolute top-4 right-4 rounded-lg z-10 h-10 w-10 bg-white cursor-pointer hover:bg-gray-100 text-gray-700 text-lg flex items-center justify-center", ...props, children: (0, jsx_runtime_1.jsx)(icons_1.InfoIcon, {}) }));
+const InfobarButton = (props) => ((0, jsx_runtime_1.jsx)("button", { className: "absolute top-4 right-11 rounded-lg z-10 h-10 w-10 bg-white cursor-pointer hover:bg-gray-100 text-gray-700 text-lg flex items-center justify-center", ...props, children: (0, jsx_runtime_1.jsx)(icons_1.InfoIcon, {}) }));
 exports.InfobarButton = InfobarButton;

package/dist/components/core/input.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"input.d.ts","sourceRoot":"","sources":["../../../src/components/core/input.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,UAAU,UACR,SAAQ,KAAK,CAAC,iBAAiB,CAC7B,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAC3C,gBAAgB,CACjB;IACD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,eAAO,MAAM,KAAK,GAAI,OAAO,UAAU,4CAetC,CAAC;AAEF,eAAO,MAAM,WAAW,GAAI,OAAO,UAAU,4CAoB5C,CAAC;AAEF,eAAO,MAAM,WAAW,GAAI,OAAO,UAAU,4CAW5C,CAAC;AAEF,UAAU,kBAAmB,SAAQ,UAAU;IAC7C,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,eAAO,MAAM,aAAa,GAAI,OAAO,kBAAkB,4CAuBpD,CAAC"}
+{"version":3,"file":"input.d.ts","sourceRoot":"","sources":["../../../src/components/core/input.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,UAAU,UACR,SAAQ,KAAK,CAAC,iBAAiB,CAC7B,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAC3C,gBAAgB,CACjB;IACD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,eAAO,MAAM,KAAK,GAAI,OAAO,UAAU,4CAetC,CAAC;AAEF,eAAO,MAAM,WAAW,GAAI,OAAO,UAAU,4CAoB5C,CAAC;AAEF,eAAO,MAAM,WAAW,GAAI,OAAO,UAAU,4CAW5C,CAAC;AAEF,UAAU,kBAAmB,SAAQ,UAAU;IAC7C,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,eAAO,MAAM,aAAa,GAAI,OAAO,kBAAkB,4CAwBpD,CAAC"}

package/dist/components/core/input.js

@@ -14,5 +14,5 @@ const SelectInput = (props) => ((0, jsx_runtime_1.jsxs)("div", { children: [prop
 exports.SelectInput = SelectInput;
 const SearchInput = (props) => ((0, jsx_runtime_1.jsxs)("div", { className: "relative", children: [(0, jsx_runtime_1.jsx)("span", { className: "absolute inset-y-0 left-0 flex items-center pl-3", children: (0, jsx_runtime_1.jsx)(icons_1.SearchIcon, {}) }), (0, jsx_runtime_1.jsx)("input", { type: "search", className: "w-full py-2 pl-10 pr-4 text-gray-700 bg-white border border-gray-300 text-base rounded-md focus:outline-none focus:ring", ...props })] }));
 exports.SearchInput = SearchInput;
-const CheckboxInput = (props) => props.isLoading ? ((0, jsx_runtime_1.jsx)("svg", { width: "20px", height: "20px", viewBox: "0 0 20 20", version: "1.1", className: "inline text-gray-200 animate-spin dark:text-gray-600", children: (0, jsx_runtime_1.jsx)("g", { stroke: "none", strokeWidth: "1", fill: "none", fillRule: "evenodd", children: (0, jsx_runtime_1.jsx)("g", { fill: "#212121", fillRule: "nonzero", children: (0, jsx_runtime_1.jsx)("path", { d: "M10,3 C6.13401,3 3,6.13401 3,10 C3,10.2761 2.77614,10.5 2.5,10.5 C2.22386,10.5 2,10.2761 2,10 C2,5.58172 5.58172,2 10,2 C14.4183,2 18,5.58172 18,10 C18,14.4183 14.4183,18 10,18 C9.72386,18 9.5,17.7761 9.5,17.5 C9.5,17.2239 9.72386,17 10,17 C13.866,17 17,13.866 17,10 C17,6.13401 13.866,3 10,3 Z" }) }) }) })) : ((0, jsx_runtime_1.jsx)("input", { type: "checkbox", className: "w-5 h-5 border-gray-100 focus:outline-none focus:ring focus:ring-blue-300 focus:ring-opacity-80", name: props.name, checked: props.checked, onChange: props.onChange }));
+const CheckboxInput = (props) => props.isLoading ? ((0, jsx_runtime_1.jsx)("svg", { width: "20px", height: "20px", viewBox: "0 0 20 20", version: "1.1", className: "inline text-gray-200 animate-spin dark:text-gray-600", children: (0, jsx_runtime_1.jsx)("g", { stroke: "none", strokeWidth: "1", fill: "none", fillRule: "evenodd", children: (0, jsx_runtime_1.jsx)("g", { fill: "#212121", fillRule: "nonzero", children: (0, jsx_runtime_1.jsx)("path", { d: "M10,3 C6.13401,3 3,6.13401 3,10 C3,10.2761 2.77614,10.5 2.5,10.5 C2.22386,10.5 2,10.2761 2,10 C2,5.58172 5.58172,2 10,2 C14.4183,2 18,5.58172 18,10 C18,14.4183 14.4183,18 10,18 C9.72386,18 9.5,17.7761 9.5,17.5 C9.5,17.2239 9.72386,17 10,17 C13.866,17 17,13.866 17,10 C17,6.13401 13.866,3 10,3 Z" }) }) }) })) : ((0, jsx_runtime_1.jsx)("input", { type: "checkbox", className: "w-5 h-5 border-gray-100 focus:outline-none focus:ring focus:ring-blue-300 focus:ring-opacity-80 disabled:opacity-50 disabled:cursor-not-allowed", name: props.name, checked: props.checked, onChange: props.onChange, disabled: props.disabled }));
 exports.CheckboxInput = CheckboxInput;

package/dist/components/dualMap/MapLayerCard.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+import { GeoserverLayer } from "../../interfaces";
+interface MapLayerCardProps {
+    layer: GeoserverLayer;
+}
+export default function MapLayerCard({ layer, }: MapLayerCardProps): React.ReactElement;
+export {};
+//# sourceMappingURL=MapLayerCard.d.ts.map

package/dist/components/dualMap/MapLayerCard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MapLayerCard.d.ts","sourceRoot":"","sources":["../../../src/components/dualMap/MapLayerCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4B,MAAM,OAAO,CAAC;AACjD,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAIlD,UAAU,iBAAiB;IACzB,KAAK,EAAE,cAAc,CAAC;CACvB;AA2HD,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,EACnC,KAAK,GACN,EAAE,iBAAiB,GAAG,KAAK,CAAC,YAAY,CAwGxC"}

package/dist/components/dualMap/MapLayerCard.js

@@ -0,0 +1,68 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = MapLayerCard;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const core_1 = require("../core");
+const use_layers_1 = __importDefault(require("../../hooks/use-layers"));
+function LegendHeader({ isOpen, onToggle, }) {
+    return ((0, jsx_runtime_1.jsxs)("button", { type: "button", onClick: onToggle, className: "flex w-fit items-center  gap-1 rounded hover:bg-gray-100  py-0.5 px-1 transition-colors", "aria-expanded": isOpen, "aria-label": isOpen ? "Collapse legend" : "Expand legend", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-[10px] font-semibold text-gray-700", children: "Legend" }), (0, jsx_runtime_1.jsx)("span", { className: "shrink-0 w-3 h-3 flex items-center justify-center text-gray-600", children: isOpen ? (0, jsx_runtime_1.jsx)(core_1.UpIcon, {}) : (0, jsx_runtime_1.jsx)(core_1.DownIcon, {}) })] }));
+}
+function CardLegend({ layer }) {
+    const { mp, layer: layerContext } = (0, use_layers_1.default)();
+    const [legendOpen, setLegendOpen] = (0, react_1.useState)(true);
+    const styleIndex = layer.data?.styleIndex;
+    const currentStyle = typeof styleIndex === "number" && layer.data?.styles
+        ? layer.data.styles[styleIndex]
+        : undefined;
+    const layerType = layer.source?.type;
+    const baseLayerId = layer.id.replace(/-style-\d+$/, "") || layer.id;
+    // Vector: legend from style stops (fill-color or circle-color)
+    const vectorStops = (0, react_1.useMemo)(() => currentStyle?.colors?.paint?.["fill-color"]?.stops ||
+        currentStyle?.colors?.paint?.["circle-color"]?.stops ||
+        [], [currentStyle]);
+    if (layerType === "grid") {
+        const legendInfo = layerContext.gridLegends?.[baseLayerId];
+        if (!legendInfo?.stops?.length)
+            return null;
+        return ((0, jsx_runtime_1.jsxs)("div", { className: "mt-1.5 pt-1.5 border-t border-gray-200", children: [(0, jsx_runtime_1.jsx)(LegendHeader, { isOpen: legendOpen, onToggle: () => setLegendOpen((o) => !o) }), legendOpen && ((0, jsx_runtime_1.jsx)("div", { className: "max-h-32 overflow-y-auto mt-1", children: (0, jsx_runtime_1.jsxs)("ul", { className: "space-y-0.5 list-none p-0 m-0", children: [legendInfo.stops.map(([stop, color], index, stopsArr) => {
+                                const prevStop = (stopsArr[index - 1] || [0])[0];
+                                if (prevStop === stop)
+                                    return null;
+                                return ((0, jsx_runtime_1.jsxs)("li", { className: "flex gap-1.5 items-center text-[10px]", children: [(0, jsx_runtime_1.jsx)("span", { className: "shrink-0 w-2.5 h-2.5 rounded-full border border-gray-300", style: { backgroundColor: color } }), (0, jsx_runtime_1.jsxs)("span", { className: "text-gray-700 truncate", children: [prevStop, " \u2013 ", stop] })] }, `${stop}-${color}`));
+                            }), (0, jsx_runtime_1.jsxs)("li", { className: "text-[10px] text-gray-500 mt-0.5", children: ["1 sq = ", legendInfo.squareSize, "\u00D7", legendInfo.squareSize, " km"] })] }) }))] }));
+    }
+    if (layerType === "raster" && mp?.geoserver?.endpoint) {
+        return ((0, jsx_runtime_1.jsxs)("div", { className: "mt-1.5 pt-1.5 border-t border-gray-200", children: [(0, jsx_runtime_1.jsx)(LegendHeader, { isOpen: legendOpen, onToggle: () => setLegendOpen((o) => !o) }), legendOpen && ((0, jsx_runtime_1.jsx)("div", { className: "max-h-32 overflow-y-auto mt-1", children: (0, jsx_runtime_1.jsx)("img", { className: "max-w-full h-auto max-h-16 object-contain", src: `${mp.geoserver.endpoint}/wms?REQUEST=GetLegendGraphic&VERSION=1.0.0&WIDTH=20&HEIGHT=20&STRICT=false&layer=biodiv:${baseLayerId}`, alt: "" }) }))] }));
+    }
+    if (vectorStops.length > 0) {
+        return ((0, jsx_runtime_1.jsxs)("div", { className: "mt-1.5 pt-1.5 border-t border-gray-200", children: [(0, jsx_runtime_1.jsx)(LegendHeader, { isOpen: legendOpen, onToggle: () => setLegendOpen((o) => !o) }), legendOpen && ((0, jsx_runtime_1.jsx)("div", { className: "max-h-32 overflow-y-auto mt-1", children: (0, jsx_runtime_1.jsx)("ul", { className: "space-y-0.5 list-none p-0 m-0", children: vectorStops.map(([title, color]) => ((0, jsx_runtime_1.jsxs)("li", { className: "flex gap-1.5 items-center text-[10px]", children: [(0, jsx_runtime_1.jsx)("span", { className: "shrink-0 w-2.5 h-2.5 rounded-full border border-gray-300", style: { backgroundColor: color } }), (0, jsx_runtime_1.jsx)("span", { className: "text-gray-700 truncate", children: String(title) })] }, String(color)))) }) }))] }));
+    }
+    return null;
+}
+function MapLayerCard({ layer, }) {
+    const [isCollapsed, setIsCollapsed] = (0, react_1.useState)(false);
+    const [showFullDesc, setShowFullDesc] = (0, react_1.useState)(false);
+    const styleIndex = layer.data?.styleIndex;
+    const currentStyle = typeof styleIndex === "number" && layer.data?.styles
+        ? layer.data.styles[styleIndex]
+        : undefined;
+    const attributeLabel = currentStyle?.styleTitle ||
+        currentStyle?.styleName;
+    return ((0, jsx_runtime_1.jsx)("div", { className: `absolute bottom-3 left-3 z-40 bg-white/95 rounded-md shadow border border-gray-200 overflow-hidden transition-all duration-200 ${isCollapsed ? "w-8 h-8" : "w-56 py-1.5 px-2"}`, children: isCollapsed ? ((0, jsx_runtime_1.jsx)("button", { type: "button", className: "flex h-full w-full items-center justify-center hover:bg-gray-100", onClick: () => setIsCollapsed(false), "aria-label": "Expand layer info", children: (0, jsx_runtime_1.jsx)(core_1.UpIcon, {}) })) : ((0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col min-w-0", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-start gap-1 min-w-0", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col flex-1 min-w-0 space-y-0.5", children: [(0, jsx_runtime_1.jsxs)("p", { className: "text-[11px] text-gray-600 truncate", children: [(0, jsx_runtime_1.jsx)("span", { className: "font-semibold text-gray-800", children: "Layer:" }), " ", (0, jsx_runtime_1.jsx)("span", { className: "text-gray-900", children: layer.title })] }), attributeLabel && ((0, jsx_runtime_1.jsxs)("p", { className: "text-[11px] text-gray-600 truncate", children: [(0, jsx_runtime_1.jsx)("span", { className: "font-semibold text-gray-800", children: "Attribute:" }), " ", (0, jsx_runtime_1.jsx)("span", { className: "text-gray-900", children: attributeLabel })] }))] }), (0, jsx_runtime_1.jsx)("button", { type: "button", className: "shrink-0 p-1 rounded hover:bg-gray-100 transition-colors", onClick: () => setIsCollapsed(true), "aria-label": "Collapse layer info", children: (0, jsx_runtime_1.jsx)(core_1.DownIcon, {}) })] }), (0, jsx_runtime_1.jsx)(CardLegend, { layer: layer }), (() => {
+                    const raw = layer.description || "";
+                    if (!raw) {
+                        return null;
+                    }
+                    const maxPreviewChars = 60;
+                    const isLong = raw.length > maxPreviewChars;
+                    const fullText = raw;
+                    const previewBody = isLong
+                        ? fullText.slice(0, maxPreviewChars - 3)
+                        : fullText;
+                    return ((0, jsx_runtime_1.jsx)("p", { className: "mt-0.5 text-xs leading-snug text-gray-600", children: !isLong ? (fullText) : showFullDesc ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [fullText, " ", (0, jsx_runtime_1.jsx)("button", { type: "button", className: "inline text-[11px] text-blue-600 hover:underline", onClick: () => setShowFullDesc(false), "aria-label": "See less", children: "see less" })] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [previewBody, " ", (0, jsx_runtime_1.jsx)("button", { type: "button", className: "inline text-[11px] text-blue-600 hover:underline", onClick: () => setShowFullDesc(true), "aria-label": "See more", children: "see more" })] })) }));
+                })()] })) }));
+}

package/dist/components/dualMap/index.d.ts

@@ -1,2 +1,3 @@
-export default function DualMap(): import("react/jsx-runtime").JSX.Element;
+import { JSX } from "react";
+export default function DualMap(): JSX.Element;
 //# sourceMappingURL=index.d.ts.map

package/dist/components/dualMap/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/dualMap/index.tsx"],"names":[],"mappings":"AAeA,MAAM,CAAC,OAAO,UAAU,OAAO,4CA4H9B"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/dualMap/index.tsx"],"names":[],"mappings":"AAEA,OAAc,EAAE,GAAG,EAAgC,MAAM,OAAO,CAAC;AA4BjE,MAAM,CAAC,OAAO,UAAU,OAAO,IAAI,GAAG,CAAC,OAAO,CAkW7C"}

package/dist/components/dualMap/index.js

@@ -45,70 +45,233 @@ const map_common_1 = require("@metastringfoundation/map-common");
 const use_layers_1 = __importDefault(require("../../hooks/use-layers"));
 const infobar_1 = __importDefault(require("../infobar"));
 const layers_1 = require("../map/layers");
-const markers_list_1 = __importDefault(require("../map/markers-list"));
 const popup_1 = __importDefault(require("../map/popup"));
+const MapLayerCard_1 = __importDefault(require("./MapLayerCard"));
 const NavControl = maplibre_1.NavigationControl;
 function DualMap() {
     const { mp, layer, hover, query } = (0, use_layers_1.default)();
-    const viewState = (0, react_1.useMemo)(() => mp.defaultViewState || map_common_1.defaultViewState, [mp.defaultViewState]);
-    const [coordsLeft, setCoordsLeft] = (0, react_1.useState)();
-    const [coordsRight, setCoordsRight] = (0, react_1.useState)();
-    // handlers
-    // @ts-ignore
-    const onLeftClick = (e) => query.setClickedLngLat(e.lngLat);
-    // @ts-ignore
-    const onRightClick = (e) => query.setClickedLngLat(e.lngLat);
-    // @ts-ignore
-    const onLeftMouseMove = (e) => {
-        setCoordsLeft(e.lngLat);
+    const initialViewState = (0, react_1.useMemo)(() => mp.defaultViewState ?? map_common_1.defaultViewState, [mp.defaultViewState]);
+    // Fetch styles for all checked attributes when entering compare mode
+    (0, react_1.useEffect)(() => {
+        const checkedAttrs = layer.checkedAttributes;
+        if (!checkedAttrs || checkedAttrs.size === 0)
+            return;
+        const selectedIdsSet = new Set(layer.selectedLayers?.map((l) => l.id) || []);
+        // Fetch style for each checked attribute
+        for (const attrKey of checkedAttrs) {
+            const [layerId, styleIndexStr] = attrKey.split("-");
+            if (!layerId || !styleIndexStr) {
+                continue;
+            }
+            const styleIndex = parseInt(styleIndexStr, 10);
+            // Only fetch for currently selected layers
+            if (!selectedIdsSet.has(layerId)) {
+                continue;
+            }
+            // Find the layer
+            const baseLayer = layer.selectedLayers?.find(l => l.id === layerId);
+            if (!baseLayer)
+                continue;
+            // Check if style data is already loaded for this styleIndex
+            const styleData = baseLayer.data?.styles?.[styleIndex];
+            const hasColors = styleData?.colors;
+            // If style doesn't have colors loaded, fetch it without affecting main map
+            if (!hasColors) {
+                layer.fetchStyleForComparison(layerId, styleIndex);
+            }
+        }
+    }, [layer.checkedAttributes, layer.selectedLayers, layer.isCompareMode]);
+    /* --------------------------------------------------
+     * Panes (ALWAYS GeoserverLayer[])
+     * Uses checkedAttributes (format: "layerId-styleIndex") to create panes
+     * -------------------------------------------------- */
+    const panes = (0, react_1.useMemo)(() => {
+        // Use checkedAttributes if available, otherwise fallback to compareList or selectedLayers
+        const checkedAttrs = layer.checkedAttributes;
+        // If we have checked attributes, use them
+        if (checkedAttrs && checkedAttrs.size > 0) {
+            // Only use selected layers for comparison (not all layers)
+            const selectedIdsSet = new Set(layer.selectedLayers?.map((l) => l.id) || []);
+            // Build lookup from selected layers only
+            const byId = new Map();
+            for (const l of layer.selectedLayers || []) {
+                byId.set(l.id, l);
+            }
+            const result = [];
+            // Parse each checked attribute: "layerId-styleIndex"
+            for (const attrKey of checkedAttrs) {
+                const [layerId, styleIndexStr] = attrKey.split("-");
+                if (!layerId || !styleIndexStr) {
+                    continue;
+                }
+                const styleIndex = parseInt(styleIndexStr, 10);
+                // Only include attributes from currently selected layers
+                if (!selectedIdsSet.has(layerId)) {
+                    continue;
+                }
+                const baseLayer = byId.get(layerId);
+                if (baseLayer) {
+                    // Check if style data exists for this styleIndex
+                    const styleData = baseLayer.data?.styles?.[styleIndex];
+                    // Create a copy of the layer with the specific style applied
+                    // Use the latest layer data which should have the style loaded after updateLayerStyle
+                    const layerWithStyle = {
+                        ...baseLayer,
+                        id: `${baseLayer.id}-style-${styleIndex}`, // Unique ID for this pane
+                        data: {
+                            ...baseLayer.data,
+                            styleIndex: styleIndex,
+                            // Ensure we're using the style data for this index
+                            styles: baseLayer.data?.styles ? [...baseLayer.data.styles] : undefined,
+                        },
+                    };
+                    result.push(layerWithStyle);
+                }
+            }
+            return result;
+        }
+        // Fallback to compareList or selectedLayers (original behavior)
+        if (!layer.selectedLayers || layer.selectedLayers.length === 0) {
+            return [];
+        }
+        const ids = layer.compareList && layer.compareList.length > 0
+            ? layer.compareList
+            : layer.selectedLayers.map((l) => l.id);
+        // build lookup
+        const byId = new Map();
+        for (const l of layer.selectedLayers) {
+            byId.set(l.id, l);
+        }
+        const result = [];
+        for (const id of ids) {
+            const found = byId.get(id);
+            if (found) {
+                result.push(found);
+            }
+        }
+        return result;
+    }, [layer.checkedAttributes, layer.compareList, layer.selectedLayers, layer.all]);
+    /* --------------------------------------------------
+     * Hover per pane
+     * -------------------------------------------------- */
+    const [coordsByPane, setCoordsByPane] = (0, react_1.useState)({});
+    const onMouseMove = (paneId) => (e) => {
+        if (!e.lngLat)
+            return;
+        setCoordsByPane((prev) => ({
+            ...prev,
+            [paneId]: e.lngLat,
+        }));
         hover.onHover(e);
     };
-    // @ts-ignore
-    const onRightMouseMove = (e) => {
-        setCoordsRight(e.lngLat);
-        hover.onHover(e);
+    const onClick = (e) => {
+        if (e.lngLat) {
+            query.setClickedLngLat(e.lngLat);
+        }
     };
-    const compareList = layer?.compareList || [];
-    const selectedLayers = layer?.selectedLayers || [];
-    const [leftCompareId, rightCompareId] = (0, react_1.useMemo)(() => {
-        if (compareList && compareList.length >= 2) {
-            // most recent two (assumes newest at index 0)
-            return [compareList[0], compareList[1]];
+    /* --------------------------------------------------
+     * Layout math
+     * -------------------------------------------------- */
+    const layout = (0, react_1.useMemo)(() => {
+        const count = panes.length;
+        if (count === 1)
+            return { cols: 1, rows: 1 };
+        if (count === 2)
+            return { cols: 2, rows: 1 };
+        if (count === 3)
+            return { cols: 2, rows: 2 };
+        return { cols: 2, rows: Math.ceil(count / 2) };
+    }, [panes.length]);
+    /* --------------------------------------------------
+     * Map renderer (pane is NEVER undefined)
+     * -------------------------------------------------- */
+    const renderMap = (pane) => ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(maplibre_1.default, { id: `map-${pane.id}`, initialViewState: initialViewState, style: { position: "absolute", inset: 0 }, mapStyle: layer.mapStyle, onClick: onClick, onMouseMove: onMouseMove(pane.id), children: [(0, jsx_runtime_1.jsx)(NavControl, { position: "top-right", showZoom: true, showCompass: true }), (0, jsx_runtime_1.jsx)(layers_1.MapLayer, { layer: pane }), (0, jsx_runtime_1.jsx)(popup_1.default, { coordinates: coordsByPane[pane.id] })] }), (0, jsx_runtime_1.jsx)(MapLayerCard_1.default, { layer: pane })] }));
+    /* --------------------------------------------------
+     * Pane rendering — 1–4 panes (grid layout)
+     * 2: [1 | 2]  3: 1 3 / 2 3 (3 full height right)  4: 1 3 / 2 4 (column-first)
+     * -------------------------------------------------- */
+    const renderPanes = () => {
+        const count = panes.length;
+        if (count === 3 && panes[0] && panes[1] && panes[2]) {
+            return [
+                (0, jsx_runtime_1.jsx)("div", { style: { gridColumn: 1, gridRow: 1, position: "relative" }, children: renderMap(panes[0]) }, panes[0].id),
+                (0, jsx_runtime_1.jsx)("div", { style: { gridColumn: 1, gridRow: 2, position: "relative" }, children: renderMap(panes[1]) }, panes[1].id),
+                (0, jsx_runtime_1.jsx)("div", { style: {
+                        gridColumn: 2,
+                        gridRow: "1 / -1",
+                        position: "relative",
+                    }, children: renderMap(panes[2]) }, panes[2].id),
+            ];
         }
-        // fallback: take first two selectedLayers' ids (if any)
-        const ids = selectedLayers.map((l) => l.id || null).filter(Boolean);
-        return [ids[0] || null, ids[1] || null];
-    }, [compareList, selectedLayers]);
-    // Filter the full selectedLayers list to get the layer objects for each side.
-    const leftLayersToRender = (0, react_1.useMemo)(() => {
-        if (!leftCompareId)
-            return [];
-        return selectedLayers.filter((l) => l.id === leftCompareId);
-    }, [selectedLayers, leftCompareId]);
-    const rightLayersToRender = (0, react_1.useMemo)(() => {
-        if (!rightCompareId)
+        return panes.map((pane) => ((0, jsx_runtime_1.jsx)("div", { style: { position: "relative" }, children: renderMap(pane) }, pane.id)));
+    };
+    /* --------------------------------------------------
+     * Layout mode: grid (1–4 panes) vs horizontal scroll (5+ panes)
+     * 5+ panes: first screen = 2×2 column-first (1 3 / 2 4); next screen(s) by chunk size.
+     * -------------------------------------------------- */
+    const useHorizontalScroll = panes.length > 4;
+    const PANES_PER_SCREEN = 4;
+    const paneChunks = (0, react_1.useMemo)(() => {
+        if (panes.length <= 4)
             return [];
-        return selectedLayers.filter((l) => l.id === rightCompareId);
-    }, [selectedLayers, rightCompareId]);
-    return ((0, jsx_runtime_1.jsxs)("div", { style: {
-            display: "grid",
-            gridTemplateColumns: "1fr 1fr",
-            width: "100%",
-            height: "100vh", // fixed viewport height
-            overflow: "hidden",
-        }, children: [layer.selectedFeatures?.length > 0 && (0, jsx_runtime_1.jsx)(infobar_1.default, {}), (0, jsx_runtime_1.jsx)("div", { style: {
-                    width: "100%",
-                    height: "100%",
-                    position: "relative",
-                    minHeight: 0, // <-- critical for grid/flex children
-                    overflow: "hidden",
-                }, children: (0, jsx_runtime_1.jsxs)(maplibre_1.default, { id: "map-left", cursor: "default", initialViewState: viewState, 
-                    // render the map absolutely so it doesn't affect layout size
-                    style: { position: "absolute", top: 0, left: 0, right: 0, bottom: 0 }, mapStyle: layer.mapStyle, onClick: onLeftClick, onMouseMove: onLeftMouseMove, children: [(0, jsx_runtime_1.jsx)(NavControl, { position: "top-right", showZoom: true, showCompass: true }), (0, jsx_runtime_1.jsx)(markers_list_1.default, {}), leftLayersToRender?.[0] && ((0, jsx_runtime_1.jsx)(layers_1.MapLayer, { layer: leftLayersToRender[0], beforeId: undefined })), (0, jsx_runtime_1.jsx)(popup_1.default, { coordinates: coordsLeft }, "popup-left")] }) }), (0, jsx_runtime_1.jsx)("div", { style: {
+        const chunks = [];
+        chunks.push(panes.slice(0, 4));
+        for (let i = 4; i < panes.length; i += PANES_PER_SCREEN) {
+            chunks.push(panes.slice(i, i + PANES_PER_SCREEN));
+        }
+        return chunks;
+    }, [panes]);
+    /* --------------------------------------------------
+     * Render
+     * -------------------------------------------------- */
+    return ((0, jsx_runtime_1.jsxs)("div", { style: { height: "100vh", overflow: "hidden", position: "relative" }, children: [(0, jsx_runtime_1.jsx)("button", { onClick: () => layer.setCompareMode(false), className: "absolute top-4 left-4 z-50 px-3 py-2 bg-red-600 hover:bg-red-700 text-white rounded-lg shadow-md text-sm flex items-center gap-2 font-semibold", title: "", children: (0, jsx_runtime_1.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "3", strokeLinecap: "round", strokeLinejoin: "round", children: [(0, jsx_runtime_1.jsx)("path", { d: "M18 6 6 18" }), (0, jsx_runtime_1.jsx)("path", { d: "m6 6 12 12" })] }) }), layer.selectedFeatures && layer.selectedFeatures.length > 0 && ((0, jsx_runtime_1.jsx)(infobar_1.default, {})), useHorizontalScroll ? ((0, jsx_runtime_1.jsx)("div", { style: {
+                    display: "flex",
+                    flexDirection: "row",
+                    overflowX: "auto",
+                    overflowY: "hidden",
+                    height: "100vh",
                     width: "100%",
-                    height: "100%",
-                    position: "relative",
-                    minHeight: 0, // <-- critical
-                    overflow: "hidden",
-                }, children: (0, jsx_runtime_1.jsxs)(maplibre_1.default, { id: "map-right", cursor: "default", initialViewState: viewState, style: { position: "absolute", top: 0, left: 0, right: 0, bottom: 0 }, mapStyle: layer.mapStyle, onClick: onRightClick, onMouseMove: onRightMouseMove, children: [(0, jsx_runtime_1.jsx)(NavControl, { position: "top-right", showZoom: true, showCompass: true }), (0, jsx_runtime_1.jsx)(markers_list_1.default, {}), rightLayersToRender?.[0] && ((0, jsx_runtime_1.jsx)(layers_1.MapLayer, { layer: rightLayersToRender[0], beforeId: undefined })), (0, jsx_runtime_1.jsx)(popup_1.default, { coordinates: coordsRight }, "popup-right")] }) })] }));
+                }, children: paneChunks.map((chunk, chunkIndex) => {
+                    const len = chunk.length;
+                    const isFirstChunk = chunkIndex === 0;
+                    const chunkWidthVw = len === 1 || len === 2 ? 50 : 100;
+                    const gridStyle = {
+                        flex: `0 0 ${chunkWidthVw}vw`,
+                        minWidth: `${chunkWidthVw}vw`,
+                        height: "100%",
+                        display: "grid",
+                        gridTemplateColumns: len === 1 || len === 2 ? "1fr" : "1fr 1fr",
+                        gridTemplateRows: len === 2 ? "1fr 1fr" : len === 3 || len === 4 ? "1fr 1fr" : "1fr",
+                        ...(len === 4 && isFirstChunk ? { gridAutoFlow: "column" } : {}),
+                    };
+                    const getPlacement = (paneIndex) => {
+                        if (len === 1) {
+                            return { gridColumn: 1, gridRow: "1 / -1" };
+                        }
+                        if (len === 2) {
+                            return { gridColumn: 1, gridRow: paneIndex + 1 };
+                        }
+                        if (len === 3) {
+                            if (paneIndex === 0)
+                                return { gridColumn: 1, gridRow: 1 };
+                            if (paneIndex === 1)
+                                return { gridColumn: 1, gridRow: 2 };
+                            return { gridColumn: 2, gridRow: "1 / -1" };
+                        }
+                        if (len === 4)
+                            return {};
+                        return {};
+                    };
+                    return ((0, jsx_runtime_1.jsx)("div", { style: gridStyle, children: chunk.map((pane, paneIndex) => ((0, jsx_runtime_1.jsx)("div", { style: {
+                                position: "relative",
+                                minHeight: 0,
+                                ...getPlacement(paneIndex),
+                            }, children: renderMap(pane) }, pane.id))) }, chunkIndex));
+                }) })) : ((0, jsx_runtime_1.jsx)("div", { style: {
+                    display: "grid",
+                    gridTemplateColumns: `repeat(${layout.cols}, 1fr)`,
+                    gridTemplateRows: `repeat(${layout.rows}, ${100 / layout.rows}vh)`,
+                    height: "100vh",
+                    ...(panes.length === 4 ? { gridAutoFlow: "column" } : {}),
+                }, children: renderPanes() }))] }));
 }

package/dist/components/map/compare-sidebar.d.ts

@@ -0,0 +1,2 @@
+export default function CompareSidebar(): import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=compare-sidebar.d.ts.map

package/dist/components/map/compare-sidebar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"compare-sidebar.d.ts","sourceRoot":"","sources":["../../../src/components/map/compare-sidebar.tsx"],"names":[],"mappings":"AAIA,MAAM,CAAC,OAAO,UAAU,cAAc,mDAuJrC"}

package/dist/components/map/compare-sidebar.js

@@ -0,0 +1,34 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = CompareSidebar;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const use_layers_1 = __importDefault(require("../../hooks/use-layers"));
+const core_1 = require("../core");
+function CompareSidebar() {
+    const { layer } = (0, use_layers_1.default)();
+    const [isOpen, setIsOpen] = (0, react_1.useState)(false);
+    const compareList = layer?.compareList || [];
+    const handleRemoveFromComparison = (id) => {
+        layer.setCompareLayer(id, false);
+    };
+    const handleClearAll = () => {
+        compareList.forEach((id) => {
+            layer.setCompareLayer(id, false);
+        });
+    };
+    const toggleOpen = () => setIsOpen(!isOpen);
+    // Show button if there are any layers in comparison OR if sidebar is open
+    if (compareList.length === 0 && !isOpen) {
+        return null;
+    }
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: !isOpen ? ((0, jsx_runtime_1.jsxs)("button", { onClick: toggleOpen, type: "button", className: "absolute left-4 bg-white rounded-lg shadow-lg flex items-center gap-2 font-medium hover:bg-gray-50 transition-colors border border-gray-200 px-4 py-3", style: { top: '60px', zIndex: 60 }, children: [(0, jsx_runtime_1.jsxs)("svg", { width: "18", height: "18", fill: "none", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", viewBox: "0 0 24 24", className: "text-green-600", children: [(0, jsx_runtime_1.jsx)("path", { d: "M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3" }), (0, jsx_runtime_1.jsx)("line", { x1: "12", y1: "2", x2: "12", y2: "22" }), (0, jsx_runtime_1.jsx)("line", { x1: "2", y1: "12", x2: "22", y2: "12" })] }), (0, jsx_runtime_1.jsx)("span", { children: "Compare" }), (0, jsx_runtime_1.jsx)("span", { className: "bg-green-100 text-green-700 px-2 py-0.5 rounded text-sm font-semibold", children: compareList.length })] })) : ((0, jsx_runtime_1.jsxs)("div", { className: "absolute top-0 right-0 bottom-0 left-0 md:right-auto md:top-4 md:left-4 md:bottom-4 bg-white rounded-lg shadow-md md:max-w-sm w-full z-20 overflow-hidden", children: [(0, jsx_runtime_1.jsx)(core_1.CloseButton, { onClick: toggleOpen }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col h-full", children: [(0, jsx_runtime_1.jsx)("div", { className: "flex items-center justify-between p-4 border-b", children: (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [(0, jsx_runtime_1.jsxs)("svg", { width: "18", height: "18", fill: "none", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", viewBox: "0 0 24 24", className: "text-green-600", children: [(0, jsx_runtime_1.jsx)("path", { d: "M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3" }), (0, jsx_runtime_1.jsx)("line", { x1: "12", y1: "2", x2: "12", y2: "22" }), (0, jsx_runtime_1.jsx)("line", { x1: "2", y1: "12", x2: "22", y2: "12" })] }), (0, jsx_runtime_1.jsx)("h2", { className: "text-lg font-semibold text-gray-800", children: "Map Comparison" })] }) }), (0, jsx_runtime_1.jsx)("div", { className: "flex-1 min-h-0 overflow-y-auto", children: (0, jsx_runtime_1.jsx)("div", { className: "flex flex-col gap-3 p-4", children: compareList.length > 0 ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between", children: [(0, jsx_runtime_1.jsxs)("p", { className: "text-sm text-gray-600", children: ["Comparing ", compareList.length, " ", compareList.length === 1 ? "layer" : "layers"] }), (0, jsx_runtime_1.jsx)(core_1.Button, { onClick: handleClearAll, className: "text-sm", children: "Clear All" })] }), (0, jsx_runtime_1.jsx)("div", { className: "flex flex-col gap-2", children: compareList.map((id) => {
+                                                const layerItem = layer.all.find((l) => l.id === id);
+                                                if (!layerItem)
+                                                    return null;
+                                                return ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between p-3 bg-gray-50 rounded-md border border-gray-200 hover:bg-gray-100 transition-colors", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex-1", children: [(0, jsx_runtime_1.jsx)("h4", { className: "font-medium text-gray-800", children: layerItem.title || layerItem.id }), layerItem.description && ((0, jsx_runtime_1.jsx)("p", { className: "text-sm text-gray-500 mt-1", children: layerItem.description }))] }), (0, jsx_runtime_1.jsx)(core_1.Button, { onClick: () => handleRemoveFromComparison(id), className: "ml-2 text-red-600 hover:text-red-700", children: "Remove" })] }, id));
+                                            }) })] })) : ((0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col items-center justify-center py-12 text-center", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-gray-400 mb-4", children: (0, jsx_runtime_1.jsxs)("svg", { width: "64", height: "64", fill: "none", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.5", viewBox: "0 0 24 24", children: [(0, jsx_runtime_1.jsx)("path", { d: "M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3" }), (0, jsx_runtime_1.jsx)("line", { x1: "12", y1: "2", x2: "12", y2: "22" }), (0, jsx_runtime_1.jsx)("line", { x1: "2", y1: "12", x2: "22", y2: "12" })] }) }), (0, jsx_runtime_1.jsx)("h3", { className: "text-lg font-semibold text-gray-700 mb-2", children: "No layers selected for comparison" }), (0, jsx_runtime_1.jsx)("p", { className: "text-sm text-gray-500 max-w-sm", children: "Select layers from the layers tab and use the \"Compare\" option to add them here for comparison." })] })) }) })] })] })) }));
+}

package/dist/components/map/compare.d.ts

@@ -0,0 +1,2 @@
+export default function MapCompare(): import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=compare.d.ts.map

package/dist/components/map/compare.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"compare.d.ts","sourceRoot":"","sources":["../../../src/components/map/compare.tsx"],"names":[],"mappings":"AAKA,MAAM,CAAC,OAAO,UAAU,UAAU,mDAoHjC"}

package/dist/components/map/compare.js

@@ -0,0 +1,42 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = MapCompare;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const maplibre_1 = require("react-map-gl/maplibre");
+const use_layers_1 = __importDefault(require("../../hooks/use-layers"));
+const core_1 = require("../core");
+function MapCompare() {
+    const { layer } = (0, use_layers_1.default)();
+    const { mapl } = (0, maplibre_1.useMap)();
+    const [isComparing, setIsComparing] = (0, react_1.useState)(false);
+    const compareList = layer?.compareList || [];
+    // Don't show if less than 2 layers in comparison
+    if (compareList.length < 2) {
+        return null;
+    }
+    const handleToggleCompare = () => {
+        setIsComparing(!isComparing);
+        // If starting comparison, sync view states
+        if (!isComparing && mapl) {
+            const mapInstance = Object.values(mapl).pop();
+            if (mapInstance) {
+                // Store current view state to sync later
+                const currentView = mapInstance.getCenter();
+                // You can add logic here to sync multiple map instances if needed
+            }
+        }
+    };
+    const handleExitCompare = () => {
+        setIsComparing(false);
+    };
+    return ((0, jsx_runtime_1.jsx)("div", { className: "absolute top-4 right-4 z-50 flex flex-col gap-2", style: { marginTop: '60px' }, children: !isComparing ? ((0, jsx_runtime_1.jsxs)("button", { onClick: handleToggleCompare, className: "px-4 py-2 bg-green-600 hover:bg-green-700 text-white rounded-lg shadow-lg flex items-center gap-2 font-medium cursor-pointer", children: [(0, jsx_runtime_1.jsxs)("svg", { width: "18", height: "18", fill: "none", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", viewBox: "0 0 24 24", children: [(0, jsx_runtime_1.jsx)("path", { d: "M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3" }), (0, jsx_runtime_1.jsx)("line", { x1: "12", y1: "2", x2: "12", y2: "22" }), (0, jsx_runtime_1.jsx)("line", { x1: "2", y1: "12", x2: "22", y2: "12" })] }), (0, jsx_runtime_1.jsx)("span", { children: "Compare Maps" }), (0, jsx_runtime_1.jsx)("span", { className: "bg-white/20 px-2 py-0.5 rounded text-sm", children: compareList.length })] })) : ((0, jsx_runtime_1.jsxs)("div", { className: "bg-white rounded-lg shadow-lg p-3 border border-gray-200", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between mb-2", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [(0, jsx_runtime_1.jsxs)("svg", { width: "16", height: "16", fill: "none", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", viewBox: "0 0 24 24", className: "text-green-600", children: [(0, jsx_runtime_1.jsx)("path", { d: "M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3" }), (0, jsx_runtime_1.jsx)("line", { x1: "12", y1: "2", x2: "12", y2: "22" }), (0, jsx_runtime_1.jsx)("line", { x1: "2", y1: "12", x2: "22", y2: "12" })] }), (0, jsx_runtime_1.jsxs)("span", { className: "font-semibold text-gray-800", children: ["Comparing ", compareList.length, " layers"] })] }), (0, jsx_runtime_1.jsx)(core_1.Button, { onClick: handleExitCompare, className: "text-gray-500 hover:text-gray-700 p-1", children: (0, jsx_runtime_1.jsx)("svg", { width: "18", height: "18", fill: "none", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", viewBox: "0 0 24 24", children: (0, jsx_runtime_1.jsx)("path", { d: "M18 6L6 18M6 6l12 12" }) }) })] }), (0, jsx_runtime_1.jsx)("div", { className: "text-xs text-gray-600 mb-2", children: "Use the DualMap view for side-by-side comparison" }), (0, jsx_runtime_1.jsx)("div", { className: "flex flex-col gap-1 max-h-40 overflow-y-auto", children: compareList.map((id) => {
+                        const layerItem = layer.all.find((l) => l.id === id);
+                        if (!layerItem)
+                            return null;
+                        return ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2 px-2 py-1 bg-gray-50 rounded text-sm", children: [(0, jsx_runtime_1.jsx)("div", { className: "w-2 h-2 rounded-full bg-green-500" }), (0, jsx_runtime_1.jsx)("span", { className: "text-gray-700 truncate", children: layerItem.title || id })] }, id));
+                    }) })] })) }));
+}

package/dist/components/map/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/map/index.tsx"],"names":[],"mappings":"AAaA,MAAM,CAAC,OAAO,UAAU,GAAG,4CA2C1B"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/map/index.tsx"],"names":[],"mappings":"AAcA,MAAM,CAAC,OAAO,UAAU,GAAG,4CAuD1B"}

package/dist/components/map/index.js

@@ -41,6 +41,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const map_common_1 = require("@metastringfoundation/map-common");
 const react_1 = require("react");
 const maplibre_1 = __importStar(require("react-map-gl/maplibre"));
+const map_draw_1 = require("@metastringfoundation/map-draw");
 const use_layers_1 = __importDefault(require("../../hooks/use-layers"));
 const infobar_1 = __importDefault(require("../infobar"));
 const sidebar_1 = __importDefault(require("../sidebar"));
@@ -50,6 +51,13 @@ const popup_1 = __importDefault(require("./popup"));
 const NavControl = maplibre_1.NavigationControl;
 function Map() {
     const { mp, layer, hover, query } = (0, use_layers_1.default)();
+    const [mapInstance, setMapInstance] = (0, react_1.useState)(null);
+    (0, map_draw_1.useMapDraw)({
+        map: mapInstance,
+        layer: {
+            selectedLayers: layer.selectedLayers,
+        },
+    });
     const [coordinates, setCoordinates] = (0, react_1.useState)();
     const viewState = (0, react_1.useMemo)(() => mp.defaultViewState || map_common_1.defaultViewState, [mp.defaultViewState]);
     // @ts-ignore
@@ -59,7 +67,12 @@ function Map() {
         setCoordinates(event.lngLat);
         hover.onHover(event);
     };
-    return ((0, jsx_runtime_1.jsxs)("div", { className: "w-full h-screen overflow-hidden", children: [mp.loadToC && (0, jsx_runtime_1.jsx)(sidebar_1.default, {}), layer.selectedFeatures?.length > 0 && (0, jsx_runtime_1.jsx)(infobar_1.default, {}), (0, jsx_runtime_1.jsxs)(maplibre_1.default, { id: "mapl", cursor: "default", initialViewState: viewState, style: { width: "100%", height: "100%" }, mapStyle: layer.mapStyle, onClick: onMapClick, onMouseMove: handleOnMouseMove, children: [(0, jsx_runtime_1.jsx)(NavControl, { position: "top-right", showZoom: true, showCompass: true }), (0, jsx_runtime_1.jsx)(markers_list_1.default, {}), layer.selectedLayers.map((_l, index) => {
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "w-full h-screen overflow-hidden", children: [mp.loadToC && (0, jsx_runtime_1.jsx)(sidebar_1.default, {}), layer.selectedFeatures?.length > 0 && (0, jsx_runtime_1.jsx)(infobar_1.default, {}), (0, jsx_runtime_1.jsxs)(maplibre_1.default, { id: "mapl", cursor: "default", initialViewState: viewState, style: { width: "100%", height: "100%" }, mapStyle: layer.mapStyle, onClick: onMapClick, onMouseMove: handleOnMouseMove, 
+                //@ts-ignore
+                onLoad: (e) => {
+                    // ✅ e.target is the real MapLibre Map
+                    setMapInstance(e.target);
+                }, children: [(0, jsx_runtime_1.jsx)(NavControl, { position: "top-right", showZoom: true, showCompass: true }), (0, jsx_runtime_1.jsx)(markers_list_1.default, {}), layer.selectedLayers.map((_l, index) => {
                         const beforeId = index > 0 ? layer.selectedIds[index - 1] : undefined;
                         return (0, jsx_runtime_1.jsx)(layers_1.MapLayer, { layer: _l, beforeId: beforeId }, _l.id);
                     }), (0, jsx_runtime_1.jsx)(popup_1.default, { coordinates: coordinates }, "popup")] })] }));

package/dist/components/map/layers/grid/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/map/layers/grid/index.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAGxD,MAAM,CAAC,OAAO,UAAU,SAAS,CAAC,EAChC,IAAI,EACJ,QAAQ,GACT,EAAE;IACD,IAAI,EAAE,cAAc,CAAC;IACrB,QAAQ,CAAC,EAAC,MAAM,CAAA;CACjB,2CAoCA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/map/layers/grid/index.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAGxD,MAAM,CAAC,OAAO,UAAU,SAAS,CAAC,EAChC,IAAI,EACJ,QAAQ,GACT,EAAE;IACD,IAAI,EAAE,cAAc,CAAC;IACrB,QAAQ,CAAC,EAAC,MAAM,CAAA;CACjB,2CAgDA"}