@metastringfoundation/map-list 0.1.0 → 0.1.1

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

@@ -0,0 +1,7 @@
+interface LayerCompareControlProps {
+    compare: boolean;
+    setCompare: (value: boolean) => void;
+}
+export default function LayerCompareControl({ compare, setCompare, }: LayerCompareControlProps): import("react/jsx-runtime").JSX.Element | null;
+export {};
+//# sourceMappingURL=LayerCompareControl.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"LayerCompareControl.d.ts","sourceRoot":"","sources":["../../../src/components/Handler/LayerCompareControl.tsx"],"names":[],"mappings":"AAKA,UAAU,wBAAwB;IAChC,OAAO,EAAE,OAAO,CAAC;IACjB,UAAU,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;CACtC;AAED,MAAM,CAAC,OAAO,UAAU,mBAAmB,CAAC,EAC1C,OAAO,EACP,UAAU,GACX,EAAE,wBAAwB,kDAoD1B"}

package/dist/components/Handler/LayerCompareControl.js

@@ -0,0 +1,18 @@
+"use client";
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = LayerCompareControl;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const use_layers_1 = __importDefault(require("../../hooks/use-layers"));
+function LayerCompareControl({ compare, setCompare, }) {
+    const { layer } = (0, use_layers_1.default)();
+    // Defensive checks so it never crashes
+    const compareList = layer?.compareList || [];
+    // Hide component completely if fewer than 2 compare layers
+    if (compareList.length < 2)
+        return null;
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "absolute bottom-4 right-4 z-50 flex gap-2", children: [!compare && ((0, jsx_runtime_1.jsxs)("button", { onClick: () => setCompare(true), className: "px-4 py-2 bg-green-700 hover:bg-green-800 \n                     text-white rounded-lg shadow-md text-md flex items-center gap-1 font-semibold", children: ["Compare", " ", (0, jsx_runtime_1.jsx)("span", { className: "bg-white/5 px-2 py-1 rounded text-sm", children: compareList.length })] })), compare && ((0, jsx_runtime_1.jsxs)("button", { onClick: () => setCompare(false), className: "px-4 py-2 bg-green-700 hover:bg-green-800 \n                     text-white rounded-lg shadow-md text-md flex items-center gap-1 font-semibold", children: [(0, jsx_runtime_1.jsxs)("span", { className: "bg-white/5 px-1 py-1 rounded text-sm", 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: "3", strokeLinecap: "round", strokeLinejoin: "round", className: "lucide lucide-x-icon lucide-x", children: [(0, jsx_runtime_1.jsx)("path", { d: "M18 6 6 18" }), (0, jsx_runtime_1.jsx)("path", { d: "m6 6 12 12" })] }), " "] }), "Compare"] }))] }));
+}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/dualMap/index.tsx"],"names":[],"mappings":"AAeA,MAAM,CAAC,OAAO,UAAU,OAAO,4CA4H9B"}

package/dist/components/dualMap/index.js

@@ -0,0 +1,114 @@
+"use client";
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = DualMap;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const maplibre_1 = __importStar(require("react-map-gl/maplibre"));
+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 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);
+        hover.onHover(e);
+    };
+    // @ts-ignore
+    const onRightMouseMove = (e) => {
+        setCoordsRight(e.lngLat);
+        hover.onHover(e);
+    };
+    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]];
+        }
+        // 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 [];
+        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: {
+                    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")] }) })] }));
+}

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/map/layers/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAKrD,wBAAgB,QAAQ,CAAC,EACvB,KAAK,EACL,QAAQ,GACT,EAAE;IACD,KAAK,EAAE,cAAc,CAAC;IACtB,QAAQ,CAAC,EAAC,MAAM,CAAA;CACjB,kDAuBA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/map/layers/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAKrD,wBAAgB,QAAQ,CAAC,EACvB,KAAK,EACL,QAAQ,GACT,EAAE;IACD,KAAK,EAAE,cAAc,CAAC;IACtB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB,kDAsBA"}

package/dist/components/map/layers/index.js

@@ -6,22 +6,26 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.MapLayer = MapLayer;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const maplibre_1 = require("react-map-gl/maplibre");
+const grid_1 = __importDefault(require("./grid"));
+const vector_1 = __importDefault(require("./vector"));
 const raster_1 = __importDefault(require("./raster"));
 function MapLayer({ layer, beforeId, }) {
-    console.log(layer, "layer from MapLayer");
     console.log("layer.source.type", layer?.source?.type);
-    const { mapl } = (0, maplibre_1.useMap)();
-    if (!mapl) {
+    const maps = (0, maplibre_1.useMap)();
+    // if (!mapl) {
+    //   return null;
+    // }
+    const mapInstance = Object.values(maps).pop();
+    if (!mapInstance)
         return null;
+    switch (layer?.source?.type) {
+        case "vector":
+            return (0, jsx_runtime_1.jsx)(vector_1.default, { beforeId: beforeId, layer: layer });
+        case "grid":
+            return (0, jsx_runtime_1.jsx)(grid_1.default, { beforeId: beforeId, data: layer });
+        case "raster":
+            return (0, jsx_runtime_1.jsx)(raster_1.default, { beforeId: beforeId, data: layer });
+        default:
+            return (0, jsx_runtime_1.jsx)(vector_1.default, { beforeId: beforeId, layer: layer });
     }
-    // switch (layer?.source?.type) {
-    //   case "vector":
-    //     return <VectorLayer beforeId={beforeId} layer={layer} />;
-    //   case "grid":
-    //     return <GridLayer beforeId={beforeId} data={layer} />;
-    // case "raster":
-    return (0, jsx_runtime_1.jsx)(raster_1.default, { beforeId: beforeId, data: layer });
-    //   default:
-    //     return <VectorLayer beforeId={beforeId} layer={layer} />;
-    // }
 }

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/map/layers/raster/index.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAExD,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,EAClC,IAAI,EACJ,QAAQ,GACT,EAAE;IACD,IAAI,EAAE,cAAc,CAAC;IACrB,QAAQ,CAAC,EAAC,MAAM,CAAA;CACjB,2CA4BA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/map/layers/raster/index.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAExD,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,EAClC,IAAI,EACJ,QAAQ,GACT,EAAE;IACD,IAAI,EAAE,cAAc,CAAC;IACrB,QAAQ,CAAC,EAAC,MAAM,CAAA;CACjB,2CA8BA"}

package/dist/components/map/layers/raster/index.js

@@ -9,11 +9,9 @@ const maplibre_1 = require("react-map-gl/maplibre");
 const use_layers_1 = __importDefault(require("../../../../hooks/use-layers"));
 function RasterLayer({ data, beforeId, }) {
     const { mp } = (0, use_layers_1.default)();
-    return ((0, jsx_runtime_1.jsx)(maplibre_1.Source, { id: data.id, type: "raster", 
-        // tiles={[
-        //   `${mp?.geoserver?.endpoint}/wms?bbox={bbox-epsg-3857}&format=image/png&service=WMS&version=1.1.1&request=GetMap&srs=EPSG:3857&width=256&height=256&transparent=true&layers=biodiv:${data.id}`,
-        // ]}
-        tiles: [
-            `${mp?.geoserver?.endpoint}/wms?bbox={bbox-epsg-3857}&format=image/png&service=WMS&version=1.1.1&request=GetMap&srs=EPSG:3857&width=256&height=256&transparent=true&layers=metastring:kew`,
+    console.log(data, "datataatata");
+    return ((0, jsx_runtime_1.jsx)(maplibre_1.Source, { id: data.id, type: "raster", tiles: [
+            // @ts-ignore
+            `${mp?.geoserver?.endpoint}/wms?bbox={bbox-epsg-3857}&format=image/png&service=WMS&version=1.1.1&request=GetMap&srs=EPSG:3857&width=256&height=256&transparent=true&layers=metastring:${data.name}`,
         ], tileSize: 256, children: (0, jsx_runtime_1.jsx)(maplibre_1.Layer, { id: data.id, beforeId: beforeId, type: "raster", source: "biodiv", layout: { visibility: "visible" }, paint: {} }) }));
 }

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/map/layers/vector/index.tsx"],"names":[],"mappings":"AAmBA,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE;;;CAAA,2CA+B5D"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/map/layers/vector/index.tsx"],"names":[],"mappings":"AAmBA,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE;;;CAAA,2CAgC5D"}

package/dist/components/map/layers/vector/index.js

@@ -25,5 +25,6 @@ function VectorLayer({ layer: data, beforeId }) {
     const { layer } = (0, use_layers_1.default)();
     const layerProps = (0, react_1.useMemo)(() => data.data?.styles?.[data.data?.styleIndex]?.colors, [data, layer.selectedFeatures]);
     const highlightData = layer.selectedFeaturesId?.[data.id];
+    console.log(data.source, "data.source ....");
     return ((0, jsx_runtime_1.jsxs)(maplibre_1.Source, { ...data.source, children: [layerProps && (0, jsx_runtime_1.jsx)(maplibre_1.Layer, { beforeId: beforeId, ...layerProps }), highlightData && layerProps && ((0, jsx_runtime_1.jsx)(maplibre_1.Layer, { ...layerProps, beforeId: beforeId, id: `hl_${data.id}`, filter: ["in", constants_1.PROPERTY_ID, ...highlightData], type: layerProps.type === "fill" ? "line" : layerProps.type, paint: paint[layerProps.type] }))] }));
 }

package/dist/components/map/split-map/SplitMapComparision.d.ts

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

package/dist/components/map/split-map/SplitMapComparision.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SplitMapComparision.d.ts","sourceRoot":"","sources":["../../../../src/components/map/split-map/SplitMapComparision.tsx"],"names":[],"mappings":"AAgBA,MAAM,CAAC,OAAO,UAAU,WAAW,4CA6ElC"}

package/dist/components/map/split-map/SplitMapComparision.js

@@ -0,0 +1,78 @@
+// components/TwoMapsSame.tsx
+"use client";
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = TwoMapsSame;
+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 use_layers_1 = __importDefault(require("../../../hooks/use-layers"));
+const infobar_1 = __importDefault(require("../../infobar"));
+const sidebar_1 = __importDefault(require("../../sidebar"));
+const layers_1 = require("../layers");
+const markers_list_1 = __importDefault(require("../markers-list"));
+const popup_1 = __importDefault(require("../popup"));
+const NavControl = maplibre_1.NavigationControl;
+function TwoMapsSame() {
+    // single source of truth hook (same as your original Map)
+    const { mp, layer, hover, query } = (0, use_layers_1.default)();
+    // coordinates for popups — kept separate per map instance for clarity
+    const [coordsLeft, setCoordsLeft] = (0, react_1.useState)();
+    const [coordsRight, setCoordsRight] = (0, react_1.useState)();
+    const viewState = (0, react_1.useMemo)(() => mp.defaultViewState || map_common_1.defaultViewState, [mp.defaultViewState]);
+    // click handlers (reuse your query logic)
+    const onMapClick = (e) => query.setClickedLngLat(e.lngLat);
+    // mouse move handlers (separate so each map can show its own popup coordinates if needed)
+    const handleOnMouseMoveLeft = (event) => {
+        setCoordsLeft(event.lngLat);
+        hover.onHover(event);
+    };
+    const handleOnMouseMoveRight = (event) => {
+        setCoordsRight(event.lngLat);
+        hover.onHover(event);
+    };
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "w-full h-screen overflow-hidden flex", 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.jsx)("div", { className: "w-1/2 h-full relative border-r border-gray-200", children: (0, jsx_runtime_1.jsxs)(maplibre_1.default, { id: "map-left", cursor: "default", initialViewState: viewState, style: { width: "100%", height: "100%" }, mapStyle: layer.mapStyle, onClick: onMapClick, onMouseMove: handleOnMouseMoveLeft, 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 + "-L");
+                        }), (0, jsx_runtime_1.jsx)(popup_1.default, { coordinates: coordsLeft }, "popup-left")] }) }), (0, jsx_runtime_1.jsx)("div", { className: "w-1/2 h-full relative", children: (0, jsx_runtime_1.jsxs)(maplibre_1.default, { id: "map-right", cursor: "default", initialViewState: viewState, style: { width: "100%", height: "100%" }, mapStyle: layer.mapStyle, onClick: onMapClick, onMouseMove: handleOnMouseMoveRight, 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 + "-R");
+                        }), (0, jsx_runtime_1.jsx)(popup_1.default, { coordinates: coordsRight }, "popup-right")] }) })] }));
+}

package/dist/components/sidebar/common/layer-compare-addon.d.ts

@@ -0,0 +1,4 @@
+export default function LayerCompareAddon({ id }: {
+    id: string;
+}): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=layer-compare-addon.d.ts.map

package/dist/components/sidebar/common/layer-compare-addon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"layer-compare-addon.d.ts","sourceRoot":"","sources":["../../../../src/components/sidebar/common/layer-compare-addon.tsx"],"names":[],"mappings":"AAKA,MAAM,CAAC,OAAO,UAAU,iBAAiB,CAAC,EAAE,EAAE,EAAE,EAAE;IAAE,EAAE,EAAE,MAAM,CAAA;CAAE,2CAqB/D"}

package/dist/components/sidebar/common/layer-compare-addon.js

@@ -0,0 +1,17 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = LayerCompareAddon;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const use_layers_1 = __importDefault(require("../../../hooks/use-layers"));
+const core_1 = require("../../core");
+function LayerCompareAddon({ id }) {
+    const { layer } = (0, use_layers_1.default)();
+    const checked = Boolean(layer?.compareList?.includes(id));
+    const onToggle = () => {
+        layer.setCompareLayer(id, !checked);
+    };
+    return ((0, jsx_runtime_1.jsx)(core_1.Button, { children: (0, jsx_runtime_1.jsxs)("label", { className: "flex items-center gap-2 cursor-pointer select-none", children: [(0, jsx_runtime_1.jsx)("input", { type: "checkbox", className: "h-4 w-4 accent-green-700", checked: checked, onChange: onToggle }), (0, jsx_runtime_1.jsx)("span", { children: "Compare" })] }) }));
+}

package/dist/components/sidebar/common/layer-item.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"layer-item.d.ts","sourceRoot":"","sources":["../../../../src/components/sidebar/common/layer-item.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAwBrD,UAAU,cAAc;IACtB,IAAI,EAAE,cAAc,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,oDAAoD;IACpD,eAAe,CAAC,EAAE,GAAG,CAAC;IACtB,aAAa,CAAC,EAAE,GAAG,CAAC;CACrB;AAGD,MAAM,CAAC,OAAO,UAAU,SAAS,CAAC,EAChC,IAAI,EACJ,QAAQ,EACR,eAAe,EACf,aAAa,GACd,EAAE,cAAc,2CAyIhB"}
+{"version":3,"file":"layer-item.d.ts","sourceRoot":"","sources":["../../../../src/components/sidebar/common/layer-item.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAyBrD,UAAU,cAAc;IACtB,IAAI,EAAE,cAAc,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,oDAAoD;IACpD,eAAe,CAAC,EAAE,GAAG,CAAC;IACtB,aAAa,CAAC,EAAE,GAAG,CAAC;CACrB;AAED,MAAM,CAAC,OAAO,UAAU,SAAS,CAAC,EAChC,IAAI,EACJ,QAAQ,EACR,eAAe,EACf,aAAa,GACd,EAAE,cAAc,2CAqIhB"}

package/dist/components/sidebar/common/layer-item.js

@@ -15,6 +15,7 @@ const grid_legend_1 = __importDefault(require("./grid-legend"));
 const info_popover_1 = require("./info-popover");
 const layer_item_style_1 = __importDefault(require("./layer-item-style"));
 const opacity_handler_addon_1 = __importDefault(require("./opacity-handler-addon"));
+const layer_compare_addon_1 = __importDefault(require("./layer-compare-addon"));
 function LayerItem({ item, extended, dragHandleProps, dragHandleRef, }) {
     const { layer, query, mp, query: { setClickedLngLat }, setIsInfoBarOpen, } = (0, use_layers_1.default)();
     const [isAdded, setIsAdded] = (0, react_1.useState)(layer.selectedIds.includes(item.id));
@@ -55,5 +56,5 @@ function LayerItem({ item, extended, dragHandleProps, dragHandleRef, }) {
         mp?.onLayerDownload(item.id);
     };
     const handleOnZoom = () => layer?.zoomToExtent(item?.id);
-    return ((0, jsx_runtime_1.jsxs)("div", { className: "z-20 p-3 bg-white border-t border-gray-200", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex gap-3", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col items-center shrink-0", children: [(0, jsx_runtime_1.jsx)(core_1.CheckboxInput, { name: item.id, checked: isAdded, onChange: onToggleLayer, isLoading: isLoading }), extended && ((0, jsx_runtime_1.jsx)("div", { ref: dragHandleRef, ...dragHandleProps, className: "mt-1 w-6 text-center cursor-move", children: (0, jsx_runtime_1.jsx)(core_1.GrabberIcon, {}) }))] }), (0, jsx_runtime_1.jsx)("img", { className: "flex shrink-0 overflow-hidden h-16 w-16 p-1 mb-2 object-cover border border-gray-200 rounded", src: item.thumbnail || constants_1.FALLBACK_THUMB }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("div", { title: item.title, className: "mb-1 leading-tight", style: constants_1.overflowStyle, children: (0, jsx_runtime_1.jsx)(highlighter_1.Highlighted, { text: item.title, highlight: query.term }) }), (0, jsx_runtime_1.jsx)("p", { title: item.description, className: "text-gray-600 text-sm", style: constants_1.overflowStyle2, children: item.description })] })] }), (0, jsx_runtime_1.jsx)("div", { className: "pb-3", children: extended && (0, jsx_runtime_1.jsx)(opacity_handler_addon_1.default, {}) }), (0, jsx_runtime_1.jsxs)("div", { className: "flex justify-between", children: [(0, jsx_runtime_1.jsxs)(core_1.Button, { onClick: onDownloadLayer, disabled: !item.isDownloadable, children: [(0, jsx_runtime_1.jsx)(core_1.DownloadIcon, {}), " Download"] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex gap-3", children: [(0, jsx_runtime_1.jsx)(core_1.Button, { onClick: shareLayer, title: "Share", children: (0, jsx_runtime_1.jsx)(core_1.ShareIcon, {}) }), extended && ((0, jsx_runtime_1.jsx)(core_1.Button, { onClick: handleOnZoom, title: "Zoom To Extent", children: (0, jsx_runtime_1.jsx)(core_1.ZoomExtentIcon, {}) })), (0, jsx_runtime_1.jsx)(info_popover_1.PopoverWrapper, { item: item })] })] }), extended && (0, jsx_runtime_1.jsx)(layer_item_style_1.default, { item: item }), extended && item?.source?.type === "grid" && (0, jsx_runtime_1.jsx)(grid_legend_1.default, { item: item })] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "z-20 p-3 bg-white border-t border-gray-200", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex gap-2", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col items-center shrink-0", children: [(0, jsx_runtime_1.jsx)(core_1.CheckboxInput, { name: item.id, checked: isAdded, onChange: onToggleLayer, isLoading: isLoading }), extended && ((0, jsx_runtime_1.jsx)("div", { ref: dragHandleRef, ...dragHandleProps, className: "mt-1 w-6 text-center cursor-move", children: (0, jsx_runtime_1.jsx)(core_1.GrabberIcon, {}) }))] }), (0, jsx_runtime_1.jsx)("img", { className: "flex shrink-0 overflow-hidden h-16 w-16 p-1 mb-2 object-cover border border-gray-200 rounded", src: item.thumbnail || constants_1.FALLBACK_THUMB }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("div", { title: item.title, className: "mb-1 leading-tight", style: constants_1.overflowStyle, children: (0, jsx_runtime_1.jsx)(highlighter_1.Highlighted, { text: item.title, highlight: query.term }) }), (0, jsx_runtime_1.jsx)("p", { title: item.description, className: "text-gray-600 text-sm", style: constants_1.overflowStyle2, children: item.description })] })] }), (0, jsx_runtime_1.jsx)("div", { className: "pb-3", children: extended && (0, jsx_runtime_1.jsx)(opacity_handler_addon_1.default, {}) }), (0, jsx_runtime_1.jsxs)("div", { className: "flex justify-between", children: [extended && ((0, jsx_runtime_1.jsx)(layer_compare_addon_1.default, { id: item.id })), !extended && ((0, jsx_runtime_1.jsxs)(core_1.Button, { onClick: onDownloadLayer, disabled: !item.isDownloadable, children: [(0, jsx_runtime_1.jsx)(core_1.DownloadIcon, {}), " Download"] })), (0, jsx_runtime_1.jsxs)("div", { className: "flex gap-3", children: [(0, jsx_runtime_1.jsx)(core_1.Button, { onClick: shareLayer, title: "Share", children: (0, jsx_runtime_1.jsx)(core_1.ShareIcon, {}) }), extended && ((0, jsx_runtime_1.jsx)(core_1.Button, { onClick: handleOnZoom, title: "Zoom To Extent", children: (0, jsx_runtime_1.jsx)(core_1.ZoomExtentIcon, {}) })), (0, jsx_runtime_1.jsx)(info_popover_1.PopoverWrapper, { item: item })] })] }), extended && (0, jsx_runtime_1.jsx)(layer_item_style_1.default, { item: item }), extended && item?.source?.type === "grid" && (0, jsx_runtime_1.jsx)(grid_legend_1.default, { item: item })] }));
 }

package/dist/components/sidebar/common/opacity-handler-addon.js

@@ -4,6 +4,6 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const OpacitySlider = () => {
     const [opacity, setOpacity] = (0, react_1.useState)(1);
-    return ((0, jsx_runtime_1.jsx)("div", { className: "max-w-sm space-y-4", children: (0, jsx_runtime_1.jsx)("input", { id: "opacity-slider", type: "range", min: "0", max: "1", step: "0.01", value: opacity, onChange: (e) => setOpacity(Number(e.target.value)), className: "\n          w-full cursor-pointer text-2xl\n        " }) }));
+    return ((0, jsx_runtime_1.jsx)("div", { className: "max-w-sm space-y-4", children: (0, jsx_runtime_1.jsx)("input", { id: "opacity-slider", type: "range", min: "0", max: "1", step: "0.01", value: opacity, onChange: (e) => setOpacity(Number(e.target.value)), className: "\n          w-full cursor-pointer text-2xl h-1\n        " }) }));
 };
 exports.default = OpacitySlider;

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/sidebar/index.tsx"],"names":[],"mappings":"AAQA,MAAM,CAAC,OAAO,UAAU,OAAO,4CAsC9B"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/sidebar/index.tsx"],"names":[],"mappings":"AAQA,MAAM,CAAC,OAAO,UAAU,OAAO,4CAuC9B"}

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/sidebar/selected/index.tsx"],"names":[],"mappings":"AAOA,MAAM,CAAC,OAAO,UAAU,gBAAgB,4CAwBvC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/sidebar/selected/index.tsx"],"names":[],"mappings":"AAOA,MAAM,CAAC,OAAO,UAAU,gBAAgB,4CAgCvC"}

package/dist/components/sidebar/selected/index.js

@@ -11,10 +11,10 @@ const selected_item_list_1 = require("./selected-item-list");
 const core_1 = require("../../core");
 function SelectedTabPanel() {
     const { layer } = (0, use_layers_1.default)();
-    const onSortEnd = ({ oldIndex, newIndex }) => {
+    const onSortEnd = ({ oldIndex, newIndex, }) => {
         layer.setSelectedIds((0, array_move_1.arrayMoveImmutable)(layer.selectedIds, oldIndex, newIndex));
     };
-    return ((0, jsx_runtime_1.jsxs)("div", { className: `flex flex-col gap-3 w-full`, children: [layer.selectedIds.length > 0 && ((0, jsx_runtime_1.jsx)("div", { className: `p-3 pb-0`, children: (0, jsx_runtime_1.jsxs)(core_1.Button, { onClick: () => layer.clearAll(), children: ["\u2715 ", ("clear")] }) })), (0, jsx_runtime_1.jsx)(selected_item_list_1.SelectedItemList, { layerList: layer.selectedLayers, 
-                // @ts-ignore
-                useDragHandle: true, onSortEnd: onSortEnd })] }));
+    return ((0, jsx_runtime_1.jsx)("div", { className: "flex-1 min-h-0 overflow-y-auto", children: (0, jsx_runtime_1.jsxs)("div", { className: `flex flex-col gap-3 w-full`, children: [layer.selectedIds.length > 0 && ((0, jsx_runtime_1.jsx)("div", { className: `p-3 pb-0`, children: (0, jsx_runtime_1.jsxs)(core_1.Button, { onClick: () => layer.clearAll(), children: ["\u2715 ", "clear"] }) })), (0, jsx_runtime_1.jsx)(selected_item_list_1.SelectedItemList, { layerList: layer.selectedLayers, 
+                    // @ts-ignore
+                    useDragHandle: true, onSortEnd: onSortEnd })] }) }));
 }

package/dist/hooks/use-layers.d.ts

@@ -33,6 +33,8 @@ interface LayersContextProps {
         zoomToExtent: (layerId: string) => void;
         gridLegends: Record<string, any>;
         setGridLegends: (g: Record<string, any>) => void;
+        compareList: string[];
+        setCompareLayer: (layerId: string, checked: boolean) => void;
     };
     query: {
         term: string;

package/dist/hooks/use-layers.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-layers.d.ts","sourceRoot":"","sources":["../../src/hooks/use-layers.tsx"],"names":[],"mappings":"AACA,OAAO,KAMN,MAAM,OAAO,CAAC;AAGf,OAAO,EAAE,cAAc,EAAE,qBAAqB,EAAE,MAAM,eAAe,CAAC;AAStE,UAAU,kBAAkB;IAC1B,EAAE,EAAE,qBAAqB,CAAC;IAC1B,QAAQ,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,KAAK,IAAI,CAAC;IAC5C,aAAa,EAAE,OAAO,CAAC;IACvB,gBAAgB,EAAE,CAAC,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,KAAK,EAAE;QACL,QAAQ,CAAC,EAAE,GAAG,CAAC;QACf,WAAW,EAAE,CAAC,CAAC,EAAE,GAAG,KAAK,IAAI,CAAC;QAC9B,gBAAgB,EAAE,CAAC,KAAK,CAAC,EAAE,GAAG,KAAK,IAAI,CAAC;QACxC,GAAG,EAAE,cAAc,EAAE,CAAC;QACtB,MAAM,EAAE,CAAC,MAAM,EAAE,cAAc,EAAE,KAAK,IAAI,CAAC;QAC3C,WAAW,EAAE,MAAM,EAAE,CAAC;QACtB,cAAc,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;QACxC,cAAc,EAAE,cAAc,EAAE,CAAC;QAEjC,QAAQ,EAAE,MAAM,IAAI,CAAC;QACrB,MAAM,EAAE,CAAC,IAAI,EAAE;YACb,OAAO,EAAE,MAAM,CAAC;YAChB,GAAG,EAAE,OAAO,CAAC;YACb,UAAU,CAAC,EAAE,MAAM,CAAC;YACpB,KAAK,CAAC,EAAE,OAAO,CAAC;SACjB,KAAK,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC;QAC3B,WAAW,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC;QAC3E,gBAAgB,EAAE,GAAG,CAAC;QACtB,kBAAkB,EAAE,GAAG,CAAC;QACxB,mBAAmB,EAAE,CAAC,CAAC,EAAE,GAAG,KAAK,IAAI,CAAC;QACtC,aAAa,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,KAAK,IAAI,CAAC;QAC9D,MAAM,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;QACpD,iBAAiB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;QAC3C,cAAc,EAAE,MAAM,CAAC;QACvB,iBAAiB,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;QAEvC,YAAY,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;QAExC,WAAW,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;QACjC,cAAc,EAAE,CAAC,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,KAAK,IAAI,CAAC;KAClD,CAAC;IACF,KAAK,EAAE;QACL,IAAI,EAAE,MAAM,CAAC;QACb,OAAO,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;QAC7B,aAAa,EAAE,GAAG,CAAC;QACnB,gBAAgB,EAAE,CAAC,CAAC,EAAE,GAAG,KAAK,IAAI,CAAC;KACpC,CAAC;IACF,KAAK,EAAE;QACL,OAAO,EAAE,CAAC,CAAC,EAAE,GAAG,KAAK,IAAI,CAAC;QAC1B,QAAQ,EAAE,GAAG,CAAC;KACf,CAAC;CACH;AAED,UAAU,mBAAmB;IAC3B,EAAE,EAAE,qBAAqB,CAAC;IAC1B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAMD,eAAO,MAAM,cAAc,GAAI,uBAAuB,mBAAmB,4CA8UxE,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,SAAS,uBAEhC"}
+{"version":3,"file":"use-layers.d.ts","sourceRoot":"","sources":["../../src/hooks/use-layers.tsx"],"names":[],"mappings":"AAIA,OAAO,KAMN,MAAM,OAAO,CAAC;AAGf,OAAO,EAAE,cAAc,EAAE,qBAAqB,EAAE,MAAM,eAAe,CAAC;AAStE,UAAU,kBAAkB;IAC1B,EAAE,EAAE,qBAAqB,CAAC;IAC1B,QAAQ,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,KAAK,IAAI,CAAC;IAC5C,aAAa,EAAE,OAAO,CAAC;IACvB,gBAAgB,EAAE,CAAC,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,KAAK,EAAE;QACL,QAAQ,CAAC,EAAE,GAAG,CAAC;QACf,WAAW,EAAE,CAAC,CAAC,EAAE,GAAG,KAAK,IAAI,CAAC;QAC9B,gBAAgB,EAAE,CAAC,KAAK,CAAC,EAAE,GAAG,KAAK,IAAI,CAAC;QACxC,GAAG,EAAE,cAAc,EAAE,CAAC;QACtB,MAAM,EAAE,CAAC,MAAM,EAAE,cAAc,EAAE,KAAK,IAAI,CAAC;QAC3C,WAAW,EAAE,MAAM,EAAE,CAAC;QACtB,cAAc,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;QACxC,cAAc,EAAE,cAAc,EAAE,CAAC;QAEjC,QAAQ,EAAE,MAAM,IAAI,CAAC;QACrB,MAAM,EAAE,CAAC,IAAI,EAAE;YACb,OAAO,EAAE,MAAM,CAAC;YAChB,GAAG,EAAE,OAAO,CAAC;YACb,UAAU,CAAC,EAAE,MAAM,CAAC;YACpB,KAAK,CAAC,EAAE,OAAO,CAAC;SACjB,KAAK,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC;QAC3B,WAAW,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC;QAC3E,gBAAgB,EAAE,GAAG,CAAC;QACtB,kBAAkB,EAAE,GAAG,CAAC;QACxB,mBAAmB,EAAE,CAAC,CAAC,EAAE,GAAG,KAAK,IAAI,CAAC;QACtC,aAAa,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,KAAK,IAAI,CAAC;QAC9D,MAAM,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;QACpD,iBAAiB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;QAC3C,cAAc,EAAE,MAAM,CAAC;QACvB,iBAAiB,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;QAEvC,YAAY,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;QAExC,WAAW,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;QACjC,cAAc,EAAE,CAAC,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,KAAK,IAAI,CAAC;QACrD,WAAW,EAAE,MAAM,EAAE,CAAC;QACtB,eAAe,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;KAE1D,CAAC;IACF,KAAK,EAAE;QACL,IAAI,EAAE,MAAM,CAAC;QACb,OAAO,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;QAC7B,aAAa,EAAE,GAAG,CAAC;QACnB,gBAAgB,EAAE,CAAC,CAAC,EAAE,GAAG,KAAK,IAAI,CAAC;KACpC,CAAC;IACF,KAAK,EAAE;QACL,OAAO,EAAE,CAAC,CAAC,EAAE,GAAG,KAAK,IAAI,CAAC;QAC1B,QAAQ,EAAE,GAAG,CAAC;KACf,CAAC;CACH;AAED,UAAU,mBAAmB;IAC3B,EAAE,EAAE,qBAAqB,CAAC;IAC1B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAMD,eAAO,MAAM,cAAc,GAAI,uBAAuB,mBAAmB,4CA4VxE,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,SAAS,uBAEhC"}

package/dist/hooks/use-layers.js

@@ -63,6 +63,15 @@ const LayersProvider = ({ mp: _mp, children }) => {
     const [selectedLayerIds, setSelectedLayerIds] = (0, react_1.useState)(mp.selectedLayers || []);
     const [hoverFeatures, setHoverFeatures] = (0, react_1.useState)();
     const [selectedFeatures, setSelectedFeatures] = (0, react_1.useState)();
+    const [compareList, setCompareList] = (0, react_1.useState)((_mp && _mp.compareList) || []);
+    const setCompareLayer = (layerId, checked) => {
+        setCompareList((prev) => {
+            if (checked)
+                return Array.from(new Set([layerId, ...prev]));
+            return prev.filter((id) => id !== layerId);
+        });
+        // optional: call mp.onCompareChange(layerId, checked) if you want callbacks
+    };
     const selectedFeaturesId = (0, react_1.useMemo)(() => {
         const meta = {};
         for (const qr of selectedFeatures || []) {
@@ -103,8 +112,7 @@ const LayersProvider = ({ mp: _mp, children }) => {
         // @ts-ignore
         layer, styleIndex, mp.nakshaApiEndpoint, mp.geoserver);
         updateLayerById(layer.id, { data: layerData });
-        focus &&
-            mapl?.fitBounds(layer.bbox, { padding: 40, duration: 1000 });
+        // focus && mapl?.fitBounds(layer.bbox as any, { padding: 40, duration: 1000 });
     };
     const updateLayerStyle = async (layerId, styleIndex) => {
         const layerIndex = getLayerIndexById(layerId);
@@ -148,9 +156,9 @@ const LayersProvider = ({ mp: _mp, children }) => {
             setSelectedLayerIds(selectedLayerIds.filter((_lyrId) => layerId !== _lyrId));
             return;
         }
-        // const layerIndex = getLayerIndexById(layerId);
+        const layerIndex = getLayerIndexById(layerId);
         // const sourceType = layers[layerIndex]?.source.type;
-        // await toggleVectorLayer(layerIndex, styleIndex, focus);
+        await toggleVectorLayer(layerIndex, styleIndex, focus);
         setSelectedLayerIds((prev) => {
             const updated = [layerId, ...prev.filter((id) => id !== layerId)];
             return updated;
@@ -277,6 +285,8 @@ const LayersProvider = ({ mp: _mp, children }) => {
                 zoomToExtent,
                 gridLegends,
                 setGridLegends,
+                compareList: compareList,
+                setCompareLayer: setCompareLayer,
             },
             query: {
                 term: queryTermDebounced,

package/dist/index.css

@@ -11,6 +11,8 @@
     --color-red-200: oklch(88.5% 0.062 18.334);
     --color-red-600: oklch(57.7% 0.245 27.325);
     --color-red-800: oklch(44.4% 0.177 26.899);
+    --color-green-700: oklch(52.7% 0.154 150.069);
+    --color-green-800: oklch(44.8% 0.119 151.328);
     --color-blue-300: oklch(80.9% 0.105 251.813);
     --color-blue-500: oklch(62.3% 0.214 259.815);
     --color-blue-600: oklch(54.6% 0.245 262.881);
@@ -34,6 +36,7 @@
     --text-2xl: 1.5rem;
     --text-2xl--line-height: calc(2 / 1.5);
     --font-weight-medium: 500;
+    --font-weight-semibold: 600;
     --tracking-wide: 0.025em;
     --leading-tight: 1.25;
     --radius-md: 0.375rem;
@@ -224,6 +227,9 @@
   .bottom-0 {
     bottom: calc(var(--spacing) * 0);
   }
+  .bottom-4 {
+    bottom: calc(var(--spacing) * 4);
+  }
   .left-0 {
     left: calc(var(--spacing) * 0);
   }
@@ -236,6 +242,9 @@
   .z-20 {
     z-index: 20;
   }
+  .z-50 {
+    z-index: 50;
+  }
   .container {
     width: 100%;
     @media (width >= 40rem) {
@@ -293,6 +302,12 @@
   .inline-block {
     display: inline-block;
   }
+  .h-1 {
+    height: calc(var(--spacing) * 1);
+  }
+  .h-4 {
+    height: calc(var(--spacing) * 4);
+  }
   .h-5 {
     height: calc(var(--spacing) * 5);
   }
@@ -317,6 +332,9 @@
   .min-h-0 {
     min-height: calc(var(--spacing) * 0);
   }
+  .w-4 {
+    width: calc(var(--spacing) * 4);
+  }
   .w-5 {
     width: calc(var(--spacing) * 5);
   }
@@ -482,6 +500,9 @@
   .bg-gray-200 {
     background-color: var(--color-gray-200);
   }
+  .bg-green-700 {
+    background-color: var(--color-green-700);
+  }
   .bg-red-100 {
     background-color: var(--color-red-100);
   }
@@ -491,6 +512,12 @@
   .bg-white {
     background-color: var(--color-white);
   }
+  .bg-white\/5 {
+    background-color: color-mix(in srgb, #fff 5%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-white) 5%, transparent);
+    }
+  }
   .object-cover {
     object-fit: cover;
   }
@@ -506,6 +533,9 @@
   .p-4 {
     padding: calc(var(--spacing) * 4);
   }
+  .px-1 {
+    padding-inline: calc(var(--spacing) * 1);
+  }
   .px-2 {
     padding-inline: calc(var(--spacing) * 2);
   }
@@ -578,6 +608,10 @@
     --tw-font-weight: var(--font-weight-medium);
     font-weight: var(--font-weight-medium);
   }
+  .font-semibold {
+    --tw-font-weight: var(--font-weight-semibold);
+    font-weight: var(--font-weight-semibold);
+  }
   .tracking-wide {
     --tw-tracking: var(--tracking-wide);
     letter-spacing: var(--tracking-wide);
@@ -615,9 +649,15 @@
   .text-red-800 {
     color: var(--color-red-800);
   }
+  .text-white {
+    color: var(--color-white);
+  }
   .capitalize {
     text-transform: capitalize;
   }
+  .accent-green-700 {
+    accent-color: var(--color-green-700);
+  }
   .shadow-md {
     --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -638,6 +678,10 @@
     --tw-duration: 200ms;
     transition-duration: 200ms;
   }
+  .select-none {
+    -webkit-user-select: none;
+    user-select: none;
+  }
   .hover\:border-blue-500 {
     &:hover {
       @media (hover: hover) {
@@ -666,6 +710,13 @@
       }
     }
   }
+  .hover\:bg-green-800 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--color-green-800);
+      }
+    }
+  }
   .hover\:bg-red-200 {
     &:hover {
       @media (hover: hover) {

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,qBAAqB,EAAE,MAAM,cAAc,CAAC;AAKrD,QAAA,MAAM,YAAY,GAAI,OAAO,qBAAqB,4CAejD,CAAC;AAEF,eAAe,YAAY,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,qBAAqB,EAAE,MAAM,cAAc,CAAC;AAOrD,QAAA,MAAM,YAAY,GAAI,OAAO,qBAAqB,4CAqBjD,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/dist/index.js

@@ -1,18 +1,54 @@
 "use client";
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = __importDefault(require("react"));
+const react_1 = __importStar(require("react"));
 const maplibre_1 = require("react-map-gl/maplibre");
 const map_1 = __importDefault(require("./components/map"));
 const constants_1 = require("./static/constants");
 const use_layers_1 = require("./hooks/use-layers");
+const dualMap_1 = __importDefault(require("./components/dualMap"));
+const LayerCompareControl_1 = __importDefault(require("./components/Handler/LayerCompareControl"));
 // setup({ preflight: false });
 const MapListIndex = (props) => {
+    const [compareLayer, setCompareLayer] = (0, react_1.useState)(false);
     const mp = react_1.default.useMemo(() => ({ ...constants_1.defaultNakshaProps, ...props }), [props]);
-    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(maplibre_1.MapProvider, { children: (0, jsx_runtime_1.jsx)(use_layers_1.LayersProvider, { mp: mp, children: (0, jsx_runtime_1.jsx)(map_1.default, {}) }) }) }));
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(maplibre_1.MapProvider, { children: (0, jsx_runtime_1.jsxs)(use_layers_1.LayersProvider, { mp: mp, children: [(0, jsx_runtime_1.jsx)(LayerCompareControl_1.default, { compare: compareLayer, setCompare: setCompareLayer }), compareLayer ? (0, jsx_runtime_1.jsx)(dualMap_1.default, {}) : (0, jsx_runtime_1.jsx)(map_1.default, {})] }) }) }));
 };
 exports.default = MapListIndex;

package/dist/services/naksha.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"naksha.d.ts","sourceRoot":"","sources":["../../src/services/naksha.ts"],"names":[],"mappings":"AAkOA,eAAO,MAAM,oBAAoB,GAC/B,qBAAqB,MAAM,GAAG,IAAI,GAAG,SAAS,EAC9C,mBAAmB,MAAM,EACzB,WAAW,GAAG,EACd,iBAAiB,MAAM,EAAE,GAAG,IAAI,KAC/B,OAAO,CAAC,GAAG,EAAE,CAiBf,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,4BAA4B,GACvC,IAAI,MAAM,GAAG,MAAM,EACnB,UAAU,MAAM,KACf,OAAO,CAAC;IAAE,OAAO,EAAE,IAAI,CAAC;IAAC,IAAI,EAAE,GAAG,CAAA;CAAE,GAAG;IAAE,OAAO,EAAE,KAAK,CAAA;CAAE,CAU3D,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,4BAA4B,GACvC,UAAU,MAAM,EAChB,WAAW,MAAM,EACjB,QAAQ,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,KAC1B,OAAO,CAAC;IAAE,OAAO,EAAE,IAAI,CAAC;IAAC,IAAI,EAAE,GAAG,CAAA;CAAE,GAAG;IAAE,OAAO,EAAE,KAAK,CAAC;IAAC,IAAI,EAAE,GAAG,EAAE,CAAA;CAAE,CAuBxE,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,uBAAuB,GAClC,qBAAqB,MAAM,GAAG,IAAI,GAAG,SAAS,EAC9C,mBAAmB,MAAM,EACzB,SAAS,MAAM,GAAG,MAAM,EACxB,UAAU,OAAO,KAChB,OAAO,CAAC,OAAO,CAoBjB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,aAAa,GACxB,qBAAqB,MAAM,GAAG,IAAI,GAAG,SAAS,EAC9C,mBAAmB,MAAM,EACzB,SAAS,MAAM,GAAG,MAAM,KACvB,OAAO,CAAC,OAAO,CAejB,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,wBAAwB,GACnC,WAAW,MAAM,EACjB,WAAW,MAAM,EACjB,WAAW,MAAM,EACjB,UAAU,MAAM,KACf,OAAO,CAAC,GAAG,CAcb,CAAC;AAEF;;;;GAIG;AAEH,eAAO,MAAM,gBAAgB,GAC3B,SAAS,CAAC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,KAAK,OAAO,CAAC,GAAG,CAAC,EACtD,QAAQ;IAAE,GAAG,EAAE;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,GAAG,EAAE,MAAM,CAAA;KAAE,CAAC;IAAC,GAAG,EAAE;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,GAAG,EAAE,MAAM,CAAA;KAAE,CAAA;CAAE,EAChF,MAAM,MAAM,EACZ,iBAAY,EACZ,oBAAsB,KACrB,OAAO,CAAC;IACT,OAAO,EAAE,OAAO,CAAC;IACjB,OAAO,EAAE,GAAG,CAAC;IACb,KAAK,EAAE,GAAG,CAAC;IACX,KAAK,EAAE,CAAC,GAAG,EAAE,MAAM,CAAC,EAAE,CAAC;IACvB,UAAU,EAAE,MAAM,CAAC;CACpB,CA0DA,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,eAAe,GAC1B,UAAU,MAAM,EAChB,OAAO,MAAM,GAAG,IAAI,GAAG,SAAS,EAChC,WAAW,MAAM,EACjB,YAAY,MAAM,KACjB,OAAO,CAAC,IAAI,CAed,CAAC"}
+{"version":3,"file":"naksha.d.ts","sourceRoot":"","sources":["../../src/services/naksha.ts"],"names":[],"mappings":"AAoOA,eAAO,MAAM,oBAAoB,GAC/B,qBAAqB,MAAM,GAAG,IAAI,GAAG,SAAS,EAC9C,mBAAmB,MAAM,EACzB,WAAW,GAAG,EACd,iBAAiB,MAAM,EAAE,GAAG,IAAI,KAC/B,OAAO,CAAC,GAAG,EAAE,CAwBf,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,4BAA4B,GACvC,IAAI,MAAM,GAAG,MAAM,EACnB,UAAU,MAAM,KACf,OAAO,CAAC;IAAE,OAAO,EAAE,IAAI,CAAC;IAAC,IAAI,EAAE,GAAG,CAAA;CAAE,GAAG;IAAE,OAAO,EAAE,KAAK,CAAA;CAAE,CAY3D,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,4BAA4B,GACvC,UAAU,MAAM,EAChB,WAAW,MAAM,EACjB,QAAQ,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,KAC1B,OAAO,CAAC;IAAE,OAAO,EAAE,IAAI,CAAC;IAAC,IAAI,EAAE,GAAG,CAAA;CAAE,GAAG;IAAE,OAAO,EAAE,KAAK,CAAC;IAAC,IAAI,EAAE,GAAG,EAAE,CAAA;CAAE,CAuBxE,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,uBAAuB,GAClC,qBAAqB,MAAM,GAAG,IAAI,GAAG,SAAS,EAC9C,mBAAmB,MAAM,EACzB,SAAS,MAAM,GAAG,MAAM,EACxB,UAAU,OAAO,KAChB,OAAO,CAAC,OAAO,CAoBjB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,aAAa,GACxB,qBAAqB,MAAM,GAAG,IAAI,GAAG,SAAS,EAC9C,mBAAmB,MAAM,EACzB,SAAS,MAAM,GAAG,MAAM,KACvB,OAAO,CAAC,OAAO,CAejB,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,wBAAwB,GACnC,WAAW,MAAM,EACjB,WAAW,MAAM,EACjB,WAAW,MAAM,EACjB,UAAU,MAAM,KACf,OAAO,CAAC,GAAG,CAiBb,CAAC;AAEF;;;;GAIG;AAEH,eAAO,MAAM,gBAAgB,GAC3B,SAAS,CAAC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,KAAK,OAAO,CAAC,GAAG,CAAC,EACtD,QAAQ;IAAE,GAAG,EAAE;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,GAAG,EAAE,MAAM,CAAA;KAAE,CAAC;IAAC,GAAG,EAAE;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,GAAG,EAAE,MAAM,CAAA;KAAE,CAAA;CAAE,EAChF,MAAM,MAAM,EACZ,iBAAY,EACZ,oBAAsB,KACrB,OAAO,CAAC;IACT,OAAO,EAAE,OAAO,CAAC;IACjB,OAAO,EAAE,GAAG,CAAC;IACb,KAAK,EAAE,GAAG,CAAC;IACX,KAAK,EAAE,CAAC,GAAG,EAAE,MAAM,CAAC,EAAE,CAAC;IACvB,UAAU,EAAE,MAAM,CAAC;CACpB,CA0DA,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,eAAe,GAC1B,UAAU,MAAM,EAChB,OAAO,MAAM,GAAG,IAAI,GAAG,SAAS,EAChC,WAAW,MAAM,EACjB,YAAY,MAAM,KACjB,OAAO,CAAC,IAAI,CAed,CAAC"}

package/dist/services/naksha.js

@@ -7,6 +7,7 @@ exports.axDownloadLayer = exports.getGridLayerData = exports.axGetGeoserverLayer
 // api.ts
 const colorbrewer_1 = __importDefault(require("colorbrewer"));
 const grid_1 = require("../utils/grid");
+const naksha_1 = require("../utils/naksha");
 /**
  * Inline-typed alias for colorbrewer palettes to avoid TS errors.
  * colorbrewer exports an object of shape: Record<schemeName, Record<count, string[]>>
@@ -150,7 +151,7 @@ function createDummyLayers(layersResponse, geoserver, selectedLayers) {
         // workspace and layerName parsing from rawName (workspace:layer)
         const [workspace = (geoserver?.workspace || "default"), layerName] = String(rawName).includes(":") ? String(rawName).split(":") : [geoserver?.workspace || "default", String(rawName)];
         // prefer API id if present, else create stable hash
-        const id = entry.id || stableHashInt(String(rawName));
+        const id = entry.id;
         // Dummy bbox (keeps UI layout stable)
         const bbox = [
             [75 + idx * 0.01, 23 + idx * 0.01],
@@ -163,7 +164,8 @@ function createDummyLayers(layersResponse, geoserver, selectedLayers) {
             : `${gsBase}/thumbnails/${workspace}/${layerName}?layers=${encodeURIComponent(layerName)}&bbox=${bbox
                 .flat()
                 .join(",")}&request=GetMap&service=WMS&version=1.1.0&format=image/gif`;
-        const layerType = (entry.dataType || entry.layerType || "Vector").toUpperCase();
+        // const layerType = (entry.dataType || entry.layerType || "Vector").toUpperCase();
+        const layerType = ("vector").toUpperCase();
         const titleCandidate = entry.nameOfDataset || layerName || entry.title || entry.geoserverName;
         const title = prettifyTitle(String(titleCandidate || rawName));
         return {
@@ -212,7 +214,8 @@ const axGetGeoserverLayers = async (nakshaEndpointToken, nakshaApiEndpoint, geos
             throw new Error(`HTTP ${res.status} ${res.statusText}`);
         // parseResponse may be your existing helper — if not, use res.json()
         const data = typeof parseResponse === "function" ? await parseResponse(res) : await res.json().catch(() => null);
-        const finalLayers = createDummyLayers(data, geoserver, selectedLayers);
+        const finalTransformedLayers = createDummyLayers(data, geoserver, selectedLayers);
+        const finalLayers = await (0, naksha_1.parseGeoserverLayersXml)(finalTransformedLayers, nakshaApiEndpoint, geoserver, selectedLayers);
         return finalLayers;
     }
     catch (e) {
@@ -227,7 +230,8 @@ exports.axGetGeoserverLayers = axGetGeoserverLayers;
  */
 const axGetGeoserverLayerStyleList = async (id, endpoint) => {
     try {
-        const res = await fetch(`${endpoint}/layer/onClick/${id}`);
+        const res = await fetch(`${endpoint}/styles/by-layer/${id}`);
+        // const res = await fetch(`${endpoint}/layer/onClick/${id}`);
         if (!res.ok)
             throw new Error(`HTTP ${res.status}`);
         const data = await parseResponse(res);
@@ -321,7 +325,9 @@ exports.axDeleteLayer = axDeleteLayer;
  */
 const axGetGeoserverLayerStyle = async (layername, workspace, styleName, endpoint) => {
     try {
-        const res = await fetch(`${endpoint}/geoserver/workspaces/${workspace}/styles/${layername}_${styleName}.mbstyle`);
+        const res = await fetch(
+        // `${endpoint}/geoserver/workspaces/${workspace}/styles/${layername}_${styleName}.mbstyle`
+        `${endpoint}/styles/legend/${styleName}`);
         if (!res.ok)
             throw new Error(`HTTP ${res.status}`);
         // .mbstyle may be JSON; attempt parse safely

package/dist/utils/naksha.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"naksha.d.ts","sourceRoot":"","sources":["../../src/utils/naksha.ts"],"names":[],"mappings":"AAKA;;;;;;;;GAQG;AACH,eAAO,MAAM,uBAAuB,GAClC,QAAQ,GAAG,EACX,mBAAmB,MAAM,EACzB,WAAW;IAAE,QAAQ,CAAC,EAAE,GAAG,CAAC;IAAC,SAAS,EAAE,GAAG,CAAC;CAAE,EAC9C,gBAAgB,GAAG,mBAsDpB,CAAC;AAEF;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,aAAa,GACxB,OAAO;IAAE,IAAI,EAAE,GAAG,CAAC;IAAC,EAAE,EAAE,MAAM,CAAC;CAAE,EACjC,YAAY,MAAM,EAClB,mBAAmB,MAAM,EACzB,WAAW;IAAE,SAAS,EAAE,MAAM,CAAC;CAAE,iBAoFlC,CAAC"}
+{"version":3,"file":"naksha.d.ts","sourceRoot":"","sources":["../../src/utils/naksha.ts"],"names":[],"mappings":"AAKA;;;;;;;;GAQG;AACH,eAAO,MAAM,uBAAuB,GAClC,QAAQ,GAAG,EACX,mBAAmB,MAAM,EACzB,WAAW;IAAE,QAAQ,CAAC,EAAE,GAAG,CAAC;IAAC,SAAS,EAAE,GAAG,CAAA;CAAE,EAC7C,gBAAgB,GAAG,mBAoDpB,CAAC;AAEF;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,aAAa,GACxB,OAAO;IAAE,IAAI,EAAE,GAAG,CAAC;IAAC,EAAE,EAAE,MAAM,CAAA;CAAE,EAChC,YAAY,MAAM,EAClB,mBAAmB,MAAM,EACzB,WAAW;IAAE,SAAS,EAAE,MAAM,CAAA;CAAE,iBAsGjC,CAAC"}

package/dist/utils/naksha.js

@@ -26,13 +26,13 @@ const parseGeoserverLayersXml = async (layers, nakshaApiEndpoint, geoserver, sel
             : "vector";
         const _l = {
             ...l,
-            id: l.name,
+            id: l.id,
             thumbnail,
             source: {
                 type: sourceType,
                 scheme: "tms",
                 tiles: [
-                    `${geoserver.endpoint.replace(/\/$/, "")}/gwc/service/tms/1.0.0/${encodeURIComponent(`${geoserver.workspace}:${l.name}`)}@EPSG%3A900913@pbf/{z}/{x}/{y}.pbf`,
+                    `${geoserver.endpoint.replace(/\/$/, "")}/gwc/service/tms/1.0.0/${encodeURIComponent(`${geoserver.workspace}:${l.name}`)}@EPSG:3857@pbf/{z}/{x}/{y}.pbf`,
                 ],
             },
             data: { styles: [] },
@@ -71,9 +71,11 @@ exports.parseGeoserverLayersXml = parseGeoserverLayersXml;
  * @returns {Promise<any>} updated data object
  */
 const getLayerStyle = async (layer, styleIndex, nakshaApiEndpoint, geoserver) => {
-    console.log("getLayerStyle", layer, styleIndex, nakshaApiEndpoint, geoserver);
+    // console.log("getLayerStyle", layer , styleIndex , nakshaApiEndpoint , geoserver)
     // Start from existing data (defensive)
-    let data = layer.data && typeof layer.data === "object" ? { ...layer.data } : { styles: [] };
+    let data = layer.data && typeof layer.data === "object"
+        ? { ...layer.data }
+        : { styles: [] };
     // 1) If styles list is empty, fetch style list and metadata
     if (!Array.isArray(data.styles) || data.styles.length === 0) {
         try {
@@ -89,7 +91,10 @@ const getLayerStyle = async (layer, styleIndex, nakshaApiEndpoint, geoserver) =>
                 };
                 // build propertyMap safely
                 try {
-                    data.propertyMap = Object.fromEntries((data.styles || []).map((o) => [o.styleName, o.styleTitle]));
+                    data.propertyMap = Object.fromEntries((data.styles || []).map((o) => [
+                        o.styleName,
+                        o.styleTitle,
+                    ]));
                 }
                 catch {
                     data.propertyMap = data.propertyMap ?? {};
@@ -117,7 +122,9 @@ const getLayerStyle = async (layer, styleIndex, nakshaApiEndpoint, geoserver) =>
     }
     if (needsColors || !styleExists) {
         // determine styleName to fetch colors for; prefer newly-fetched styles metadata if present
-        const styleName = (data.styles && data.styles[styleIndex] && data.styles[styleIndex].styleName) ||
+        const styleName = (data.styles &&
+            data.styles[styleIndex] &&
+            data.styles[styleIndex].styleName) ||
             null;
         if (styleName) {
             try {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@metastringfoundation/map-list",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "sideEffects": [
     "**/*.css"
   ],
@@ -44,7 +44,7 @@
     "react-tiny-popover": "^8.1.6",
     "react-virtualized-auto-sizer": "^1.0.26",
     "react-web-share": "^2.0.2",
-    "@metastringfoundation/map-common": "0.1.0"
+    "@metastringfoundation/map-common": "0.1.1"
   },
   "scripts": {
     "build:styles": "tailwindcss -i ./src/styles.css -o ./dist/index.css",