@metastringfoundation/map-list 0.1.1 → 0.1.2

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

@@ -27,5 +27,15 @@ function GridLayer({ data, beforeId, }) {
     (0, react_1.useEffect)(() => {
         mapl?.on("idle", fetchGridData);
     }, []);
-    return ((0, jsx_runtime_1.jsx)(maplibre_1.Source, { id: data.id, type: "geojson", data: layerData.geojson, children: (0, jsx_runtime_1.jsx)(maplibre_1.Layer, { beforeId: beforeId, id: data.id, type: "fill", paint: layerData.paint }) }));
+    const opacity = layer.getLayerOpacity(data.id);
+    // Merge opacity into grid layer paint
+    const paintWithOpacity = (0, react_1.useMemo)(() => {
+        if (!layerData.paint)
+            return layerData.paint;
+        return {
+            ...layerData.paint,
+            "fill-opacity": opacity,
+        };
+    }, [layerData.paint, opacity]);
+    return ((0, jsx_runtime_1.jsx)(maplibre_1.Source, { id: data.id, type: "geojson", data: layerData.geojson, children: (0, jsx_runtime_1.jsx)(maplibre_1.Layer, { beforeId: beforeId, id: data.id, type: "fill", paint: paintWithOpacity }) }));
 }

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,EAAE,MAAM,CAAC;CACnB,kDAsBA"}
+{"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,kDAqBA"}

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

@@ -10,7 +10,6 @@ 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.source.type", layer?.source?.type);
     const maps = (0, maplibre_1.useMap)();
     // if (!mapl) {
     //   return null;

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,2CA8BA"}
+{"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,2CA6BA"}

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

@@ -8,10 +8,12 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 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)();
-    console.log(data, "datataatata");
+    const { mp, layer } = (0, use_layers_1.default)();
+    const opacity = layer.getLayerOpacity(data.id);
     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: {} }) }));
+        ], tileSize: 256, children: (0, jsx_runtime_1.jsx)(maplibre_1.Layer, { id: data.id, beforeId: beforeId, type: "raster", source: "biodiv", layout: { visibility: "visible" }, paint: {
+                "raster-opacity": opacity,
+            } }) }));
 }

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,2CAgC5D"}
+{"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,2CA8D5D"}

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

@@ -24,7 +24,30 @@ const paint = {
 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 opacity = layer.getLayerOpacity(data.id);
     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] }))] }));
+    // Merge opacity into layer paint properties based on layer type
+    const layerPaintWithOpacity = (0, react_1.useMemo)(() => {
+        if (!layerProps?.type)
+            return layerProps?.paint;
+        const paint = layerProps.paint ? { ...layerProps.paint } : {};
+        const layerType = layerProps.type;
+        // Apply opacity based on layer type
+        if (layerType === "fill") {
+            paint["fill-opacity"] = opacity;
+        }
+        else if (layerType === "line") {
+            paint["line-opacity"] = opacity;
+        }
+        else if (layerType === "circle") {
+            paint["circle-opacity"] = opacity;
+        }
+        else if (layerType === "symbol") {
+            paint["icon-opacity"] = opacity;
+            paint["text-opacity"] = opacity;
+        }
+        return paint;
+    }, [layerProps, opacity]);
+    const baseId = data?.id;
+    return ((0, jsx_runtime_1.jsxs)(maplibre_1.Source, { id: baseId, ...data.source, children: [layerProps && ((0, jsx_runtime_1.jsx)(maplibre_1.Layer, { beforeId: beforeId, id: baseId, ...layerProps, paint: layerPaintWithOpacity !== undefined ? layerPaintWithOpacity : layerProps.paint })), highlightData && layerProps && ((0, jsx_runtime_1.jsx)(maplibre_1.Layer, { ...layerProps, beforeId: beforeId, id: `hl_${baseId}`, filter: ["in", constants_1.PROPERTY_ID, ...highlightData], type: layerProps.type === "fill" ? "line" : layerProps.type, paint: paint[layerProps.type] }))] }));
 }

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"search.d.ts","sourceRoot":"","sources":["../../../src/components/map/search.tsx"],"names":[],"mappings":"AAUA,MAAM,CAAC,OAAO,UAAU,SAAS,4CA6OhC"}

package/dist/components/map/search.js

@@ -0,0 +1,122 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = MapSearch;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const maplibre_1 = require("react-map-gl/maplibre");
+const core_1 = require("../core");
+function MapSearch() {
+    const { mapl } = (0, maplibre_1.useMap)();
+    const [searchTerm, setSearchTerm] = (0, react_1.useState)("");
+    const [results, setResults] = (0, react_1.useState)([]);
+    const [isSearching, setIsSearching] = (0, react_1.useState)(false);
+    const [showResults, setShowResults] = (0, react_1.useState)(false);
+    const searchTimeoutRef = (0, react_1.useRef)(null);
+    const resultsRef = (0, react_1.useRef)(null);
+    // Close results when clicking outside
+    (0, react_1.useEffect)(() => {
+        const handleClickOutside = (event) => {
+            if (resultsRef.current && !resultsRef.current.contains(event.target)) {
+                setShowResults(false);
+            }
+        };
+        document.addEventListener("mousedown", handleClickOutside);
+        return () => document.removeEventListener("mousedown", handleClickOutside);
+    }, []);
+    const handleSearch = async (query) => {
+        if (!query.trim()) {
+            setResults([]);
+            setShowResults(false);
+            return;
+        }
+        setIsSearching(true);
+        try {
+            // Using Nominatim (OpenStreetMap) geocoding service as a free alternative
+            // You can replace this with Mapbox Geocoding API or any other service
+            const response = await fetch(`https://nominatim.openstreetmap.org/search?format=json&q=${encodeURIComponent(query)}&limit=5`, {
+                headers: {
+                    "User-Agent": "MapSearch/1.0", // Required by Nominatim
+                },
+            });
+            if (!response.ok) {
+                throw new Error("Geocoding request failed");
+            }
+            const data = await response.json();
+            const formattedResults = data.map((item) => ({
+                place_name: item.display_name,
+                center: [parseFloat(item.lon), parseFloat(item.lat)],
+                bbox: item.boundingbox
+                    ? [
+                        parseFloat(item.boundingbox[2]), // min lat
+                        parseFloat(item.boundingbox[0]), // min lon
+                        parseFloat(item.boundingbox[3]), // max lat
+                        parseFloat(item.boundingbox[1]), // max lon
+                    ]
+                    : undefined,
+            }));
+            setResults(formattedResults);
+            setShowResults(true);
+        }
+        catch (error) {
+            console.error("Error searching location:", error);
+            setResults([]);
+        }
+        finally {
+            setIsSearching(false);
+        }
+    };
+    const handleInputChange = (e) => {
+        const value = e.target.value;
+        setSearchTerm(value);
+        // Debounce search
+        if (searchTimeoutRef.current) {
+            clearTimeout(searchTimeoutRef.current);
+        }
+        if (value.trim()) {
+            searchTimeoutRef.current = setTimeout(() => {
+                handleSearch(value);
+            }, 500);
+        }
+        else {
+            setResults([]);
+            setShowResults(false);
+        }
+    };
+    const handleSelectResult = (result) => {
+        if (!mapl)
+            return;
+        const mapInstance = Object.values(mapl).pop();
+        if (!mapInstance)
+            return;
+        setSearchTerm(result.place_name);
+        setShowResults(false);
+        // Fly to the location
+        if (result.bbox) {
+            // Fit to bounding box if available
+            mapInstance.fitBounds([
+                [result.bbox[1], result.bbox[0]], // southwest
+                [result.bbox[3], result.bbox[2]], // northeast
+            ], {
+                padding: 50,
+                duration: 1500,
+            });
+        }
+        else {
+            // Fly to center point
+            mapInstance.flyTo({
+                center: result.center,
+                zoom: 12,
+                duration: 1500,
+            });
+        }
+    };
+    const handleClear = () => {
+        setSearchTerm("");
+        setResults([]);
+        setShowResults(false);
+        if (searchTimeoutRef.current) {
+            clearTimeout(searchTimeoutRef.current);
+        }
+    };
+    return ((0, jsx_runtime_1.jsx)("div", { className: "absolute top-4 left-1/2 transform -translate-x-1/2 z-30 w-full max-w-md px-4", children: (0, jsx_runtime_1.jsxs)("div", { className: "relative", ref: resultsRef, children: [(0, jsx_runtime_1.jsxs)("div", { className: "relative", children: [(0, jsx_runtime_1.jsx)(core_1.SearchInput, { type: "search", placeholder: "Search for a location...", value: searchTerm, onChange: handleInputChange, className: "w-full shadow-lg" }), isSearching && ((0, jsx_runtime_1.jsx)("div", { className: "absolute right-3 top-1/2 transform -translate-y-1/2", children: (0, jsx_runtime_1.jsxs)("svg", { className: "animate-spin h-5 w-5 text-gray-400", xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", children: [(0, jsx_runtime_1.jsx)("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }), (0, jsx_runtime_1.jsx)("path", { className: "opacity-75", fill: "currentColor", d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" })] }) })), searchTerm && !isSearching && ((0, jsx_runtime_1.jsx)("button", { onClick: handleClear, className: "absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-gray-600", type: "button", children: (0, jsx_runtime_1.jsx)("svg", { className: "h-5 w-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: (0, jsx_runtime_1.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d: "M6 18L18 6M6 6l12 12" }) }) }))] }), showResults && results.length > 0 && ((0, jsx_runtime_1.jsx)("div", { className: "absolute top-full left-0 right-0 mt-1 bg-white rounded-md shadow-lg border border-gray-200 max-h-64 overflow-y-auto z-50", children: results.map((result, index) => ((0, jsx_runtime_1.jsx)("button", { onClick: () => handleSelectResult(result), className: "w-full text-left px-4 py-3 hover:bg-gray-50 border-b border-gray-100 last:border-b-0 transition-colors", type: "button", children: (0, jsx_runtime_1.jsxs)("div", { className: "flex items-start gap-2", children: [(0, jsx_runtime_1.jsxs)("svg", { className: "w-5 h-5 text-gray-400 mt-0.5 shrink-0", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: [(0, jsx_runtime_1.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d: "M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" }), (0, jsx_runtime_1.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d: "M15 11a3 3 0 11-6 0 3 3 0 016 0z" })] }), (0, jsx_runtime_1.jsx)("div", { className: "flex-1 min-w-0", children: (0, jsx_runtime_1.jsx)("p", { className: "text-sm font-medium text-gray-800 truncate", children: result.place_name }) })] }) }, index))) })), showResults && results.length === 0 && searchTerm && !isSearching && ((0, jsx_runtime_1.jsx)("div", { className: "absolute top-full left-0 right-0 mt-1 bg-white rounded-md shadow-lg border border-gray-200 p-4 z-50", children: (0, jsx_runtime_1.jsxs)("p", { className: "text-sm text-gray-500 text-center", children: ["No results found for \"", searchTerm, "\""] }) }))] }) }));
+}

package/dist/components/map-comparison/attribute-selector.d.ts

@@ -0,0 +1,11 @@
+import { AttributeOption } from "./types";
+interface AttributeSelectorProps {
+    layerId: string;
+    attributes: AttributeOption[];
+    selectedAttribute?: string;
+    onSelect: (attributeKey?: string) => void;
+    label?: string;
+}
+export default function AttributeSelector({ layerId, attributes, selectedAttribute, onSelect, label, }: AttributeSelectorProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=attribute-selector.d.ts.map

package/dist/components/map-comparison/attribute-selector.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"attribute-selector.d.ts","sourceRoot":"","sources":["../../../src/components/map-comparison/attribute-selector.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAE1C,UAAU,sBAAsB;IAC9B,OAAO,EAAE,MAAM,CAAC;IAChB,UAAU,EAAE,eAAe,EAAE,CAAC;IAC9B,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,QAAQ,EAAE,CAAC,YAAY,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1C,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,CAAC,OAAO,UAAU,iBAAiB,CAAC,EACxC,OAAO,EACP,UAAU,EACV,iBAAiB,EACjB,QAAQ,EACR,KAA0B,GAC3B,EAAE,sBAAsB,2CA0BxB"}

package/dist/components/map-comparison/attribute-selector.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = AttributeSelector;
+const jsx_runtime_1 = require("react/jsx-runtime");
+function AttributeSelector({ layerId, attributes, selectedAttribute, onSelect, label = "Select Attribute", }) {
+    if (attributes.length === 0) {
+        return ((0, jsx_runtime_1.jsx)("div", { className: "text-sm text-gray-500", children: "No attributes available for this layer" }));
+    }
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-2", children: [(0, jsx_runtime_1.jsx)("label", { className: "text-sm font-medium text-gray-700", children: label }), (0, jsx_runtime_1.jsxs)("select", { value: selectedAttribute || "", onChange: (e) => onSelect(e.target.value || undefined), className: "w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 text-sm", children: [(0, jsx_runtime_1.jsx)("option", { value: "", children: "Default (All Attributes)" }), attributes.map((attr) => ((0, jsx_runtime_1.jsxs)("option", { value: attr.key, children: [attr.label, " (", attr.type, ")"] }, attr.key)))] })] }));
+}

package/dist/components/map-comparison/comparison-panel.d.ts

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

package/dist/components/map-comparison/comparison-panel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"comparison-panel.d.ts","sourceRoot":"","sources":["../../../src/components/map-comparison/comparison-panel.tsx"],"names":[],"mappings":"AAOA,MAAM,CAAC,OAAO,UAAU,eAAe,4CAyQtC"}

package/dist/components/map-comparison/comparison-panel.js

@@ -0,0 +1,45 @@
+"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 = ComparisonPanel;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const use_map_comparison_1 = require("./use-map-comparison");
+const attribute_selector_1 = __importDefault(require("./attribute-selector"));
+function ComparisonPanel() {
+    const { isOpen, setIsOpen, config, availableLayers, getLayerAttributes, addLayer, removeLayer, updateLayerAttribute, setMode, toggleSyncView, toggleStats, clearComparison, isLayerInComparison, } = (0, use_map_comparison_1.useMapComparison)();
+    const [selectedLayerId, setSelectedLayerId] = (0, react_1.useState)("");
+    const [selectedAttribute, setSelectedAttribute] = (0, react_1.useState)("");
+    if (!isOpen) {
+        return ((0, jsx_runtime_1.jsxs)("button", { onClick: () => setIsOpen(true), className: "fixed bottom-4 left-4 z-50 px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg shadow-lg flex items-center gap-2 font-medium", 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"] }));
+    }
+    const handleAddLayer = () => {
+        if (!selectedLayerId)
+            return;
+        const attributes = getLayerAttributes(selectedLayerId);
+        const attributeKey = selectedAttribute || undefined;
+        addLayer(selectedLayerId, attributeKey);
+        setSelectedLayerId("");
+        setSelectedAttribute("");
+    };
+    const selectedLayerAttributes = selectedLayerId
+        ? getLayerAttributes(selectedLayerId)
+        : [];
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "fixed bottom-4 left-4 z-50 w-96 bg-white rounded-lg shadow-2xl border border-gray-200 max-h-[80vh] overflow-y-auto", children: [(0, jsx_runtime_1.jsxs)("div", { className: "sticky top-0 bg-blue-600 text-white p-4 rounded-t-lg flex justify-between items-center", children: [(0, jsx_runtime_1.jsx)("h3", { className: "text-lg font-semibold", children: "Map Comparison" }), (0, jsx_runtime_1.jsx)("button", { onClick: () => setIsOpen(false), className: "text-white hover:text-gray-200", 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" })] }) })] }), (0, jsx_runtime_1.jsxs)("div", { className: "p-4 space-y-4", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-2", children: [(0, jsx_runtime_1.jsx)("label", { className: "text-sm font-medium text-gray-700", children: "Comparison Mode" }), (0, jsx_runtime_1.jsx)("div", { className: "flex gap-2", children: ["side-by-side", "overlay", "attribute"].map((mode) => ((0, jsx_runtime_1.jsx)("button", { onClick: () => setMode(mode), className: `px-3 py-1 rounded-md text-sm font-medium transition-colors ${config.mode === mode
+                                        ? "bg-blue-600 text-white"
+                                        : "bg-gray-100 text-gray-700 hover:bg-gray-200"}`, children: mode
+                                        .split("-")
+                                        .map((w) => w.charAt(0).toUpperCase() + w.slice(1))
+                                        .join(" ") }, mode))) })] }), (0, jsx_runtime_1.jsxs)("div", { className: "border-t pt-4", children: [(0, jsx_runtime_1.jsx)("h4", { className: "text-sm font-semibold text-gray-700 mb-3", children: "Add Layer to Compare" }), (0, jsx_runtime_1.jsxs)("div", { className: "space-y-3", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-2", children: [(0, jsx_runtime_1.jsx)("label", { className: "text-sm font-medium text-gray-700", children: "Select Layer" }), (0, jsx_runtime_1.jsxs)("select", { value: selectedLayerId, onChange: (e) => {
+                                                    setSelectedLayerId(e.target.value);
+                                                    setSelectedAttribute("");
+                                                }, className: "w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 text-sm", children: [(0, jsx_runtime_1.jsx)("option", { value: "", children: "Choose a layer..." }), availableLayers
+                                                        .filter((l) => !isLayerInComparison(l.id))
+                                                        .map((layer) => ((0, jsx_runtime_1.jsx)("option", { value: layer.id, children: layer.title }, layer.id)))] })] }), selectedLayerId && ((0, jsx_runtime_1.jsx)(attribute_selector_1.default, { layerId: selectedLayerId, attributes: selectedLayerAttributes, selectedAttribute: selectedAttribute, onSelect: setSelectedAttribute, label: "Select Attribute (Optional)" })), (0, jsx_runtime_1.jsx)("button", { onClick: handleAddLayer, disabled: !selectedLayerId, className: "w-full px-4 py-2 bg-blue-600 hover:bg-blue-700 disabled:bg-gray-300 disabled:cursor-not-allowed text-white rounded-md text-sm font-medium transition-colors", children: "Add to Comparison" })] })] }), config.layers.length > 0 && ((0, jsx_runtime_1.jsxs)("div", { className: "border-t pt-4", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex justify-between items-center mb-3", children: [(0, jsx_runtime_1.jsxs)("h4", { className: "text-sm font-semibold text-gray-700", children: ["Comparison Layers (", config.layers.length, ")"] }), (0, jsx_runtime_1.jsx)("button", { onClick: clearComparison, className: "text-xs text-red-600 hover:text-red-700", children: "Clear All" })] }), (0, jsx_runtime_1.jsx)("div", { className: "space-y-2", children: config.layers.map((compLayer) => {
+                                    const attributes = getLayerAttributes(compLayer.layerId);
+                                    return ((0, jsx_runtime_1.jsxs)("div", { className: "p-3 bg-gray-50 rounded-md border border-gray-200", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex justify-between items-start mb-2", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex-1", children: [(0, jsx_runtime_1.jsx)("p", { className: "text-sm font-medium text-gray-800", children: compLayer.layer.title }), compLayer.attributeLabel && ((0, jsx_runtime_1.jsxs)("p", { className: "text-xs text-gray-600 mt-1", children: ["Attribute: ", compLayer.attributeLabel] }))] }), (0, jsx_runtime_1.jsx)("button", { onClick: () => removeLayer(compLayer.layerId), className: "text-red-600 hover:text-red-700 ml-2", 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: "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" })] }) })] }), attributes.length > 0 && ((0, jsx_runtime_1.jsx)(attribute_selector_1.default, { layerId: compLayer.layerId, attributes: attributes, selectedAttribute: compLayer.attributeKey, onSelect: (attrKey) => updateLayerAttribute(compLayer.layerId, attrKey), label: "Change Attribute" }))] }, compLayer.layerId));
+                                }) })] })), config.layers.length > 0 && ((0, jsx_runtime_1.jsxs)("div", { className: "border-t pt-4 space-y-2", children: [(0, jsx_runtime_1.jsxs)("label", { className: "flex items-center gap-2 cursor-pointer", children: [(0, jsx_runtime_1.jsx)("input", { type: "checkbox", checked: config.syncView, onChange: toggleSyncView, className: "h-4 w-4 accent-blue-600" }), (0, jsx_runtime_1.jsx)("span", { className: "text-sm text-gray-700", children: "Sync Map Views" })] }), (0, jsx_runtime_1.jsxs)("label", { className: "flex items-center gap-2 cursor-pointer", children: [(0, jsx_runtime_1.jsx)("input", { type: "checkbox", checked: config.showStats, onChange: toggleStats, className: "h-4 w-4 accent-blue-600" }), (0, jsx_runtime_1.jsx)("span", { className: "text-sm text-gray-700", children: "Show Statistics" })] })] }))] })] }));
+}

package/dist/components/map-comparison/comparison-stats.d.ts

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

package/dist/components/map-comparison/comparison-stats.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"comparison-stats.d.ts","sourceRoot":"","sources":["../../../src/components/map-comparison/comparison-stats.tsx"],"names":[],"mappings":"AAMA,MAAM,CAAC,OAAO,UAAU,eAAe,mDAuGtC"}

package/dist/components/map-comparison/comparison-stats.js

@@ -0,0 +1,35 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = ComparisonStats;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const use_map_comparison_1 = require("./use-map-comparison");
+function ComparisonStats() {
+    const { config } = (0, use_map_comparison_1.useMapComparison)();
+    // Calculate basic statistics for each layer
+    const stats = (0, react_1.useMemo)(() => {
+        return config.layers.map((compLayer) => {
+            // This is a placeholder - in a real implementation, you would:
+            // 1. Query the layer data for the selected attribute
+            // 2. Calculate min, max, avg, unique values, etc.
+            // 3. For now, we'll show basic layer info
+            const stats = {
+                layerId: compLayer.layerId,
+                attributeKey: compLayer.attributeKey,
+                totalFeatures: undefined, // Would need to query layer
+                minValue: undefined,
+                maxValue: undefined,
+                avgValue: undefined,
+                uniqueValues: undefined,
+            };
+            return stats;
+        });
+    }, [config.layers]);
+    if (config.layers.length === 0)
+        return null;
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "absolute top-4 right-4 z-50 bg-white rounded-lg shadow-lg border border-gray-200 p-4 max-w-sm", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex justify-between items-center mb-3", children: [(0, jsx_runtime_1.jsx)("h3", { className: "text-sm font-semibold text-gray-800", children: "Comparison Statistics" }), (0, jsx_runtime_1.jsx)("button", { className: "text-gray-400 hover:text-gray-600", 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: "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" })] }) })] }), (0, jsx_runtime_1.jsx)("div", { className: "space-y-3", children: config.layers.map((compLayer, index) => {
+                    const layerStats = stats[index];
+                    return ((0, jsx_runtime_1.jsxs)("div", { className: "p-3 bg-gray-50 rounded-md border border-gray-200", children: [(0, jsx_runtime_1.jsx)("h4", { className: "text-sm font-medium text-gray-800 mb-2", children: compLayer.layer.title }), compLayer.attributeLabel && ((0, jsx_runtime_1.jsxs)("p", { className: "text-xs text-gray-600 mb-2", children: ["Attribute: ", compLayer.attributeLabel] })), (0, jsx_runtime_1.jsxs)("div", { className: "text-xs text-gray-500 space-y-1", children: [layerStats.totalFeatures !== undefined && ((0, jsx_runtime_1.jsxs)("div", { children: ["Total Features: ", layerStats.totalFeatures.toLocaleString()] })), layerStats.minValue !== undefined && ((0, jsx_runtime_1.jsxs)("div", { children: ["Min: ", layerStats.minValue] })), layerStats.maxValue !== undefined && ((0, jsx_runtime_1.jsxs)("div", { children: ["Max: ", layerStats.maxValue] })), layerStats.avgValue !== undefined && ((0, jsx_runtime_1.jsxs)("div", { children: ["Average: ", layerStats.avgValue.toFixed(2)] })), layerStats.uniqueValues !== undefined && ((0, jsx_runtime_1.jsxs)("div", { children: ["Unique Values: ", layerStats.uniqueValues] })), !layerStats.totalFeatures && ((0, jsx_runtime_1.jsx)("div", { className: "text-gray-400 italic", children: "Statistics calculation not implemented" }))] })] }, compLayer.layerId));
+                }) }), config.mode === "attribute" && ((0, jsx_runtime_1.jsx)("div", { className: "mt-3 pt-3 border-t border-gray-200", children: (0, jsx_runtime_1.jsxs)("p", { className: "text-xs text-gray-600", children: [(0, jsx_runtime_1.jsx)("strong", { children: "Attribute Comparison Mode:" }), " Comparing different attributes across layers. Use this to analyze how different attributes relate to each other."] }) }))] }));
+}

package/dist/components/map-comparison/comparison-view.d.ts

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

package/dist/components/map-comparison/comparison-view.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"comparison-view.d.ts","sourceRoot":"","sources":["../../../src/components/map-comparison/comparison-view.tsx"],"names":[],"mappings":"AAkBA,MAAM,CAAC,OAAO,UAAU,cAAc,4CA0KrC"}

package/dist/components/map-comparison/comparison-view.js

@@ -0,0 +1,152 @@
+"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 = ComparisonView;
+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_map_comparison_1 = require("./use-map-comparison");
+const layers_1 = require("../map/layers");
+const popup_1 = __importDefault(require("../map/popup"));
+const use_layers_1 = __importDefault(require("../../hooks/use-layers"));
+const comparison_stats_1 = __importDefault(require("./comparison-stats"));
+const NavControl = maplibre_1.NavigationControl;
+function ComparisonView() {
+    const { config } = (0, use_map_comparison_1.useMapComparison)();
+    const { mp, layer } = (0, use_layers_1.default)();
+    const [coordsByPane, setCoordsByPane] = (0, react_1.useState)({});
+    const [viewStates, setViewStates] = (0, react_1.useState)({});
+    const initialViewState = (0, react_1.useMemo)(() => mp.defaultViewState ?? map_common_1.defaultViewState, [mp.defaultViewState]);
+    // Initialize view states
+    (0, react_1.useEffect)(() => {
+        if (config.layers.length > 0) {
+            const newViewStates = {};
+            config.layers.forEach((compLayer) => {
+                if (!viewStates[compLayer.layerId]) {
+                    newViewStates[compLayer.layerId] = initialViewState;
+                }
+            });
+            if (Object.keys(newViewStates).length > 0) {
+                setViewStates((prev) => ({ ...prev, ...newViewStates }));
+            }
+        }
+    }, [config.layers, initialViewState]);
+    // Sync view states if enabled
+    const handleViewStateChange = (layerId, viewState) => {
+        if (config.syncView && config.layers.length > 1) {
+            // Sync all maps to the same view state
+            const syncedViewStates = {};
+            config.layers.forEach((l) => {
+                syncedViewStates[l.layerId] = viewState;
+            });
+            setViewStates((prev) => ({ ...prev, ...syncedViewStates }));
+        }
+        else {
+            // Update only the specific map
+            setViewStates((prev) => ({ ...prev, [layerId]: viewState }));
+        }
+    };
+    const onMouseMove = (layerId) => (e) => {
+        if (!e.lngLat)
+            return;
+        setCoordsByPane((prev) => ({
+            ...prev,
+            [layerId]: e.lngLat,
+        }));
+    };
+    if (config.layers.length === 0) {
+        return ((0, jsx_runtime_1.jsx)("div", { className: "w-full h-screen flex items-center justify-center bg-gray-100", children: (0, jsx_runtime_1.jsxs)("div", { className: "text-center", children: [(0, jsx_runtime_1.jsx)("p", { className: "text-gray-500 text-lg mb-2", children: "No layers selected for comparison" }), (0, jsx_runtime_1.jsx)("p", { className: "text-gray-400 text-sm", children: "Add layers from the comparison panel to get started" })] }) }));
+    }
+    // Prepare layers with attribute/style modifications
+    const preparedLayers = (0, react_1.useMemo)(() => {
+        return config.layers.map((compLayer) => {
+            const baseLayer = { ...compLayer.layer };
+            // If attribute-based comparison, modify the layer to show specific attribute
+            if (compLayer.attributeKey && compLayer.attributeKey.startsWith("style_")) {
+                const styleIndex = parseInt(compLayer.attributeKey.replace("style_", ""));
+                if (baseLayer.data) {
+                    baseLayer.data = {
+                        ...baseLayer.data,
+                        styleIndex: styleIndex,
+                    };
+                }
+            }
+            return {
+                ...baseLayer,
+                id: `compare-${compLayer.layerId}`,
+            };
+        });
+    }, [config.layers]);
+    // Render based on mode
+    if (config.mode === "overlay") {
+        // Overlay mode: stack all layers on a single map
+        const overlayViewState = viewStates[config.layers[0]?.layerId] || initialViewState;
+        return ((0, jsx_runtime_1.jsxs)("div", { className: "w-full h-screen relative", children: [config.showStats && (0, jsx_runtime_1.jsx)(comparison_stats_1.default, {}), (0, jsx_runtime_1.jsxs)(maplibre_1.default, { id: "comparison-overlay", initialViewState: overlayViewState, style: { width: "100%", height: "100%" }, mapStyle: layer.mapStyle, onMove: (e) => {
+                        if (config.layers[0]) {
+                            handleViewStateChange(config.layers[0].layerId, e.viewState);
+                        }
+                    }, children: [(0, jsx_runtime_1.jsx)(NavControl, { position: "top-right", showZoom: true, showCompass: true }), preparedLayers.map((l, index) => {
+                            const beforeId = index > 0 ? preparedLayers[index - 1].id : 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: coordsByPane["overlay"] })] })] }));
+    }
+    // Side-by-side or attribute mode: show multiple maps
+    const layout = (0, react_1.useMemo)(() => {
+        const count = config.layers.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) };
+    }, [config.layers.length]);
+    const renderMap = (compLayer, index) => {
+        const preparedLayer = preparedLayers[index];
+        const viewState = viewStates[compLayer.layerId] || initialViewState;
+        return ((0, jsx_runtime_1.jsxs)("div", { className: "relative w-full h-full", children: [(0, jsx_runtime_1.jsxs)("div", { className: "absolute top-2 left-2 z-10 bg-black/70 text-white px-3 py-1 rounded-md text-sm font-medium", children: [compLayer.layer.title, compLayer.attributeLabel && ((0, jsx_runtime_1.jsxs)("span", { className: "ml-2 text-xs text-gray-300", children: ["(", compLayer.attributeLabel, ")"] }))] }), (0, jsx_runtime_1.jsxs)(maplibre_1.default, { id: `compare-${compLayer.layerId}`, initialViewState: viewState, style: { position: "absolute", inset: 0 }, mapStyle: layer.mapStyle, onMouseMove: onMouseMove(compLayer.layerId), onMove: (e) => handleViewStateChange(compLayer.layerId, e.viewState), children: [(0, jsx_runtime_1.jsx)(NavControl, { position: "top-right", showZoom: true, showCompass: true }), (0, jsx_runtime_1.jsx)(layers_1.MapLayer, { layer: preparedLayer }), (0, jsx_runtime_1.jsx)(popup_1.default, { coordinates: coordsByPane[compLayer.layerId] })] }, config.syncView ? `sync-${JSON.stringify(viewState)}` : compLayer.layerId)] }, compLayer.layerId));
+    };
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "w-full h-screen relative", children: [config.showStats && (0, jsx_runtime_1.jsx)(comparison_stats_1.default, {}), (0, jsx_runtime_1.jsx)("div", { style: {
+                    display: "grid",
+                    gridTemplateColumns: `repeat(${layout.cols}, 1fr)`,
+                    gridTemplateRows: `repeat(${layout.rows}, ${100 / layout.rows}vh)`,
+                    height: "100vh",
+                }, children: config.layers.map((compLayer, index) => renderMap(compLayer, index)) })] }));
+}

package/dist/components/map-comparison/comparison-wrapper.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Map Comparison Wrapper Component
+ *
+ * This component works within the existing LayersProvider context
+ * Use this when you already have MapProvider and LayersProvider set up
+ */
+export default function ComparisonWrapper(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=comparison-wrapper.d.ts.map

package/dist/components/map-comparison/comparison-wrapper.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"comparison-wrapper.d.ts","sourceRoot":"","sources":["../../../src/components/map-comparison/comparison-wrapper.tsx"],"names":[],"mappings":"AAOA;;;;;GAKG;AACH,MAAM,CAAC,OAAO,UAAU,iBAAiB,4CAcxC"}

package/dist/components/map-comparison/comparison-wrapper.js

@@ -0,0 +1,26 @@
+"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 = ComparisonWrapper;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const comparison_panel_1 = __importDefault(require("./comparison-panel"));
+const comparison_view_1 = __importDefault(require("./comparison-view"));
+const use_map_comparison_1 = require("./use-map-comparison");
+/**
+ * Map Comparison Wrapper Component
+ *
+ * This component works within the existing LayersProvider context
+ * Use this when you already have MapProvider and LayersProvider set up
+ */
+function ComparisonWrapper() {
+    const { setIsOpen } = (0, use_map_comparison_1.useMapComparison)();
+    // Auto-open the comparison panel when comparison mode is activated
+    (0, react_1.useEffect)(() => {
+        setIsOpen(true);
+    }, [setIsOpen]);
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "w-full h-screen relative", children: [(0, jsx_runtime_1.jsx)(comparison_panel_1.default, {}), (0, jsx_runtime_1.jsx)(comparison_view_1.default, {})] }));
+}

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

@@ -0,0 +1,3 @@
+declare const MapComparison: () => import("react/jsx-runtime").JSX.Element;
+export default MapComparison;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/map-comparison/index.tsx"],"names":[],"mappings":"AAsJA,QAAA,MAAM,aAAa,+CAoQlB,CAAC;AAEF,eAAe,aAAa,CAAC"}