@metastringfoundation/map-list 0.1.0

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

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

package/dist/components/map/index.js

@@ -0,0 +1,66 @@
+"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 = Map;
+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 Map() {
+    const { mp, layer, hover, query } = (0, use_layers_1.default)();
+    const [coordinates, setCoordinates] = (0, react_1.useState)();
+    const viewState = (0, react_1.useMemo)(() => mp.defaultViewState || map_common_1.defaultViewState, [mp.defaultViewState]);
+    // @ts-ignore
+    const onMapClick = (e) => query.setClickedLngLat(e.lngLat);
+    // @ts-ignore
+    const handleOnMouseMove = (event) => {
+        setCoordinates(event.lngLat);
+        hover.onHover(event);
+    };
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "w-full h-screen overflow-hidden", children: [mp.loadToC && (0, jsx_runtime_1.jsx)(sidebar_1.default, {}), layer.selectedFeatures?.length > 0 && (0, jsx_runtime_1.jsx)(infobar_1.default, {}), (0, jsx_runtime_1.jsxs)(maplibre_1.default, { id: "mapl", cursor: "default", initialViewState: viewState, style: { width: "100%", height: "100%" }, mapStyle: layer.mapStyle, onClick: onMapClick, onMouseMove: handleOnMouseMove, children: [(0, jsx_runtime_1.jsx)(NavControl, { position: "top-right", showZoom: true, showCompass: true }), (0, jsx_runtime_1.jsx)(markers_list_1.default, {}), layer.selectedLayers.map((_l, index) => {
+                        const beforeId = index > 0 ? layer.selectedIds[index - 1] : undefined;
+                        return (0, jsx_runtime_1.jsx)(layers_1.MapLayer, { layer: _l, beforeId: beforeId }, _l.id);
+                    }), (0, jsx_runtime_1.jsx)(popup_1.default, { coordinates: coordinates }, "popup")] })] }));
+}

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

@@ -0,0 +1,6 @@
+import { GeoserverLayer } from "../../../../interfaces";
+export default function GridLayer({ data, beforeId, }: {
+    data: GeoserverLayer;
+    beforeId?: string;
+}): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=index.d.ts.map

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

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

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

@@ -0,0 +1,31 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = GridLayer;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const maplibre_1 = require("react-map-gl/maplibre");
+const use_layers_1 = __importDefault(require("../../../../hooks/use-layers"));
+const naksha_1 = require("../../../../services/naksha");
+function GridLayer({ data, beforeId, }) {
+    const { layer } = (0, use_layers_1.default)();
+    const { mapl } = (0, maplibre_1.useMap)();
+    const [layerData, setLayerData] = (0, react_1.useState)({ geojson: {}, paint: {} });
+    const fetchGridData = async () => {
+        const { success, geojson, paint, stops, squareSize } = await (0, naksha_1.getGridLayerData)(data.source.fetcher, 
+        //@ts-ignore
+        mapl?.getBounds(), mapl?.getZoom());
+        if (success) {
+            setLayerData({ geojson, paint });
+            layer.setGridLegends({
+                [data.id]: { stops, squareSize },
+            });
+        }
+    };
+    (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 }) }));
+}

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

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

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

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

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

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = HighLightLayer;
+const jsx_runtime_1 = require("react/jsx-runtime");
+function HighLightLayer() {
+    return (0, jsx_runtime_1.jsx)("div", { children: "xo" });
+}

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

@@ -0,0 +1,6 @@
+import { GeoserverLayer } from "../../../interfaces";
+export declare function MapLayer({ layer, beforeId, }: {
+    layer: GeoserverLayer;
+    beforeId?: string;
+}): import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,27 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+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 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) {
+        return null;
+    }
+    // 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

@@ -0,0 +1,6 @@
+import { GeoserverLayer } from "../../../../interfaces";
+export default function RasterLayer({ data, beforeId, }: {
+    data: GeoserverLayer;
+    beforeId?: string;
+}): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,19 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = RasterLayer;
+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)();
+    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`,
+        ], 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

@@ -0,0 +1,5 @@
+export default function VectorLayer({ layer: data, beforeId }: {
+    layer: any;
+    beforeId: any;
+}): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,29 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = VectorLayer;
+const jsx_runtime_1 = require("react/jsx-runtime");
+// @ts-nocheck
+const react_1 = require("react");
+const maplibre_1 = require("react-map-gl/maplibre");
+const use_layers_1 = __importDefault(require("../../../../hooks/use-layers"));
+const constants_1 = require("../../../../static/constants");
+const paint = {
+    fill: {
+        "line-color": "red",
+        "line-width": 2,
+    },
+    circle: {
+        "circle-stroke-color": "red",
+        "circle-stroke-width": 2,
+        "circle-opacity": 0,
+    },
+};
+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];
+    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/marker-list/index.d.ts

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

package/dist/components/map/marker-list/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/map/marker-list/index.tsx"],"names":[],"mappings":"AAMA,QAAA,MAAM,WAAW,+CAkBhB,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/dist/components/map/marker-list/index.js

@@ -0,0 +1,16 @@
+"use strict";
+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 = require("react");
+const maplibre_1 = require("react-map-gl/maplibre");
+const use_layers_1 = __importDefault(require("../../../hooks/use-layers"));
+const Marker1 = maplibre_1.Marker;
+const MarkersList = () => {
+    const { mp } = (0, use_layers_1.default)();
+    const markersMemoized = (0, react_1.useMemo)(() => mp.markers, [mp.markers]);
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: markersMemoized?.map(({ latitude, longitude, colorHex }, index) => ((0, jsx_runtime_1.jsx)(Marker1, { latitude: latitude, longitude: longitude, children: (0, jsx_runtime_1.jsx)("img", { style: { cursor: "pointer" }, alt: "Marker", src: `https://a.tiles.mapbox.com/v4/marker/pin-m+${colorHex}.png?access_token=${mp.mapboxAccessToken}` }) }, index))) }));
+};
+exports.default = MarkersList;

package/dist/components/map/markers-list/index.d.ts

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

package/dist/components/map/markers-list/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/map/markers-list/index.tsx"],"names":[],"mappings":"AAMA,QAAA,MAAM,WAAW,+CAkBhB,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/dist/components/map/markers-list/index.js

@@ -0,0 +1,16 @@
+"use strict";
+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 = require("react");
+const maplibre_1 = require("react-map-gl/maplibre");
+const use_layers_1 = __importDefault(require("../../../hooks/use-layers"));
+const Marker1 = maplibre_1.Marker;
+const MarkersList = () => {
+    const { mp } = (0, use_layers_1.default)();
+    const markersMemoized = (0, react_1.useMemo)(() => mp.markers, [mp.markers]);
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: markersMemoized?.map(({ latitude, longitude, colorHex }, index) => ((0, jsx_runtime_1.jsx)(Marker1, { latitude: latitude, longitude: longitude, children: (0, jsx_runtime_1.jsx)("img", { style: { cursor: "pointer" }, alt: "Marker", src: `https://a.tiles.mapbox.com/v4/marker/pin-m+${colorHex}.png?access_token=${mp.mapboxAccessToken}` }) }, index))) }));
+};
+exports.default = MarkersList;

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

@@ -0,0 +1,4 @@
+export default function HoverPopup({ coordinates }: {
+    coordinates: any;
+}): import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/map/popup/index.tsx"],"names":[],"mappings":"AAQA,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,EAAE,WAAW,EAAE;;CAAA,kDAqCjD"}

package/dist/components/map/popup/index.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 = HoverPopup;
+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"));
+const Pop = maplibre_1.Popup;
+// @ts-ignore
+function HoverPopup({ coordinates }) {
+    const { hover } = (0, use_layers_1.default)();
+    return coordinates?.lat && hover.features ? ((0, jsx_runtime_1.jsx)(Pop, { latitude: coordinates.lat, longitude: coordinates.lng, closeButton: false, children: (0, jsx_runtime_1.jsxs)("table", { className: "table-auto border border-gray-300 bg-white", children: [(0, jsx_runtime_1.jsx)("thead", { children: (0, jsx_runtime_1.jsx)("tr", { children: (0, jsx_runtime_1.jsx)("th", { className: "bg-gray-200 py-1 px-2 text-left", colSpan: 2, children: hover.features.title }) }) }), (0, jsx_runtime_1.jsxs)("tbody", { children: ["// @ts", hover.features.data.map(
+                        // @ts-ignore
+                        ([k, v], idx) => ((0, jsx_runtime_1.jsxs)("tr", { className: `border-t border-gray-100 ${idx % 2 === 0 ? "bg-gray-50" : ""}`, children: [(0, jsx_runtime_1.jsx)("td", { className: "py-1 px-2", children: k }), (0, jsx_runtime_1.jsx)("td", { className: "py-1 px-2 border-l border-gray-100", children: v })] }, k + v)))] })] }) })) : null;
+}

package/dist/components/sidebar/common/grid-legend.d.ts

@@ -0,0 +1,4 @@
+export default function GridLegend({ item }: {
+    item: any;
+}): import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=grid-legend.d.ts.map

package/dist/components/sidebar/common/grid-legend.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"grid-legend.d.ts","sourceRoot":"","sources":["../../../../src/components/sidebar/common/grid-legend.tsx"],"names":[],"mappings":"AAKA,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,EAAE,IAAI,EAAE;;CAAA,kDAqC1C"}

package/dist/components/sidebar/common/grid-legend.js

@@ -0,0 +1,22 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = GridLegend;
+const jsx_runtime_1 = require("react/jsx-runtime");
+// @ts-nocheck
+const use_layers_1 = __importDefault(require("../../../hooks/use-layers"));
+const moreless_1 = __importDefault(require("./moreless"));
+function GridLegend({ item }) {
+    const { layer } = (0, use_layers_1.default)();
+    const legendInfo = layer.gridLegends[item.id];
+    if (!legendInfo)
+        return null;
+    return ((0, jsx_runtime_1.jsx)(moreless_1.default, { children: (0, jsx_runtime_1.jsxs)("ul", { style: { margin: 0, padding: 0 }, children: [legendInfo?.stops.map(([stop, color], index, stopsArr) => {
+                    const prevStop = (stopsArr[index - 1] || [0])[0];
+                    if (prevStop === stop)
+                        return (0, jsx_runtime_1.jsx)("div", {}, color);
+                    return ((0, jsx_runtime_1.jsxs)("li", { className: "flex gap-2 items-center mb-1", children: [(0, jsx_runtime_1.jsx)("svg", { viewBox: "0 0 24 24", height: "14", width: "14", focusable: "false", children: (0, jsx_runtime_1.jsx)("circle", { cx: "12", fill: color, cy: "12", r: "12", stroke: "none" }) }), (0, jsx_runtime_1.jsxs)("div", { children: [prevStop, " - ", stop] })] }, color));
+                }), (0, jsx_runtime_1.jsxs)("li", { children: ["1 Square = ", legendInfo?.squareSize, " x ", legendInfo?.squareSize, " km"] })] }) }));
+}

package/dist/components/sidebar/common/info-popover.d.ts

@@ -0,0 +1,10 @@
+interface InfoPopoverProps {
+    item?: any;
+    containerStyle?: any;
+}
+export declare function InfoPopover({ item, containerStyle }: InfoPopoverProps): import("react/jsx-runtime").JSX.Element;
+export declare const PopoverWrapper: ({ item }: {
+    item: any;
+}) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=info-popover.d.ts.map

package/dist/components/sidebar/common/info-popover.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"info-popover.d.ts","sourceRoot":"","sources":["../../../../src/components/sidebar/common/info-popover.tsx"],"names":[],"mappings":"AAwDA,UAAU,gBAAgB;IACxB,IAAI,CAAC,MAAC;IACN,cAAc,CAAC,MAAC;CACjB;AAED,wBAAgB,WAAW,CAAC,EAAE,IAAI,EAAE,cAAc,EAAE,EAAE,gBAAgB,2CA2ErE;AAED,eAAO,MAAM,cAAc,GAAI;;CAAQ,4CAqBtC,CAAC"}

package/dist/components/sidebar/common/info-popover.js

@@ -0,0 +1,32 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PopoverWrapper = void 0;
+exports.InfoPopover = InfoPopover;
+const jsx_runtime_1 = require("react/jsx-runtime");
+// @ts-nocheck
+const react_1 = require("react");
+const react_tiny_popover_1 = require("react-tiny-popover");
+const use_layers_1 = __importDefault(require("../../../hooks/use-layers"));
+const core_1 = require("../../core");
+const LayerInfoLine = ({ icon, name, title, link, children, }) => {
+    const content = (0, jsx_runtime_1.jsx)("span", { children: children || "-" });
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "flex gap-3 text-sm text-gray-600 break-all", title: name && title && `${name}: ${itle}`, children: [(0, jsx_runtime_1.jsx)("div", { children: icon }), link ? ((0, jsx_runtime_1.jsx)("a", { className: "text-blue-700 focus:outline-none focus:ring", target: "_blank", rel: "noopener", href: link, children: content })) : (content)] }));
+};
+function InfoPopover({ item, containerStyle }) {
+    const { layer, mp } = (0, use_layers_1.default)();
+    const license = item.license || "CC-BY";
+    const createdOn = item?.createdDate && new Date(item.createdDate).toLocaleDateString();
+    const tags = item.tags?.join(", ");
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-1 bg-white p-4 rounded-lg w-72 border border-gray-300 border-solid", style: containerStyle, children: [mp.managePublishing && item.layerStatus && ((0, jsx_runtime_1.jsxs)(LayerInfoLine, { icon: (0, jsx_runtime_1.jsx)(core_1.EyeIcon, {}), name: ("visiblity"), title: item.layerStatus, children: [item.layerStatus, (0, jsx_runtime_1.jsx)("button", { className: "text-blue-600 focus:outline-none ml-4", onClick: () => layer.togglePublish(item.id, item?.layerStatus), children: ("toggle") }), (0, jsx_runtime_1.jsx)("button", { className: "text-red-600 focus:outline-none ml-4", onClick: () => layer.delete(item.id, t("are_you_sure")), children: ("delete") })] })), (0, jsx_runtime_1.jsx)(LayerInfoLine, { icon: (0, jsx_runtime_1.jsx)(core_1.AttributionIcon, {}), link: item.url, name: ("uploader"), title: item.createdBy, children: item.createdBy }), (0, jsx_runtime_1.jsx)(LayerInfoLine, { icon: (0, jsx_runtime_1.jsx)(core_1.AttributionIcon, {}), link: item.url, name: ("created_by"), title: item.attribution, children: item.attribution }), (0, jsx_runtime_1.jsx)(LayerInfoLine, { icon: (0, jsx_runtime_1.jsx)(core_1.ClockIcon, {}), name: ("created_on"), title: createdOn, children: createdOn }), (0, jsx_runtime_1.jsx)(LayerInfoLine, { icon: (0, jsx_runtime_1.jsx)(core_1.TagIcon, {}), name: ("tags"), title: ags, children: ags }), (0, jsx_runtime_1.jsx)(LayerInfoLine, { name: ("license"), title: license, 
+                // link={license && LICENSES[license]}
+                icon: (0, jsx_runtime_1.jsx)(core_1.LicenseIcon, {}), children: license })] }));
+}
+const PopoverWrapper = ({ item }) => {
+    const [isPopoverOpen, setIsPopoverOpen] = (0, react_1.useState)(false);
+    const togglePopover = () => setIsPopoverOpen(!isPopoverOpen);
+    return ((0, jsx_runtime_1.jsx)(react_tiny_popover_1.Popover, { isOpen: isPopoverOpen, padding: 10, positions: ["right"], containerStyle: { zIndex: 99 }, onClickOutside: togglePopover, content: (0, jsx_runtime_1.jsx)(InfoPopover, { item: item }), children: (0, jsx_runtime_1.jsx)(core_1.Button, { onClick: togglePopover, children: (0, jsx_runtime_1.jsx)(core_1.InfoIcon, {}), title: "Information" }) }));
+};
+exports.PopoverWrapper = PopoverWrapper;

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

@@ -0,0 +1,4 @@
+export default function LayerItemStyle({ item }: {
+    item: any;
+}): import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=layer-item-style.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"layer-item-style.d.ts","sourceRoot":"","sources":["../../../../src/components/sidebar/common/layer-item-style.tsx"],"names":[],"mappings":"AAOA,MAAM,CAAC,OAAO,UAAU,cAAc,CAAC,EAAE,IAAI,EAAE,EAAE;IAAE,IAAI,EAAE,GAAG,CAAA;CAAE,kDA0B7D"}

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

@@ -0,0 +1,21 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = LayerItemStyle;
+const jsx_runtime_1 = require("react/jsx-runtime");
+// @ts-nocheck
+const use_layers_1 = __importDefault(require("../../../hooks/use-layers"));
+const core_1 = require("../../core");
+const moreless_1 = __importDefault(require("./moreless"));
+const style_legend_1 = require("./style-legend");
+function LayerItemStyle({ item }) {
+    if (!item.data?.styles)
+        return null;
+    const { layer } = (0, use_layers_1.default)();
+    const onStyleChange = (e) => {
+        layer.updateStyle(item.id, Number(e.target.value));
+    };
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-4 pt-2", children: [item.layerType !== "RASTER" && ((0, jsx_runtime_1.jsx)(core_1.SelectInput, { onChange: onStyleChange, children: item.data?.styles.map((opt, idx) => ((0, jsx_runtime_1.jsx)("option", { value: idx, children: opt.styleTitle }, idx))) })), (0, jsx_runtime_1.jsx)(moreless_1.default, { children: (0, jsx_runtime_1.jsx)(style_legend_1.StyleLegend, { item: item }) })] }));
+}

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

@@ -0,0 +1,11 @@
+import { GeoserverLayer } from "../../../interfaces";
+interface LayerItemProps {
+    item: GeoserverLayer;
+    extended?: boolean;
+    /** dnd-kit handlers passed from Sortable wrapper */
+    dragHandleProps?: any;
+    dragHandleRef?: any;
+}
+export default function LayerItem({ item, extended, dragHandleProps, dragHandleRef, }: LayerItemProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=layer-item.d.ts.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,59 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = LayerItem;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const use_layers_1 = __importDefault(require("../../../hooks/use-layers"));
+const naksha_1 = require("../../../services/naksha");
+const constants_1 = require("../../../static/constants");
+const core_1 = require("../../core");
+const highlighter_1 = require("../../core/highlighter");
+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"));
+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));
+    const [isLoading, setIsLoading] = (0, react_1.useState)(false);
+    const shareUrl = `${window.location.href.split("?")[0]}?layers=${item.id}`;
+    /** native Web Share API replacement */
+    const shareLayer = async () => {
+        const shareData = {
+            title: item.title,
+            text: item.title,
+            url: shareUrl,
+        };
+        if (navigator.share) {
+            try {
+                await navigator.share(shareData);
+            }
+            catch { }
+        }
+        else {
+            await navigator.clipboard.writeText(shareUrl);
+            alert("Link copied to clipboard");
+        }
+    };
+    const onToggleLayer = async () => {
+        setIsLoading(true);
+        setIsInfoBarOpen(true);
+        layer.setSelectedFeatures([]);
+        setClickedLngLat(null);
+        await layer.toggle({ layerId: item.id, add: !isAdded });
+        setIsAdded(!isAdded);
+        setIsLoading(false);
+    };
+    const onDownloadLayer = async () => {
+        await (0, naksha_1.axDownloadLayer)(
+        // @ts-ignore
+        mp.nakshaApiEndpoint, mp.nakshaEndpointToken, item.id, item.title);
+        // @ts-ignore
+        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 })] }));
+}

package/dist/components/sidebar/common/moreless.d.ts

@@ -0,0 +1,4 @@
+export default function MoreLess({ children }: {
+    children: any;
+}): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=moreless.d.ts.map

package/dist/components/sidebar/common/moreless.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"moreless.d.ts","sourceRoot":"","sources":["../../../../src/components/sidebar/common/moreless.tsx"],"names":[],"mappings":"AAGA,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAC,EAAE,QAAQ,EAAE;;CAAA,2CAc5C"}

package/dist/components/sidebar/common/moreless.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = MoreLess;
+const jsx_runtime_1 = require("react/jsx-runtime");
+// @ts-nocheck
+const react_1 = require("react");
+function MoreLess({ children }) {
+    const [showMore, setShowMore] = (0, react_1.useState)(false);
+    return ((0, jsx_runtime_1.jsxs)("div", { children: [showMore && children, (0, jsx_runtime_1.jsx)("button", { onClick: () => setShowMore(!showMore), className: `text-blue-600 focus:outline-none focus:outline focus:ring`, children: showMore ? ("less") : ("legend") })] }));
+}

package/dist/components/sidebar/common/opacity-handler-addon.d.ts

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

package/dist/components/sidebar/common/opacity-handler-addon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"opacity-handler-addon.d.ts","sourceRoot":"","sources":["../../../../src/components/sidebar/common/opacity-handler-addon.tsx"],"names":[],"mappings":"AAEA,QAAA,MAAM,aAAa,+CAqBlB,CAAC;AAEF,eAAe,aAAa,CAAC"}

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

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+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        " }) }));
+};
+exports.default = OpacitySlider;

package/dist/components/sidebar/common/style-legend.d.ts

@@ -0,0 +1,4 @@
+export declare function StyleLegend({ item }: {
+    item: any;
+}): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=style-legend.d.ts.map

package/dist/components/sidebar/common/style-legend.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"style-legend.d.ts","sourceRoot":"","sources":["../../../../src/components/sidebar/common/style-legend.tsx"],"names":[],"mappings":"AAKA,wBAAgB,WAAW,CAAC,EAAE,IAAI,EAAE;;CAAA,2CA4CnC"}

package/dist/components/sidebar/common/style-legend.js

@@ -0,0 +1,23 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StyleLegend = StyleLegend;
+const jsx_runtime_1 = require("react/jsx-runtime");
+// @ts-nocheck
+const react_1 = require("react");
+const use_layers_1 = __importDefault(require("../../../hooks/use-layers"));
+function StyleLegend({ item }) {
+    const [showImage, setShowImage] = (0, react_1.useState)(true);
+    const { mp } = (0, use_layers_1.default)();
+    const { t } = useT();
+    const legendStyles = (0, react_1.useMemo)(() => item?.data?.styles?.[item.data.styleIndex]?.colors?.paint?.["fill-color"]
+        ?.stops ||
+        item?.data?.styles?.[item.data.styleIndex]?.colors?.paint?.["circle-color"]?.stops ||
+        [], [item]);
+    const vectorLegend = () => {
+        return legendStyles.map(([title, color]) => ((0, jsx_runtime_1.jsxs)("li", { className: "flex gap-2 items-center mb-1", children: [(0, jsx_runtime_1.jsx)("svg", { viewBox: "0 0 24 24", height: "14", width: "14", focusable: "false", children: (0, jsx_runtime_1.jsx)("circle", { cx: "12", fill: color, cy: "12", r: "12", stroke: "none" }) }), (0, jsx_runtime_1.jsx)("div", { children: title })] }, color)));
+    };
+    return ((0, jsx_runtime_1.jsx)("ul", { style: { margin: 0, padding: 0 }, children: item.layerType !== "RASTER" ? (vectorLegend()) : showImage ? ((0, jsx_runtime_1.jsx)("li", { children: (0, jsx_runtime_1.jsx)("img", { style: { margin: "5px" }, onError: () => setShowImage(false), src: `${mp?.geoserver?.endpoint}/wms?REQUEST=GetLegendGraphic&VERSION=1.0.0&WIDTH=20&HEIGHT=20&STRICT=false&layer=biodiv:${item.id}` }) })) : ((0, jsx_runtime_1.jsx)("div", { children: t("raster_style_not_found") })) }));
+}

package/dist/components/sidebar/common.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=common.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"common.d.ts","sourceRoot":"","sources":["../../../src/components/sidebar/common.tsx"],"names":[],"mappings":""}