@metastringfoundation/map-list 0.1.0 → 0.1.2

package/dist/hooks/use-layers.js

@@ -63,6 +63,51 @@ 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 [layerOpacities, setLayerOpacities] = (0, react_1.useState)({});
+    const [layerVisibilities, setLayerVisibilities] = (0, react_1.useState)({});
+    // State for tracking checked attributes for comparison (format: "layerId-styleIndex")
+    const [checkedAttributes, setCheckedAttributes] = (0, react_1.useState)(new Set());
+    // State for compare mode (showing dual map)
+    const [isCompareMode, setIsCompareMode] = (0, react_1.useState)(false);
+    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 toggleAttributeCompare = (attributeKey) => {
+        setCheckedAttributes((prev) => {
+            const newSet = new Set(prev);
+            if (newSet.has(attributeKey)) {
+                // Removing - always allowed
+                newSet.delete(attributeKey);
+            }
+            else {
+                // Adding - check limit
+                if (newSet.size >= 8) {
+                    alert("Maximum 8 attributes can be compared at a time");
+                    return prev; // Don't add, return previous state
+                }
+                newSet.add(attributeKey);
+            }
+            return newSet;
+        });
+    };
+    const getCheckedAttributesCount = () => {
+        return checkedAttributes.size;
+    };
+    const getLayerOpacity = (layerId) => {
+        return layerOpacities[layerId] ?? 1;
+    };
+    const setLayerOpacity = (layerId, opacity) => {
+        setLayerOpacities((prev) => ({
+            ...prev,
+            [layerId]: Math.max(0, Math.min(1, opacity)), // Clamp between 0 and 1
+        }));
+    };
     const selectedFeaturesId = (0, react_1.useMemo)(() => {
         const meta = {};
         for (const qr of selectedFeatures || []) {
@@ -103,18 +148,41 @@ 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);
         toggleVectorLayer(layerIndex, styleIndex, false);
     };
+    // Fetch style data for comparison without changing the active styleIndex on main map
+    const fetchStyleForComparison = async (layerId, styleIndex) => {
+        const layerIndex = getLayerIndexById(layerId);
+        const layer = layers[layerIndex];
+        if (!layer)
+            return;
+        // Get the current active styleIndex to preserve it
+        const currentStyleIndex = layer.data?.styleIndex ?? 0;
+        // Fetch the style data
+        const layerData = await (0, naksha_2.getLayerStyle)(
+        // @ts-ignore
+        layer, styleIndex, mp.nakshaApiEndpoint, mp.geoserver);
+        // Update layer data but preserve the original styleIndex so main map doesn't change
+        updateLayerById(layer.id, {
+            data: {
+                ...layerData,
+                styleIndex: currentStyleIndex, // Keep the original active style
+            }
+        });
+    };
     const onMapHover = async (e) => {
         if (!selectedLayerIds.length || !mapl)
             return;
         try {
             const lastLayerId = selectedLayerIds[0];
+            // console.log(lastLayerId , "lastLayerId")
+            // added check
+            if (!mapl?.getLayer(lastLayerId))
+                return;
             const feats = mapl.queryRenderedFeatures(e.point, {
                 layers: [lastLayerId],
             });
@@ -146,17 +214,31 @@ const LayersProvider = ({ mp: _mp, children }) => {
     const toggleLayer = async ({ layerId, add, styleIndex = 0, focus = true, }) => {
         if (!add) {
             setSelectedLayerIds(selectedLayerIds.filter((_lyrId) => layerId !== _lyrId));
+            // Remove all checked attributes for this layer when it's deselected
+            setCheckedAttributes((prev) => {
+                const newSet = new Set(prev);
+                for (const attrKey of prev) {
+                    if (attrKey.startsWith(`${layerId}-`)) {
+                        newSet.delete(attrKey);
+                    }
+                }
+                return newSet;
+            });
             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;
         });
     };
-    const clearAllLayers = async () => setSelectedLayerIds([]);
+    const clearAllLayers = async () => {
+        setSelectedLayerIds([]);
+        // Clear all checked attributes when all layers are cleared
+        setCheckedAttributes(new Set());
+    };
     const updateMP = (key, value) => {
         setMP({ ...mp, [key]: value });
     };
@@ -251,6 +333,24 @@ const LayersProvider = ({ mp: _mp, children }) => {
         // if it takes more then 300 selection will be discarded
         setTimeout(featuresAtLatLng, 300);
     }, [clickedLngLat, selectionStyle, selectedLayerIds]);
+    // Sync checkedAttributes with selectedLayers - remove attributes for unselected layers
+    (0, react_1.useEffect)(() => {
+        setCheckedAttributes((prev) => {
+            const selectedIdsSet = new Set(selectedLayerIds);
+            const newSet = new Set();
+            for (const attrKey of prev) {
+                const [layerId] = attrKey.split("-");
+                if (!layerId) {
+                    continue;
+                }
+                // Only keep attributes for layers that are currently selected
+                if (selectedIdsSet.has(layerId)) {
+                    newSet.add(attrKey);
+                }
+            }
+            return newSet;
+        });
+    }, [selectedLayerIds]);
     return ((0, jsx_runtime_1.jsx)(LayersContext.Provider, { value: {
             mp,
             updateMP,
@@ -277,6 +377,16 @@ const LayersProvider = ({ mp: _mp, children }) => {
                 zoomToExtent,
                 gridLegends,
                 setGridLegends,
+                compareList: compareList,
+                setCompareLayer: setCompareLayer,
+                getLayerOpacity,
+                setLayerOpacity,
+                checkedAttributes: checkedAttributes,
+                toggleAttributeCompare: toggleAttributeCompare,
+                getCheckedAttributesCount: getCheckedAttributesCount,
+                isCompareMode: isCompareMode,
+                setCompareMode: setIsCompareMode,
+                fetchStyleForComparison: fetchStyleForComparison,
             },
             query: {
                 term: queryTermDebounced,

package/dist/hooks/use-polygon-data.d.ts

@@ -0,0 +1,34 @@
+import React from "react";
+/** GeoJSON Feature from map-draw (polygon) */
+export type PolygonShape = {
+    id: string;
+    type: "Feature";
+    geometry: {
+        type: string;
+        coordinates: unknown;
+    };
+    properties?: Record<string, unknown>;
+};
+interface PolygonDataContextValue {
+    /** Current drawn polygon features from map-draw */
+    shapes: PolygonShape[];
+    /** Fetch data from backend for current polygon(s). Call after user draws and hits Search. */
+    fetchPolygonData: (searchTerm?: string) => Promise<void>;
+    /** Response data from last successful fetch */
+    polygonData: unknown;
+    /** Loading state while fetch is in progress */
+    loading: boolean;
+    /** Error message from last failed fetch */
+    error: string | null;
+    /** Clear error (e.g. when user retries or draws again) */
+    clearError: () => void;
+}
+export interface PolygonProviderProps {
+    /** Drawn polygon features from useMapDraw().shapes */
+    shapes: PolygonShape[];
+    children: React.ReactNode;
+}
+export declare function PolygonProvider({ shapes, children }: PolygonProviderProps): import("react/jsx-runtime").JSX.Element;
+export declare function usePolygonData(): PolygonDataContextValue;
+export {};
+//# sourceMappingURL=use-polygon-data.d.ts.map

package/dist/hooks/use-polygon-data.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-polygon-data.d.ts","sourceRoot":"","sources":["../../src/hooks/use-polygon-data.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA2D,MAAM,OAAO,CAAC;AAKhF,8CAA8C;AAC9C,MAAM,MAAM,YAAY,GAAG;IACzB,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,SAAS,CAAC;IAChB,QAAQ,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,WAAW,EAAE,OAAO,CAAA;KAAE,CAAC;IACjD,UAAU,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;CACtC,CAAC;AAEF,UAAU,uBAAuB;IAC/B,mDAAmD;IACnD,MAAM,EAAE,YAAY,EAAE,CAAC;IACvB,6FAA6F;IAC7F,gBAAgB,EAAE,CAAC,UAAU,CAAC,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IACzD,+CAA+C;IAC/C,WAAW,EAAE,OAAO,CAAC;IACrB,+CAA+C;IAC/C,OAAO,EAAE,OAAO,CAAC;IACjB,2CAA2C;IAC3C,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,0DAA0D;IAC1D,UAAU,EAAE,MAAM,IAAI,CAAC;CACxB;AAID,MAAM,WAAW,oBAAoB;IACnC,sDAAsD;IACtD,MAAM,EAAE,YAAY,EAAE,CAAC;IACvB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,wBAAgB,eAAe,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,EAAE,oBAAoB,2CAkEzE;AAED,wBAAgB,cAAc,IAAI,uBAAuB,CAMxD"}

package/dist/hooks/use-polygon-data.js

@@ -0,0 +1,74 @@
+"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.PolygonProvider = PolygonProvider;
+exports.usePolygonData = usePolygonData;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const polygon_1 = require("../services/polygon");
+const use_layers_1 = __importDefault(require("./use-layers"));
+const PolygonDataContext = (0, react_1.createContext)(null);
+function PolygonProvider({ shapes, children }) {
+    const { mp } = (0, use_layers_1.default)();
+    const [polygonData, setPolygonData] = (0, react_1.useState)(null);
+    const [loading, setLoading] = (0, react_1.useState)(false);
+    const [error, setError] = (0, react_1.useState)(null);
+    const fetchPolygonData = (0, react_1.useCallback)(async (searchTerm) => {
+        const endpoint = mp?.nakshaApiEndpoint;
+        const hasFullUrl = mp?.polygonDataPath != null && mp.polygonDataPath.startsWith("http");
+        if (!endpoint && !hasFullUrl) {
+            setError("API endpoint not configured (set nakshaApiEndpoint or polygonDataPath)");
+            return;
+        }
+        if (!shapes?.length) {
+            setError("Draw at least one polygon on the map first");
+            return;
+        }
+        const url = mp?.polygonDataPath != null && mp.polygonDataPath !== ""
+            ? mp.polygonDataPath.startsWith("http")
+                ? mp.polygonDataPath
+                : `${(endpoint ?? "").replace(/\/$/, "")}${mp.polygonDataPath.startsWith("/") ? "" : "/"}${mp.polygonDataPath}`
+            : undefined;
+        setError(null);
+        setLoading(true);
+        try {
+            const result = await (0, polygon_1.axFetchDataByPolygon)({
+                endpoint: endpoint ?? "",
+                url,
+                token: mp?.nakshaEndpointToken ?? undefined,
+                features: shapes,
+                searchTerm,
+            });
+            if (result.success) {
+                setPolygonData(result.data);
+            }
+            else {
+                setError(result.error);
+                setPolygonData(null);
+            }
+        }
+        finally {
+            setLoading(false);
+        }
+    }, [mp?.nakshaApiEndpoint, mp?.nakshaEndpointToken, shapes]);
+    const clearError = (0, react_1.useCallback)(() => setError(null), []);
+    const value = {
+        shapes: shapes ?? [],
+        fetchPolygonData,
+        polygonData,
+        loading,
+        error,
+        clearError,
+    };
+    return ((0, jsx_runtime_1.jsx)(PolygonDataContext.Provider, { value: value, children: children }));
+}
+function usePolygonData() {
+    const ctx = (0, react_1.useContext)(PolygonDataContext);
+    if (!ctx) {
+        throw new Error("usePolygonData must be used within PolygonProvider");
+    }
+    return ctx;
+}