@metastringfoundation/map-list 0.1.0

package/dist/hooks/use-layers.js

@@ -0,0 +1,298 @@
+"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;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LayersProvider = void 0;
+exports.default = useLayers;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const map_common_1 = require("@metastringfoundation/map-common");
+const react_1 = __importStar(require("react"));
+const maplibre_1 = require("react-map-gl/maplibre");
+const naksha_1 = require("../services/naksha");
+const constants_1 = require("../static/constants");
+const naksha_2 = require("../utils/naksha");
+const LayersContext = (0, react_1.createContext)({});
+const LayersProvider = ({ mp: _mp, children }) => {
+    const [mp, setMP] = (0, react_1.useState)(_mp);
+    // robust extraction for map object returned by various react-map-gl versions / adapters
+    const _mapHook = (0, maplibre_1.useMap)();
+    const mapl = _mapHook?.mapl ??
+        _mapHook?.map ??
+        _mapHook?.current ??
+        _mapHook ??
+        undefined;
+    const [queryTerm, setQueryTerm] = (0, react_1.useState)("");
+    const queryTermDebounced = (0, map_common_1.useDebounce)(queryTerm, 500);
+    const [mapStyle, setMapStyle] = (0, react_1.useState)(map_common_1.defaultMapStyles[mp?.mapStyle || 0]?.style);
+    const [selectionStyle, setSelectionStyle] = (0, react_1.useState)(constants_1.SELECTION_STYLE.TOP);
+    const [gridLegends, setGridLegends] = (0, react_1.useState)({});
+    const [isInfoBarOpen, setIsInfoBarOpen] = (0, react_1.useState)(true);
+    const [clickedLngLat, setClickedLngLat] = (0, react_1.useState)();
+    const [layers, setLayers] = (0, react_1.useState)(_mp.layers || []);
+    const [selectedLayerIds, setSelectedLayerIds] = (0, react_1.useState)(mp.selectedLayers || []);
+    const [hoverFeatures, setHoverFeatures] = (0, react_1.useState)();
+    const [selectedFeatures, setSelectedFeatures] = (0, react_1.useState)();
+    const selectedFeaturesId = (0, react_1.useMemo)(() => {
+        const meta = {};
+        for (const qr of selectedFeatures || []) {
+            meta[qr.sourceLayer] = [
+                ...(meta[qr.sourceLayer] || []),
+                qr?.properties?.[constants_1.PROPERTY_ID],
+            ];
+        }
+        return Object.keys(meta).length ? meta : undefined;
+    }, [selectedFeatures]);
+    const selectedLayers = react_1.default.useMemo(() => {
+        const unsortedLayers = layers.filter((_layer) => selectedLayerIds.includes(_layer.id));
+        const sortedLayers = new Array(selectedLayerIds.length);
+        // retrives full layer objects and re-orders according to `selectedLayerIds` order
+        for (const layerToSort of unsortedLayers) {
+            const idx = selectedLayerIds.findIndex((l) => layerToSort.id === l);
+            if (idx > -1) {
+                sortedLayers[idx] = layerToSort;
+            }
+        }
+        return sortedLayers;
+    }, [layers, selectedLayerIds]);
+    const getLayerIndexById = (layerId) => {
+        const index = layers.findIndex((layer) => {
+            return layer.id === layerId;
+        });
+        return index;
+    };
+    const updateLayerById = (layerId, updatedLayer) => {
+        setLayers((_layers) => _layers.map((l) => (l.id === layerId ? { ...l, ...updatedLayer } : l)));
+    };
+    const toggleVectorLayer = async (layerIndex, styleIndex, focus) => {
+        const layer = layers[layerIndex];
+        // Add null check here
+        if (!layer)
+            return;
+        const layerData = await (0, naksha_2.getLayerStyle)(
+        // @ts-ignore
+        layer, styleIndex, mp.nakshaApiEndpoint, mp.geoserver);
+        updateLayerById(layer.id, { data: layerData });
+        focus &&
+            mapl?.fitBounds(layer.bbox, { padding: 40, duration: 1000 });
+    };
+    const updateLayerStyle = async (layerId, styleIndex) => {
+        const layerIndex = getLayerIndexById(layerId);
+        toggleVectorLayer(layerIndex, styleIndex, false);
+    };
+    const onMapHover = async (e) => {
+        if (!selectedLayerIds.length || !mapl)
+            return;
+        try {
+            const lastLayerId = selectedLayerIds[0];
+            const feats = mapl.queryRenderedFeatures(e.point, {
+                layers: [lastLayerId],
+            });
+            if (feats.length) {
+                const fId = feats[0]?.id || feats[0]?.properties?.[constants_1.PROPERTY_ID];
+                if (fId === hoverFeatures?.id)
+                    return;
+                // @ts-ignore
+                const layer = layers[getLayerIndexById(lastLayerId)];
+                // Add null check here
+                if (!layer)
+                    return;
+                const hoverProperties = layer?.data?.summaryColumn.map((sc) => [
+                    layer.data?.propertyMap?.[sc] || sc,
+                    feats[0].properties?.[sc],
+                ]);
+                setHoverFeatures({
+                    id: fId,
+                    title: layer.title,
+                    data: hoverProperties,
+                });
+            }
+            else {
+                setHoverFeatures(undefined);
+            }
+        }
+        catch (e) { }
+    };
+    const toggleLayer = async ({ layerId, add, styleIndex = 0, focus = true, }) => {
+        if (!add) {
+            setSelectedLayerIds(selectedLayerIds.filter((_lyrId) => layerId !== _lyrId));
+            return;
+        }
+        // const layerIndex = getLayerIndexById(layerId);
+        // const sourceType = layers[layerIndex]?.source.type;
+        // await toggleVectorLayer(layerIndex, styleIndex, focus);
+        setSelectedLayerIds((prev) => {
+            const updated = [layerId, ...prev.filter((id) => id !== layerId)];
+            return updated;
+        });
+    };
+    const clearAllLayers = async () => setSelectedLayerIds([]);
+    const updateMP = (key, value) => {
+        setMP({ ...mp, [key]: value });
+    };
+    const toggleLayerPublishing = (layerId, layerStatus) => {
+        const isActive = layerStatus === constants_1.LAYER_STATUS.PENDING;
+        (0, naksha_1.axToggleLayerPublishing)(mp.nakshaEndpointToken, 
+        // @ts-ignore
+        mp.nakshaApiEndpoint, layerId, isActive);
+        updateLayerById(layerId, {
+            layerStatus: isActive ? constants_1.LAYER_STATUS.ACTIVE : constants_1.LAYER_STATUS.PENDING,
+        });
+    };
+    const deleteLayer = async (layerId, message) => {
+        if (window.confirm(message || "Are you sure?")) {
+            // @ts-ignore
+            (0, naksha_1.axDeleteLayer)(mp.nakshaEndpointToken, mp.nakshaApiEndpoint, layerId);
+            setLayers(layers.filter((l) => l.id !== layerId));
+        }
+    };
+    const zoomToExtent = (layerId) => {
+        const layerIndex = getLayerIndexById(layerId);
+        const layer = layers[layerIndex];
+        // Add null check here
+        if (!layer)
+            return;
+        mapl?.fitBounds(layer.bbox, { padding: 40, duration: 1000 });
+    };
+    const getBBoxFromLngLat = () => {
+        return [
+            clickedLngLat.lng,
+            clickedLngLat.lat,
+            clickedLngLat.lng + 0.1,
+            clickedLngLat.lat + 0.1,
+        ];
+    };
+    const handleSelectStyle = (value) => {
+        setSelectionStyle(value);
+        if (value === constants_1.SELECTION_STYLE.TOP) {
+            featuresAtLatLng(value);
+        }
+    };
+    const featuresAtLatLng = (value) => {
+        if (!clickedLngLat)
+            return;
+        try {
+            const finalXY = mapl?.project([clickedLngLat.lng, clickedLngLat.lat]);
+            let queryFeat = mapl?.queryRenderedFeatures(finalXY, {
+                layers: selectionStyle === constants_1.SELECTION_STYLE.TOP
+                    ? [selectedLayerIds[0]]
+                    : selectedLayerIds,
+            });
+            // Add all the raster layer feature to queryFeat when all info must be shown
+            // in the info box
+            if ((value || selectionStyle) === constants_1.SELECTION_STYLE.ALL) {
+                const rasterLayerFeat = selectedLayers
+                    .filter((item) => item.layerType == "RASTER")
+                    .map((item) => ({
+                    sourceLayer: item.id,
+                    layerType: "raster",
+                    bbox: getBBoxFromLngLat(),
+                }));
+                queryFeat = [...queryFeat, ...rasterLayerFeat];
+            }
+            setSelectedFeatures(
+            // if fist layer is raster and select all in not set
+            // send a raster based feature object
+            selectedLayers?.[0]?.layerType === "RASTER" &&
+                selectionStyle !== constants_1.SELECTION_STYLE.ALL
+                ? selectedLayerIds.length && queryFeat?.length
+                    ? queryFeat
+                    : [
+                        {
+                            sourceLayer: selectedLayerIds[0],
+                            layerType: "raster",
+                            bbox: getBBoxFromLngLat(),
+                        },
+                    ]
+                : queryFeat);
+        }
+        catch (e) {
+            console.error(e);
+        }
+    };
+    (0, react_1.useEffect)(() => {
+        if (mp.onSelectedLayersChange) {
+            mp.onSelectedLayersChange(selectedLayerIds);
+        }
+    }, [selectedLayerIds]);
+    (0, react_1.useEffect)(() => {
+        // we have no sureway to know that all layers are loaded
+        // this will wait for 300ms for layer to be loaded
+        // if it takes more then 300 selection will be discarded
+        setTimeout(featuresAtLatLng, 300);
+    }, [clickedLngLat, selectionStyle, selectedLayerIds]);
+    return ((0, jsx_runtime_1.jsx)(LayersContext.Provider, { value: {
+            mp,
+            updateMP,
+            layer: {
+                mapStyle,
+                featuresAtLatLng,
+                setMapStyle,
+                all: layers,
+                setAll: setLayers,
+                selectedIds: selectedLayerIds,
+                handleSelectStyle,
+                setSelectedIds: setSelectedLayerIds,
+                selectedLayers: selectedLayers,
+                clearAll: clearAllLayers,
+                toggle: toggleLayer,
+                updateStyle: updateLayerStyle,
+                selectedFeatures,
+                selectedFeaturesId,
+                setSelectedFeatures,
+                togglePublish: toggleLayerPublishing,
+                delete: deleteLayer,
+                selectionStyle: selectionStyle,
+                setSelectionStyle: setSelectionStyle,
+                zoomToExtent,
+                gridLegends,
+                setGridLegends,
+            },
+            query: {
+                term: queryTermDebounced,
+                setTerm: setQueryTerm,
+                clickedLngLat,
+                setClickedLngLat,
+            },
+            isInfoBarOpen,
+            setIsInfoBarOpen,
+            hover: {
+                onHover: onMapHover,
+                features: hoverFeatures,
+            },
+        }, children: children }));
+};
+exports.LayersProvider = LayersProvider;
+function useLayers() {
+    return (0, react_1.useContext)(LayersContext);
+}