@biodiv-platform/naksha-maplibre-layers 5.0.0

package/dist/esm/index.js

@@ -0,0 +1,2346 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __pow = Math.pow;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __async = (__this, __arguments, generator) => {
+  return new Promise((resolve, reject) => {
+    var fulfilled = (value) => {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var rejected = (value) => {
+      try {
+        step(generator.throw(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
+    step((generator = generator.apply(__this, __arguments)).next());
+  });
+};
+
+// src/index.tsx
+import { TranslationProvider } from "@biodiv-platform/naksha-commons";
+import React14 from "react";
+import { MapProvider } from "react-map-gl/maplibre";
+import { setup } from "twind";
+
+// locales/en.json
+var en_default = {
+  are_you_sure: "Are you sure?",
+  base_style: "Base Style",
+  clear: "Clear Selection",
+  created_by: "Attribution",
+  created_on: "Created On",
+  delete: "Delete",
+  download: "Download",
+  find_layer_by_name: "Find layer by name",
+  infobar: "Attributes at Clicked Location",
+  information: "Information",
+  layer_selection: "Layer Selection",
+  layer_selection_all: "All Layers",
+  layer_selection_top: "Top Layer Only",
+  layers: "Layers",
+  legend: "Legend",
+  less: "Less",
+  license: "License",
+  list_layers: "List Layers",
+  pending: "Pending",
+  publish: "Publish",
+  raster_style_not_found: "Style not available for the given layer",
+  remove: "Remove",
+  selected: "Selected",
+  settings: "Settings",
+  square: "Square",
+  tags: "Tags",
+  toggle: "Toggle Publishing",
+  uploaded: "Uploaded",
+  uploader: "Uploader",
+  url: "URL",
+  visiblity: "Visiblity"
+};
+
+// locales/fr.json
+var fr_default = {
+  are_you_sure: "\xCAtes-vous s\xFBr?",
+  base_style: "Style de base",
+  clear: "Effacer la s\xE9lection",
+  created_by: "Attribution",
+  created_on: "Cr\xE9\xE9 sur",
+  delete: "Effacer",
+  download: "T\xE9l\xE9charger",
+  find_layer_by_name: "Trouver la couche par nom",
+  infobar: "Attributs \xE0 l'emplacement cliqu\xE9",
+  information: "Informations",
+  layer_selection_all: "Toutes les couches",
+  layer_selection_top: "Couche sup\xE9rieure uniquement",
+  layer_selection: "S\xE9lection de calque",
+  layers: "Couches",
+  legend: "L\xE9gende",
+  less: "Moins",
+  license: "Licence",
+  list_layers: "Liste des couches",
+  pending: "En attente",
+  publish: "Publier",
+  remove: "Supprimer",
+  selected: "Choisie",
+  settings: "Param\xE8tres",
+  square: "Carr\xE9",
+  toggle: "Basculer la publication",
+  uploaded: "T\xE9l\xE9charg\xE9",
+  url: "url"
+};
+
+// locales/hi.json
+var hi_default = {
+  are_you_sure: "\u0915\u094D\u092F\u093E \u0906\u092A\u0915\u094B \u092F\u0915\u0940\u0928 \u0939\u0948?",
+  base_style: "\u0906\u0927\u093E\u0930 \u0936\u0948\u0932\u0940",
+  clear: "\u091A\u092F\u0928 \u0938\u093E\u092B\u093C \u0915\u0930\u0947\u0902",
+  created_by: "\u0906\u0930\u094B\u092A\u0923",
+  created_on: "\u092A\u0930 \u092C\u0928\u093E\u092F\u093E",
+  delete: "\u0939\u091F\u093E\u090F\u0902",
+  download: "\u0921\u093E\u0909\u0928\u0932\u094B\u0921",
+  find_layer_by_name: "\u0928\u093E\u092E \u0938\u0947 \u092A\u0930\u0924 \u0916\u094B\u091C\u0947\u0902",
+  infobar: "\u0915\u094D\u0932\u093F\u0915 \u0915\u093F\u090F \u0917\u090F \u0938\u094D\u0925\u093E\u0928 \u092A\u0930 \u0935\u093F\u0936\u0947\u0937\u0924\u093E\u090F\u0902",
+  information: "\u091C\u093E\u0928\u0915\u093E\u0930\u0940",
+  layer_selection_all: "\u0938\u092D\u0940 \u092A\u0930\u0924\u0947\u0902",
+  layer_selection_top: "\u0915\u0947\u0935\u0932 \u0936\u0940\u0930\u094D\u0937 \u092A\u0930\u0924",
+  layer_selection: "\u092A\u0930\u0924 \u091A\u092F\u0928",
+  layers: "\u092A\u0930\u0924\u0947\u0902",
+  legend: "\u0915\u093F\u0902\u0935\u0926\u0902\u0924\u0940",
+  less: "\u0915\u092E",
+  license: "\u0932\u093E\u0907\u0938\u0947\u0902\u0938",
+  list_layers: "\u0938\u0942\u091A\u0940 \u092A\u0930\u0924\u0947\u0902",
+  pending: "\u0932\u0902\u092C\u093F\u0924",
+  publish: "\u092A\u094D\u0930\u0915\u093E\u0936\u093F\u0924",
+  remove: "\u0939\u091F\u093E\u0928\u093E",
+  selected: "\u091A\u092F\u0928\u093F\u0924",
+  settings: "\u0938\u092E\u093E\u092F\u094B\u091C\u0928",
+  square: "\u0938\u094D\u0915\u094D\u0935\u093E\u092F\u0930",
+  tags: "\u091F\u0948\u0917",
+  toggle: "\u092A\u094D\u0930\u0915\u093E\u0936\u0928 \u091F\u0949\u0917\u0932 \u0915\u0930\u0947\u0902",
+  uploaded: "\u0905\u092A\u0932\u094B\u0921 \u0915\u093F\u092F\u093E \u0917\u092F\u093E",
+  url: "\u092F\u0942\u0906\u0930\u090F\u0932"
+};
+
+// locales/index.ts
+var locales_default = { en: en_default, fr: fr_default, hi: hi_default };
+
+// src/components/map/index.tsx
+import { defaultViewState as defaultViewState2 } from "@biodiv-platform/naksha-commons";
+import { useMemo as useMemo7, useState as useState10 } from "react";
+import MapGL, { NavigationControl } from "react-map-gl/maplibre";
+import { tw as tw20 } from "twind";
+
+// src/hooks/use-layers.tsx
+import { defaultMapStyles, useDebounce } from "@biodiv-platform/naksha-commons";
+import React, {
+  createContext,
+  useContext,
+  useEffect,
+  useMemo,
+  useState
+} from "react";
+import { useMap } from "react-map-gl/maplibre";
+
+// src/services/naksha.ts
+import cb from "colorbrewer";
+import axios from "redaxios";
+
+// src/utils/grid.ts
+import BoundingBox from "boundingbox";
+import { GeoHash } from "geohash";
+
+// src/static/constants.tsx
+import { MapStyles, defaultViewState } from "@biodiv-platform/naksha-commons";
+var defaultNakshaProps = {
+  defaultViewState,
+  nakshaApiEndpoint: "/naksha-api/api",
+  geoserver: { endpoint: "/geoserver", workspace: "biodiv", store: "ibp" },
+  mapStyle: MapStyles.MAP_STREETS,
+  layers: [],
+  selectedLayers: []
+};
+var FALLBACK_THUMB = "data:image/svg+xml,%3Csvg fill='none' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 72 72'%3E%3Cpath fill='%23fff' d='M0 0h72v72H0z'/%3E%3Cpath d='M35.981 48.293l-13.853-10.77-3.045 2.368L36 53.048l16.917-13.157-3.064-2.387-13.872 10.789zM36 43.519l13.834-10.77 3.083-2.388L36 17.204 19.083 30.36l3.064 2.387L36 43.518z' fill='%23A0AEC0'/%3E%3C/svg%3E";
+var overflowStyle = {
+  display: "-webkit-box",
+  WebkitLineClamp: 1,
+  WebkitBoxOrient: "vertical",
+  overflow: "hidden",
+  wordBreak: "break-word"
+};
+var overflowStyle2 = __spreadProps(__spreadValues({}, overflowStyle), {
+  WebkitLineClamp: 2
+});
+var PROPERTY_ID = "ogc_fid";
+var LAYER_STATUS = {
+  ACTIVE: "Active",
+  PENDING: "Pending"
+};
+var SELECTION_STYLE = {
+  TOP: "layer_selection_top",
+  ALL: "layer_selection_all"
+};
+
+// src/utils/grid.ts
+var getZoomConfig = (zoom) => {
+  if (zoom < 6)
+    return [4, 1, 39.2];
+  else if (zoom < 7)
+    return [5, 0, 19.6];
+  else if (zoom < 8)
+    return [5, 1, 9.8];
+  else if (zoom < 9)
+    return [5, -1, 4.9];
+  else if (zoom < 10)
+    return [6, 0, 2.45];
+  else if (zoom < 11)
+    return [6, 1, 1.225];
+  else if (zoom < 12)
+    return [7, 0, 0.612];
+  else if (zoom < 13)
+    return [7, 1, 0.306];
+  else if (zoom < 14)
+    return [7, -1, 0.153];
+  else if (zoom < 15)
+    return [8, 0, 0.077];
+  return [8, 1, 0.039];
+};
+var BASE32 = "0123456789bcdefghjkmnpqrstuvwxyz";
+var aggregateGeohashKey = (key, level, binSize) => {
+  binSize = binSize || 16 / __pow(2, 1 - key.length & 1) / __pow(4, level);
+  const keyExceptLast = key.slice(0, -1);
+  const binnedCharAt = ~~(BASE32.indexOf(key.slice(-1)) / binSize);
+  return [
+    keyExceptLast + BASE32[binSize * binnedCharAt],
+    keyExceptLast + BASE32[binSize * (binnedCharAt + 1) - 1]
+  ];
+};
+var processRectangles = function(data, level) {
+  var counts = /* @__PURE__ */ new Map();
+  var bins = /* @__PURE__ */ new Map();
+  const features = [];
+  for (const [hash, count] of Object.entries(data)) {
+    const [kStart, kEnd] = aggregateGeohashKey(hash, level);
+    bins.set(kStart, kEnd);
+    if (!counts.has(kStart)) {
+      counts.set(kStart, 0);
+    }
+    counts.set(kStart, counts.get(kStart) + count);
+  }
+  counts.forEach((count, hash) => {
+    const bboxStart = GeoHash.decodeGeoHash(hash);
+    const bboxEnd = GeoHash.decodeGeoHash(bins.get(hash));
+    const feature = new BoundingBox({
+      minlat: bboxStart.latitude[0],
+      minlon: bboxStart.longitude[0],
+      maxlat: bboxEnd.latitude[1],
+      maxlon: bboxEnd.longitude[1]
+    }).toGeoJSON();
+    features.push(__spreadProps(__spreadValues({}, feature), { properties: { count, [PROPERTY_ID]: hash } }));
+  });
+  return features;
+};
+var processSquares = (data) => {
+  const features = [];
+  for (const [hash, count] of Object.entries(data)) {
+    const bbox = GeoHash.decodeGeoHash(hash);
+    const feature = new BoundingBox({
+      minlat: bbox.latitude[0],
+      minlon: bbox.longitude[0],
+      maxlat: bbox.latitude[1],
+      maxlon: bbox.longitude[1]
+    }).toGeoJSON();
+    features.push(__spreadProps(__spreadValues({}, feature), { properties: { count, [PROPERTY_ID]: hash } }));
+  }
+  return features;
+};
+var geohashToJSON = (data, level) => ({
+  type: "FeatureCollection",
+  features: Object.keys(data).length === 0 ? [] : level === -1 ? processSquares(data) : processRectangles(data, level)
+});
+var getDataBins = (data, binCount) => {
+  const sortedData = Object.values(data).sort((a, b) => a - b);
+  const cutoff = Math.floor(sortedData.length / binCount);
+  const tBins = new Array(binCount - 1).fill(0).map((_, index) => sortedData[cutoff * (index + 1)]);
+  tBins.push(sortedData[sortedData.length - 1]);
+  return tBins;
+};
+
+// src/utils/naksha.ts
+import produce from "immer";
+var parseGeoserverLayersXml = (layers, nakshaApiEndpoint, geoserver, selectedLayers) => __async(void 0, null, function* () {
+  const parsedLayers = [];
+  for (const l of layers) {
+    const isAdded = selectedLayers.includes(l.name);
+    const _l = __spreadProps(__spreadValues({}, l), {
+      id: l.name,
+      thumbnail: nakshaApiEndpoint + l.thumbnail,
+      source: {
+        type: l.layerType.toLowerCase() === "raster" ? "raster" : "vector",
+        scheme: "tms",
+        tiles: [
+          `${geoserver.endpoint}/gwc/service/tms/1.0.0/${geoserver.workspace}:${l.name}@EPSG%3A900913@pbf/{z}/{x}/{y}.pbf`
+        ]
+      },
+      data: { styles: [] },
+      isAdded
+    });
+    if (isAdded) {
+      const _ld = yield getLayerStyle(_l, 0, nakshaApiEndpoint, geoserver);
+      parsedLayers.push(__spreadProps(__spreadValues({}, _l), { data: _ld }));
+    } else {
+      parsedLayers.push(_l);
+    }
+  }
+  return parsedLayers;
+});
+var getLayerStyle = (layer, styleIndex, nakshaApiEndpoint, geoserver) => __async(void 0, null, function* () {
+  const nextSl = produce(layer.data, (_draft) => __async(void 0, null, function* () {
+    var _a;
+    if (_draft.styles.length === 0) {
+      const { success, data } = yield axGetGeoserverLayerStyleList(
+        layer.id,
+        nakshaApiEndpoint
+      );
+      if (success) {
+        _draft.layerName = data.layerName;
+        _draft.styles = data.styles;
+        _draft.summaryColumn = data.summaryColumn;
+        _draft.titleColumn = data.titleColumn;
+        _draft.propertyMap = Object.fromEntries(
+          data.styles.map((o) => [o.styleName, o.styleTitle])
+        );
+      }
+    }
+    if (_draft.styles[styleIndex] && !((_a = _draft.styles[styleIndex]) == null ? void 0 : _a.colors)) {
+      _draft.styles[styleIndex].colors = yield axGetGeoserverLayerStyle(
+        layer.id,
+        geoserver == null ? void 0 : geoserver.workspace,
+        _draft.styles[styleIndex].styleName,
+        nakshaApiEndpoint
+      );
+    }
+    _draft.styleIndex = styleIndex;
+  }));
+  return nextSl;
+});
+
+// src/services/naksha.ts
+var axGetGeoserverLayers = (nakshaEndpointToken, nakshaApiEndpoint, geoserver, selectedLayers) => __async(void 0, null, function* () {
+  try {
+    const res = yield axios.get(`${nakshaApiEndpoint}/layer/all`, {
+      headers: { Authorization: nakshaEndpointToken }
+    });
+    const finalLayers = yield parseGeoserverLayersXml(
+      res.data,
+      nakshaApiEndpoint,
+      geoserver,
+      selectedLayers
+    );
+    return finalLayers;
+  } catch (e) {
+    console.error(e);
+    return [];
+  }
+});
+var axGetGeoserverLayerStyleList = (id, endpoint) => __async(void 0, null, function* () {
+  try {
+    const { data } = yield axios.get(`${endpoint}/layer/onClick/${id}`);
+    return { success: true, data };
+  } catch (e) {
+    console.error(e);
+    return { success: false };
+  }
+});
+var axGexGetRasterInfoWithLonLat = (endpoint, workspace, params) => __async(void 0, null, function* () {
+  const RasterInfoParams = {
+    service: "WMS",
+    version: "1.1.1",
+    request: "GetFeatureInfo",
+    info_format: "application/json",
+    width: 100,
+    height: 100,
+    x: 50,
+    y: 50,
+    srs: "EPSG:4326"
+  };
+  try {
+    const res = yield axios.get(`${endpoint}/${workspace}/wms`, {
+      params: __spreadValues(__spreadValues({}, params), RasterInfoParams)
+    });
+    return { success: true, data: res.data };
+  } catch (e) {
+    console.error(e);
+    return { success: false, data: [] };
+  }
+});
+var axToggleLayerPublishing = (nakshaEndpointToken, nakshaApiEndpoint, layerId, isActive) => __async(void 0, null, function* () {
+  try {
+    yield axios.put(
+      `${nakshaApiEndpoint}/layer/${isActive ? "active" : "pending"}/${layerId}`,
+      {},
+      { headers: { Authorization: nakshaEndpointToken } }
+    );
+    return true;
+  } catch (e) {
+    console.error(e);
+    return false;
+  }
+});
+var axDeleteLayer = (nakshaEndpointToken, nakshaApiEndpoint, layerId) => __async(void 0, null, function* () {
+  try {
+    yield axios.delete(`${nakshaApiEndpoint}/layer/${layerId}`, {
+      headers: { Authorization: nakshaEndpointToken }
+    });
+    return true;
+  } catch (e) {
+    console.error(e);
+    return false;
+  }
+});
+var axGetGeoserverLayerStyle = (layername, workspace, styleName, endpoint) => __async(void 0, null, function* () {
+  var _a, _b;
+  try {
+    const res = yield axios.get(
+      `${endpoint}/geoserver/workspaces/${workspace}/styles/${layername}_${styleName}.mbstyle`
+    );
+    return (_b = (_a = res.data) == null ? void 0 : _a.layers) == null ? void 0 : _b[0];
+  } catch (e) {
+    console.error(e);
+    return {};
+  }
+});
+var getGridLayerData = (fetcher, bounds, zoom, binCount = 6, colorScheme = "YlOrRd") => __async(void 0, null, function* () {
+  try {
+    const [geoAggegationPrecision, level, squareSize] = getZoomConfig(zoom);
+    const { _ne, _sw } = bounds;
+    const params = {
+      top: _ne.lat,
+      left: _sw.lng,
+      bottom: _sw.lat,
+      right: _ne.lng,
+      geoAggegationPrecision
+    };
+    const data = yield fetcher(params);
+    const geojson = geohashToJSON(data, level);
+    const bins = getDataBins(data, binCount);
+    const stops = bins.map((bin, index) => [
+      bin,
+      cb[colorScheme][binCount][index]
+    ]);
+    const paint2 = {
+      "fill-color": {
+        property: "count",
+        default: "yellow",
+        stops
+      },
+      "fill-outline-color": "rgba(0,0,0,0.2)",
+      "fill-opacity": 0.7
+    };
+    return { success: true, geojson, paint: paint2, stops, squareSize };
+  } catch (e) {
+    console.error(e);
+    return { success: false, geojson: {}, paint: {}, stops: [], squareSize: 0 };
+  }
+});
+var axDownloadLayer = (endpoint, token, layerName, layerTitle) => __async(void 0, null, function* () {
+  try {
+    yield axios.post(
+      `${endpoint}/layer/download`,
+      { layerName, layerTitle, attributeList: [], filterArray: [] },
+      { headers: { Authorization: token } }
+    );
+  } catch (e) {
+    console.error(e);
+  }
+});
+
+// src/hooks/use-layers.tsx
+import { jsx } from "react/jsx-runtime";
+var LayersContext = createContext(
+  {}
+);
+var LayersProvider = ({ mp: _mp, children }) => {
+  const [mp, setMP] = useState(_mp);
+  const { mapl } = useMap();
+  const [queryTerm, setQueryTerm] = useState("");
+  const queryTermDebounced = useDebounce(queryTerm, 500);
+  const [mapStyle, setMapStyle] = useState(
+    defaultMapStyles[(mp == null ? void 0 : mp.mapStyle) || 0].style
+  );
+  const [selectionStyle, setSelectionStyle] = useState(
+    SELECTION_STYLE.TOP
+  );
+  const [gridLegends, setGridLegends] = useState({});
+  const [isInfoBarOpen, setIsInfoBarOpen] = useState(true);
+  const [clickedLngLat, setClickedLngLat] = useState();
+  const [layers, setLayers] = useState(_mp.layers || []);
+  const [selectedLayerIds, setSelectedLayerIds] = useState(
+    mp.selectedLayers || []
+  );
+  const [hoverFeatures, setHoverFeatures] = useState();
+  const [selectedFeatures, setSelectedFeatures] = useState();
+  const selectedFeaturesId = useMemo(() => {
+    var _a;
+    const meta = {};
+    for (const qr of selectedFeatures || []) {
+      meta[qr.sourceLayer] = [
+        ...meta[qr.sourceLayer] || [],
+        (_a = qr == null ? void 0 : qr.properties) == null ? void 0 : _a[PROPERTY_ID]
+      ];
+    }
+    return Object.keys(meta).length ? meta : void 0;
+  }, [selectedFeatures]);
+  const selectedLayers = React.useMemo(() => {
+    const unsortedLayers = layers.filter(
+      (_layer) => selectedLayerIds.includes(_layer.id)
+    );
+    const sortedLayers = new Array(selectedLayerIds.length);
+    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) => {
+    return layers.findIndex((layer) => layer.id === layerId);
+  };
+  const updateLayerById = (layerId, updatedLayer) => {
+    setLayers(
+      (_layers) => _layers.map((l) => l.id === layerId ? __spreadValues(__spreadValues({}, l), updatedLayer) : l)
+    );
+  };
+  const toggleVectorLayer = (layerIndex, styleIndex, focus) => __async(void 0, null, function* () {
+    const layer = layers[layerIndex];
+    const layerData = yield getLayerStyle(
+      layer,
+      styleIndex,
+      mp.nakshaApiEndpoint,
+      mp.geoserver
+    );
+    updateLayerById(layer.id, { data: layerData });
+    focus && (mapl == null ? void 0 : mapl.fitBounds(layer.bbox, { padding: 40, duration: 1e3 }));
+  });
+  const updateLayerStyle = (layerId, styleIndex) => __async(void 0, null, function* () {
+    const layerIndex = getLayerIndexById(layerId);
+    toggleVectorLayer(layerIndex, styleIndex, false);
+  });
+  const onMapHover = (e) => __async(void 0, null, function* () {
+    var _a, _b, _c, _d;
+    if (!selectedLayerIds.length || !mapl)
+      return;
+    try {
+      const lastLayerId = selectedLayerIds[0];
+      const feats = mapl.queryRenderedFeatures(e.point, {
+        layers: [lastLayerId]
+      });
+      if (feats.length) {
+        const fId = ((_a = feats[0]) == null ? void 0 : _a.id) || ((_c = (_b = feats[0]) == null ? void 0 : _b.properties) == null ? void 0 : _c[PROPERTY_ID]);
+        if (fId === (hoverFeatures == null ? void 0 : hoverFeatures.id))
+          return;
+        const layer = layers[getLayerIndexById(lastLayerId)];
+        const hoverProperties = (_d = layer == null ? void 0 : layer.data) == null ? void 0 : _d.summaryColumn.map((sc) => {
+          var _a2, _b2, _c2;
+          return [
+            ((_b2 = (_a2 = layer.data) == null ? void 0 : _a2.propertyMap) == null ? void 0 : _b2[sc]) || sc,
+            (_c2 = feats[0].properties) == null ? void 0 : _c2[sc]
+          ];
+        });
+        setHoverFeatures({
+          id: fId,
+          title: layer.title,
+          data: hoverProperties
+        });
+      } else {
+        setHoverFeatures(void 0);
+      }
+    } catch (e2) {
+    }
+  });
+  const toggleLayer = (_0) => __async(void 0, [_0], function* ({
+    layerId,
+    add,
+    styleIndex = 0,
+    focus = true
+  }) {
+    var _a;
+    if (!add) {
+      setSelectedLayerIds(
+        selectedLayerIds.filter((_lyrId) => layerId !== _lyrId)
+      );
+      return;
+    }
+    const layerIndex = getLayerIndexById(layerId);
+    const sourceType = (_a = layers[layerIndex]) == null ? void 0 : _a.source.type;
+    yield toggleVectorLayer(layerIndex, styleIndex, focus);
+    setSelectedLayerIds((_slIds) => [
+      layerId,
+      ..._slIds.filter((lid) => lid !== layerId)
+    ]);
+  });
+  const clearAllLayers = () => __async(void 0, null, function* () {
+    return setSelectedLayerIds([]);
+  });
+  const updateMP = (key, value) => {
+    setMP(__spreadProps(__spreadValues({}, mp), { [key]: value }));
+  };
+  const toggleLayerPublishing = (layerId, layerStatus) => {
+    const isActive = layerStatus === LAYER_STATUS.PENDING;
+    axToggleLayerPublishing(
+      mp.nakshaEndpointToken,
+      mp.nakshaApiEndpoint,
+      layerId,
+      isActive
+    );
+    updateLayerById(layerId, {
+      layerStatus: isActive ? LAYER_STATUS.ACTIVE : LAYER_STATUS.PENDING
+    });
+  };
+  const deleteLayer = (layerId, message) => __async(void 0, null, function* () {
+    if (confirm(message)) {
+      axDeleteLayer(mp.nakshaEndpointToken, mp.nakshaApiEndpoint, layerId);
+      setLayers(layers.filter((l) => l.id !== layerId));
+    }
+  });
+  const zoomToExtent = (layerId) => {
+    const layerIndex = getLayerIndexById(layerId);
+    const layer = layers[layerIndex];
+    mapl == null ? void 0 : mapl.fitBounds(layer.bbox, { padding: 40, duration: 1e3 });
+  };
+  const getBBoxFromLngLat = () => {
+    return [
+      clickedLngLat.lng,
+      clickedLngLat.lat,
+      clickedLngLat.lng + 0.1,
+      clickedLngLat.lat + 0.1
+    ];
+  };
+  const handleSelectStyle = (value) => {
+    setSelectionStyle(value);
+    if (value === SELECTION_STYLE.TOP) {
+      featuresAtLatLng(value);
+    }
+  };
+  const featuresAtLatLng = (value) => {
+    if (!clickedLngLat)
+      return;
+    try {
+      const finalXY = mapl == null ? void 0 : mapl.project([clickedLngLat.lng, clickedLngLat.lat]);
+      let queryFeat = mapl == null ? void 0 : mapl.queryRenderedFeatures(finalXY, {
+        layers: selectionStyle === SELECTION_STYLE.TOP ? [selectedLayerIds[0]] : selectedLayerIds
+      });
+      if ((value || selectionStyle) === SELECTION_STYLE.ALL) {
+        const rasterLayerFeat = selectedLayers.filter((item) => item.layerType == "RASTER").map((item) => ({
+          sourceLayer: item.id,
+          layerType: "raster",
+          bbox: getBBoxFromLngLat()
+        }));
+        queryFeat = [...queryFeat, ...rasterLayerFeat];
+      }
+      setSelectedFeatures(
+        (selectedLayers == null ? void 0 : selectedLayers[0].layerType) === "RASTER" && selectionStyle !== SELECTION_STYLE.ALL ? selectedLayerIds.length && (queryFeat == null ? void 0 : queryFeat.length) ? queryFeat : [
+          {
+            sourceLayer: selectedLayerIds[0],
+            layerType: "raster",
+            bbox: getBBoxFromLngLat()
+          }
+        ] : queryFeat
+      );
+    } catch (e) {
+      console.error(e);
+    }
+  };
+  useEffect(() => {
+    if (mp.onSelectedLayersChange) {
+      mp.onSelectedLayersChange(selectedLayerIds);
+    }
+  }, [selectedLayerIds]);
+  useEffect(() => {
+    setTimeout(featuresAtLatLng, 300);
+  }, [clickedLngLat, selectionStyle, selectedLayerIds]);
+  return /* @__PURE__ */ jsx(LayersContext.Provider, {
+    value: {
+      mp,
+      updateMP,
+      layer: {
+        mapStyle,
+        featuresAtLatLng,
+        setMapStyle,
+        all: layers,
+        setAll: setLayers,
+        selectedIds: selectedLayerIds,
+        handleSelectStyle,
+        setSelectedIds: setSelectedLayerIds,
+        selectedLayers,
+        clearAll: clearAllLayers,
+        toggle: toggleLayer,
+        updateStyle: updateLayerStyle,
+        selectedFeatures,
+        selectedFeaturesId,
+        setSelectedFeatures,
+        togglePublish: toggleLayerPublishing,
+        delete: deleteLayer,
+        selectionStyle,
+        setSelectionStyle,
+        zoomToExtent,
+        gridLegends,
+        setGridLegends
+      },
+      query: {
+        term: queryTermDebounced,
+        setTerm: setQueryTerm,
+        clickedLngLat,
+        setClickedLngLat
+      },
+      isInfoBarOpen,
+      setIsInfoBarOpen,
+      hover: {
+        onHover: onMapHover,
+        features: hoverFeatures
+      }
+    },
+    children
+  });
+};
+function useLayers() {
+  return useContext(LayersContext);
+}
+
+// src/components/core/button.tsx
+import React2 from "react";
+import { tw as tw2 } from "twind";
+
+// src/components/core/icons.tsx
+import { tw } from "twind";
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+var SearchIcon = () => /* @__PURE__ */ jsx2("svg", {
+  fill: "none",
+  className: tw`w-5 h-5 text-gray-400`,
+  width: "24",
+  height: "24",
+  viewBox: "0 0 24 24",
+  children: /* @__PURE__ */ jsx2("path", {
+    stroke: "currentColor",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeWidth: "2",
+    d: "M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
+  })
+});
+var LayersIcon = () => /* @__PURE__ */ jsxs("svg", {
+  width: "18",
+  height: "18",
+  fill: "none",
+  stroke: "currentColor",
+  strokeLinecap: "round",
+  strokeLinejoin: "round",
+  strokeWidth: "2",
+  viewBox: "0 0 24 24",
+  children: [
+    /* @__PURE__ */ jsx2("path", {
+      d: "M12 2L2 7 12 12 22 7 12 2z"
+    }),
+    /* @__PURE__ */ jsx2("path", {
+      d: "M2 17L12 22 22 17"
+    }),
+    /* @__PURE__ */ jsx2("path", {
+      d: "M2 12L12 17 22 12"
+    })
+  ]
+});
+var InfoIcon = () => /* @__PURE__ */ jsxs("svg", {
+  width: "16",
+  height: "16",
+  viewBox: "0 0 24 24",
+  fill: "none",
+  stroke: "currentColor",
+  strokeWidth: "2",
+  strokeLinecap: "round",
+  strokeLinejoin: "round",
+  children: [
+    /* @__PURE__ */ jsx2("circle", {
+      cx: "12",
+      cy: "12",
+      r: "10"
+    }),
+    /* @__PURE__ */ jsx2("line", {
+      x1: "12",
+      y1: "16",
+      x2: "12",
+      y2: "12"
+    }),
+    /* @__PURE__ */ jsx2("line", {
+      x1: "12",
+      y1: "8",
+      x2: "12.01",
+      y2: "8"
+    })
+  ]
+});
+var SlidersIcon = () => /* @__PURE__ */ jsxs("svg", {
+  width: "18",
+  height: "18",
+  fill: "none",
+  stroke: "currentColor",
+  strokeLinecap: "round",
+  strokeLinejoin: "round",
+  strokeWidth: "2",
+  viewBox: "0 0 24 24",
+  children: [
+    /* @__PURE__ */ jsx2("path", {
+      d: "M4 21L4 14"
+    }),
+    /* @__PURE__ */ jsx2("path", {
+      d: "M4 10L4 3"
+    }),
+    /* @__PURE__ */ jsx2("path", {
+      d: "M12 21L12 12"
+    }),
+    /* @__PURE__ */ jsx2("path", {
+      d: "M12 8L12 3"
+    }),
+    /* @__PURE__ */ jsx2("path", {
+      d: "M20 21L20 16"
+    }),
+    /* @__PURE__ */ jsx2("path", {
+      d: "M20 12L20 3"
+    }),
+    /* @__PURE__ */ jsx2("path", {
+      d: "M1 14L7 14"
+    }),
+    /* @__PURE__ */ jsx2("path", {
+      d: "M9 8L15 8"
+    }),
+    /* @__PURE__ */ jsx2("path", {
+      d: "M17 16L23 16"
+    })
+  ]
+});
+function AttributionIcon() {
+  return /* @__PURE__ */ jsx2("svg", {
+    width: "14",
+    height: "14",
+    viewBox: "0 0 16 16",
+    style: { display: "inline-block" },
+    children: /* @__PURE__ */ jsx2("path", {
+      fillRule: "evenodd",
+      fill: "currentColor",
+      d: "M5.5 3.5a2 2 0 100 4 2 2 0 000-4zM2 5.5a3.5 3.5 0 115.898 2.549 5.507 5.507 0 013.034 4.084.75.75 0 11-1.482.235 4.001 4.001 0 00-7.9 0 .75.75 0 01-1.482-.236A5.507 5.507 0 013.102 8.05 3.49 3.49 0 012 5.5zM11 4a.75.75 0 100 1.5 1.5 1.5 0 01.666 2.844.75.75 0 00-.416.672v.352a.75.75 0 00.574.73c1.2.289 2.162 1.2 2.522 2.372a.75.75 0 101.434-.44 5.01 5.01 0 00-2.56-3.012A3 3 0 0011 4z"
+    })
+  });
+}
+function TagIcon() {
+  return /* @__PURE__ */ jsx2("svg", {
+    width: "14",
+    height: "14",
+    viewBox: "0 0 16 16",
+    style: { display: "inline-block" },
+    children: /* @__PURE__ */ jsx2("path", {
+      fillRule: "evenodd",
+      fill: "currentColor",
+      d: "M2.5 7.775V2.75a.25.25 0 01.25-.25h5.025a.25.25 0 01.177.073l6.25 6.25a.25.25 0 010 .354l-5.025 5.025a.25.25 0 01-.354 0l-6.25-6.25a.25.25 0 01-.073-.177zm-1.5 0V2.75C1 1.784 1.784 1 2.75 1h5.025c.464 0 .91.184 1.238.513l6.25 6.25a1.75 1.75 0 010 2.474l-5.026 5.026a1.75 1.75 0 01-2.474 0l-6.25-6.25A1.75 1.75 0 011 7.775zM6 5a1 1 0 100 2 1 1 0 000-2z"
+    })
+  });
+}
+function LicenseIcon() {
+  return /* @__PURE__ */ jsx2("svg", {
+    width: "14",
+    height: "14",
+    viewBox: "0 0 16 16",
+    style: { display: "inline-block" },
+    children: /* @__PURE__ */ jsx2("path", {
+      fillRule: "evenodd",
+      fill: "currentColor",
+      d: "M8.75.75a.75.75 0 00-1.5 0V2h-.984c-.305 0-.604.08-.869.23l-1.288.737A.25.25 0 013.984 3H1.75a.75.75 0 000 1.5h.428L.066 9.192a.75.75 0 00.154.838l.53-.53-.53.53v.001l.002.002.002.002.006.006.016.015.045.04a3.514 3.514 0 00.686.45A4.492 4.492 0 003 11c.88 0 1.556-.22 2.023-.454a3.515 3.515 0 00.686-.45l.045-.04.016-.015.006-.006.002-.002.001-.002L5.25 9.5l.53.53a.75.75 0 00.154-.838L3.822 4.5h.162c.305 0 .604-.08.869-.23l1.289-.737a.25.25 0 01.124-.033h.984V13h-2.5a.75.75 0 000 1.5h6.5a.75.75 0 000-1.5h-2.5V3.5h.984a.25.25 0 01.124.033l1.29.736c.264.152.563.231.868.231h.162l-2.112 4.692a.75.75 0 00.154.838l.53-.53-.53.53v.001l.002.002.002.002.006.006.016.015.045.04a3.517 3.517 0 00.686.45A4.492 4.492 0 0013 11c.88 0 1.556-.22 2.023-.454a3.512 3.512 0 00.686-.45l.045-.04.01-.01.006-.005.006-.006.002-.002.001-.002-.529-.531.53.53a.75.75 0 00.154-.838L13.823 4.5h.427a.75.75 0 000-1.5h-2.234a.25.25 0 01-.124-.033l-1.29-.736A1.75 1.75 0 009.735 2H8.75V.75zM1.695 9.227c.285.135.718.273 1.305.273s1.02-.138 1.305-.273L3 6.327l-1.305 2.9zm10 0c.285.135.718.273 1.305.273s1.02-.138 1.305-.273L13 6.327l-1.305 2.9z"
+    })
+  });
+}
+function EyeIcon() {
+  return /* @__PURE__ */ jsx2("svg", {
+    viewBox: "0 0 16 16",
+    width: "14",
+    height: "14",
+    style: { display: "inline-block" },
+    children: /* @__PURE__ */ jsx2("path", {
+      fillRule: "evenodd",
+      fill: "currentColor",
+      d: "M1.679 7.932c.412-.621 1.242-1.75 2.366-2.717C5.175 4.242 6.527 3.5 8 3.5c1.473 0 2.824.742 3.955 1.715 1.124.967 1.954 2.096 2.366 2.717a.119.119 0 010 .136c-.412.621-1.242 1.75-2.366 2.717C10.825 11.758 9.473 12.5 8 12.5c-1.473 0-2.824-.742-3.955-1.715C2.92 9.818 2.09 8.69 1.679 8.068a.119.119 0 010-.136zM8 2c-1.981 0-3.67.992-4.933 2.078C1.797 5.169.88 6.423.43 7.1a1.619 1.619 0 000 1.798c.45.678 1.367 1.932 2.637 3.024C4.329 13.008 6.019 14 8 14c1.981 0 3.67-.992 4.933-2.078 1.27-1.091 2.187-2.345 2.637-3.023a1.619 1.619 0 000-1.798c-.45-.678-1.367-1.932-2.637-3.023C11.671 2.992 9.981 2 8 2zm0 8a2 2 0 100-4 2 2 0 000 4z"
+    })
+  });
+}
+function ClockIcon() {
+  return /* @__PURE__ */ jsx2("svg", {
+    viewBox: "0 0 16 16",
+    width: "14",
+    height: "14",
+    style: { display: "inline-block" },
+    children: /* @__PURE__ */ jsx2("path", {
+      fillRule: "evenodd",
+      fill: "currentColor",
+      d: "M1.5 8a6.5 6.5 0 1113 0 6.5 6.5 0 01-13 0zM8 0a8 8 0 100 16A8 8 0 008 0zm.5 4.75a.75.75 0 00-1.5 0v3.5a.75.75 0 00.471.696l2.5 1a.75.75 0 00.557-1.392L8.5 7.742V4.75z"
+    })
+  });
+}
+function DownloadIcon() {
+  return /* @__PURE__ */ jsx2("svg", {
+    viewBox: "0 0 16 16",
+    width: "16",
+    height: "16",
+    style: { display: "inline-block" },
+    children: /* @__PURE__ */ jsx2("path", {
+      fillRule: "evenodd",
+      fill: "currentColor",
+      d: "M7.47 10.78a.75.75 0 001.06 0l3.75-3.75a.75.75 0 00-1.06-1.06L8.75 8.44V1.75a.75.75 0 00-1.5 0v6.69L4.78 5.97a.75.75 0 00-1.06 1.06l3.75 3.75zM3.75 13a.75.75 0 000 1.5h8.5a.75.75 0 000-1.5h-8.5z"
+    })
+  });
+}
+function ZoomExtentIcon() {
+  return /* @__PURE__ */ jsx2("svg", {
+    viewBox: "0 0 24 24",
+    width: "16",
+    height: "16",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    style: { display: "inline-block" },
+    children: /* @__PURE__ */ jsx2("path", {
+      d: "M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3"
+    })
+  });
+}
+function ShareIcon() {
+  return /* @__PURE__ */ jsxs("svg", {
+    viewBox: "0 0 24 24",
+    width: "16",
+    height: "16",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    style: { display: "inline-block" },
+    children: [
+      /* @__PURE__ */ jsx2("circle", {
+        cx: "18",
+        cy: "5",
+        r: "3"
+      }),
+      /* @__PURE__ */ jsx2("circle", {
+        cx: "6",
+        cy: "12",
+        r: "3"
+      }),
+      /* @__PURE__ */ jsx2("circle", {
+        cx: "18",
+        cy: "19",
+        r: "3"
+      }),
+      /* @__PURE__ */ jsx2("line", {
+        x1: "8.59",
+        y1: "13.51",
+        x2: "15.42",
+        y2: "17.49"
+      }),
+      /* @__PURE__ */ jsx2("line", {
+        x1: "15.41",
+        y1: "6.51",
+        x2: "8.59",
+        y2: "10.49"
+      })
+    ]
+  });
+}
+function GrabberIcon() {
+  return /* @__PURE__ */ jsx2("svg", {
+    viewBox: "0 0 16 16",
+    width: "16",
+    height: "16",
+    style: { display: "inline-block" },
+    children: /* @__PURE__ */ jsx2("path", {
+      fillRule: "evenodd",
+      d: "M10 13a1 1 0 100-2 1 1 0 000 2zm-4 0a1 1 0 100-2 1 1 0 000 2zm1-5a1 1 0 11-2 0 1 1 0 012 0zm3 1a1 1 0 100-2 1 1 0 000 2zm1-5a1 1 0 11-2 0 1 1 0 012 0zM6 5a1 1 0 100-2 1 1 0 000 2z"
+    })
+  });
+}
+function CrossHairIcon() {
+  return /* @__PURE__ */ jsxs("svg", {
+    style: { display: "inline-block" },
+    width: "18",
+    height: "18",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    children: [
+      /* @__PURE__ */ jsx2("circle", {
+        cx: "12",
+        cy: "12",
+        r: "10"
+      }),
+      /* @__PURE__ */ jsx2("line", {
+        x1: "22",
+        y1: "12",
+        x2: "18",
+        y2: "12"
+      }),
+      /* @__PURE__ */ jsx2("line", {
+        x1: "6",
+        y1: "12",
+        x2: "2",
+        y2: "12"
+      }),
+      /* @__PURE__ */ jsx2("line", {
+        x1: "12",
+        y1: "6",
+        x2: "12",
+        y2: "2"
+      }),
+      /* @__PURE__ */ jsx2("line", {
+        x1: "12",
+        y1: "22",
+        x2: "12",
+        y2: "18"
+      })
+    ]
+  });
+}
+function DownIcon() {
+  return /* @__PURE__ */ jsx2("svg", {
+    width: "18",
+    height: "18",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    style: { display: "inline-block" },
+    children: /* @__PURE__ */ jsx2("polyline", {
+      points: "6 9 12 15 18 9"
+    })
+  });
+}
+function UpIcon() {
+  return /* @__PURE__ */ jsx2("svg", {
+    width: "18",
+    height: "18",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    style: { display: "inline-block" },
+    children: /* @__PURE__ */ jsx2("polyline", {
+      points: "18 15 12 9 6 15"
+    })
+  });
+}
+
+// src/components/core/button.tsx
+import { jsx as jsx3 } from "react/jsx-runtime";
+var Button = React2.forwardRef((props, ref) => /* @__PURE__ */ jsx3("button", __spreadValues({
+  ref,
+  type: "button",
+  className: tw2`h-8 px-3 py-2 rounded-md focus:outline-none focus:ring cursor-pointer text-md flex align-middle items-center gap-2 bg-gray-100 hover:bg-gray-200 text-gray-700 disabled:cursor-not-allowed disabled:bg-gray-100! disabled:opacity-50`
+}, props)));
+var CloseButton = (props) => /* @__PURE__ */ jsx3("button", __spreadValues({
+  className: tw2`absolute top-0 right-0 h-12 w-12 bg-red-100 cursor-pointer hover:bg-red-200 text-red-800 text-lg`,
+  children: "\u2715"
+}, props));
+var LayersButton = (props) => /* @__PURE__ */ jsx3("button", __spreadProps(__spreadValues({
+  className: tw2`absolute top-4 left-4 rounded-lg z-10 h-10 w-10 bg-white cursor-pointer hover:bg-gray-100 text-gray-700 text-lg flex items-center justify-center`
+}, props), {
+  children: /* @__PURE__ */ jsx3(LayersIcon, {})
+}));
+var InfobarButton = (props) => /* @__PURE__ */ jsx3("button", __spreadProps(__spreadValues({
+  className: tw2`absolute top-4 right-4 rounded-lg z-10 h-10 w-10 bg-white cursor-pointer hover:bg-gray-100 text-gray-700 text-lg flex items-center justify-center`
+}, props), {
+  children: /* @__PURE__ */ jsx3(InfoIcon, {})
+}));
+
+// src/components/core/input.tsx
+import { tw as tw3 } from "twind";
+import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
+var SelectInput = (props) => /* @__PURE__ */ jsxs2("div", {
+  children: [
+    props.label && /* @__PURE__ */ jsx4("label", {
+      className: tw3`text-gray-700`,
+      htmlFor: props.name,
+      children: props.label
+    }),
+    /* @__PURE__ */ jsx4("select", __spreadValues({
+      id: props.name,
+      name: props.name,
+      className: tw3`block w-full px-4 py-2 mt-2 text-gray-700 border bg-white border-gray-200 rounded-md focus:outline-none focus:ring appearance-none text-base`,
+      style: {
+        backgroundImage: `url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3E%3C/svg%3E")`,
+        backgroundPosition: "right 0.75rem center",
+        backgroundSize: "16px 12px",
+        backgroundRepeat: "no-repeat"
+      }
+    }, props))
+  ]
+});
+var SearchInput = (props) => /* @__PURE__ */ jsxs2("div", {
+  className: "relative",
+  children: [
+    /* @__PURE__ */ jsx4("span", {
+      className: tw3`absolute inset-y-0 left-0 flex items-center pl-3`,
+      children: /* @__PURE__ */ jsx4(SearchIcon, {})
+    }),
+    /* @__PURE__ */ jsx4("input", __spreadValues({
+      type: "search",
+      className: tw3`w-full py-2 pl-10 pr-4 text-gray-700 bg-white border border-gray-300 text-base rounded-md focus:outline-none focus:ring`
+    }, props))
+  ]
+});
+var CheckboxInput = (props) => props.isLoading ? /* @__PURE__ */ jsx4("svg", {
+  width: "20px",
+  height: "20px",
+  viewBox: "0 0 20 20",
+  version: "1.1",
+  className: tw3`inline text-gray-200 animate-spin dark:text-gray-600`,
+  children: /* @__PURE__ */ jsx4("g", {
+    stroke: "none",
+    strokeWidth: "1",
+    fill: "none",
+    fillRule: "evenodd",
+    children: /* @__PURE__ */ jsx4("g", {
+      fill: "#212121",
+      fillRule: "nonzero",
+      children: /* @__PURE__ */ jsx4("path", {
+        d: "M10,3 C6.13401,3 3,6.13401 3,10 C3,10.2761 2.77614,10.5 2.5,10.5 C2.22386,10.5 2,10.2761 2,10 C2,5.58172 5.58172,2 10,2 C14.4183,2 18,5.58172 18,10 C18,14.4183 14.4183,18 10,18 C9.72386,18 9.5,17.7761 9.5,17.5 C9.5,17.2239 9.72386,17 10,17 C13.866,17 17,13.866 17,10 C17,6.13401 13.866,3 10,3 Z"
+      })
+    })
+  })
+}) : /* @__PURE__ */ jsx4("input", {
+  type: "checkbox",
+  className: tw3`w-5 h-5 border-gray-100 focus:outline-none focus:ring focus:ring-blue-300 focus:ring-opacity-80`,
+  name: props.name,
+  checked: props.checked,
+  onChange: props.onChange
+});
+
+// src/components/core/tabs.tsx
+import { Tabs, usePanelState, useTabState } from "@bumaga/tabs";
+import clsx from "clsx";
+import { tw as tw4 } from "twind";
+import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
+var IconTab = ({ children, icon }) => {
+  const { onClick, isActive } = useTabState();
+  const classes = clsx([
+    "flex items-center justify-center h-12 px-2 py-2 bg-transparent -mb-px border-b-2 -px-1 whitespace-nowrap focus:outline-none w-full cursor-pointer",
+    {
+      "text-blue-600 border-blue-500": isActive,
+      "text-gray-700 border-gray-300 hover:border-gray-400": !isActive
+    }
+  ]);
+  return /* @__PURE__ */ jsxs3("button", {
+    className: tw4(classes),
+    onClick,
+    children: [
+      icon,
+      /* @__PURE__ */ jsx5("span", {
+        className: tw4`ml-2 text-base`,
+        children
+      })
+    ]
+  });
+};
+var Panel = ({ children }) => {
+  const isActive = usePanelState();
+  return isActive ? /* @__PURE__ */ jsx5("div", {
+    className: tw4`w-full flex flex-grow-1 overflow-auto`,
+    children
+  }) : null;
+};
+var TabHeader = ({ children }) => /* @__PURE__ */ jsx5("div", {
+  className: tw4`flex flex-shrink-0 border-b border-gray-200 justify-around pr-12`,
+  children
+});
+
+// src/components/infobar/content.tsx
+import { useT as useT2 } from "@biodiv-platform/naksha-commons";
+import { tw as tw6 } from "twind";
+
+// src/components/sidebar/settings/layer-selection.tsx
+import { useT } from "@biodiv-platform/naksha-commons";
+import { jsx as jsx6 } from "react/jsx-runtime";
+function LayerSelection({ hideLabel }) {
+  const {
+    layer: { selectionStyle, handleSelectStyle }
+  } = useLayers();
+  const { t } = useT();
+  const handleOnSelectionStyleChange = (e) => {
+    handleSelectStyle(e.target.value);
+  };
+  return /* @__PURE__ */ jsx6(SelectInput, {
+    name: "layer_selection",
+    label: hideLabel ? null : t("layer_selection"),
+    defaultValue: selectionStyle,
+    onChange: handleOnSelectionStyleChange,
+    children: Object.values(SELECTION_STYLE).map((ss) => /* @__PURE__ */ jsx6("option", {
+      value: ss,
+      children: t(ss)
+    }, ss))
+  });
+}
+
+// src/components/infobar/infobar-panel.tsx
+import clsx2 from "clsx";
+import { useEffect as useEffect2, useState as useState2 } from "react";
+import { tw as tw5 } from "twind";
+import { jsx as jsx7, jsxs as jsxs4 } from "react/jsx-runtime";
+function InfoBarPanel({ data: payload }) {
+  const [isOpen, setIsOpen] = useState2(true);
+  const [layerInfo, setLayerInfo] = useState2({
+    title: payload.sourceLayer,
+    properties: []
+  });
+  const { layer, mp, query: { clickedLngLat } } = useLayers();
+  const getPropertyData = () => __async(this, null, function* () {
+    var _a, _b, _c, _d, _e, _f;
+    let properties;
+    const currentLayer = layer.selectedLayers.find(
+      (l) => l.id === (payload.sourceLayer || payload.source)
+    );
+    if (currentLayer.layerType.toLowerCase() === "raster") {
+      const { data } = yield axGexGetRasterInfoWithLonLat(
+        (_a = mp.geoserver) == null ? void 0 : _a.endpoint,
+        (_b = mp.geoserver) == null ? void 0 : _b.workspace,
+        {
+          bbox: payload.bbox.toString(),
+          query_layers: `${(_c = mp.geoserver) == null ? void 0 : _c.workspace}:${currentLayer.id}`,
+          layers: `${(_d = mp.geoserver) == null ? void 0 : _d.workspace}:${currentLayer.id}`
+        }
+      );
+      properties = (data == null ? void 0 : data.features[0]) ? Object.entries((_e = data.features[0]) == null ? void 0 : _e.properties).map(([v, k]) => [
+        k || "-"
+      ]) : [];
+    } else {
+      properties = Object.entries(((_f = currentLayer == null ? void 0 : currentLayer.data) == null ? void 0 : _f.propertyMap) || {}).map(
+        ([k, v]) => {
+          var _a2;
+          return [v, (_a2 = payload == null ? void 0 : payload.properties) == null ? void 0 : _a2[k]];
+        }
+      );
+    }
+    setLayerInfo({ title: currentLayer.title, properties });
+  });
+  useEffect2(() => {
+    getPropertyData();
+  }, [clickedLngLat]);
+  return /* @__PURE__ */ jsxs4("div", {
+    className: tw5`bg-gray-100 rounded-lg`,
+    children: [
+      /* @__PURE__ */ jsxs4("button", {
+        className: tw5(
+          clsx2([
+            `px-4 h-10 flex items-center justify-between bg-gray-100 hover:bg-gray-200 transition-colors cursor-pointer w-full focus:outline-none focus:ring`,
+            { "bg-gray-200 rounded-t-lg": isOpen, "rounded-lg": !isOpen }
+          ])
+        ),
+        onClick: () => setIsOpen(!isOpen),
+        children: [
+          layerInfo.title,
+          " ",
+          isOpen ? /* @__PURE__ */ jsx7(UpIcon, {}) : /* @__PURE__ */ jsx7(DownIcon, {})
+        ]
+      }),
+      isOpen && /* @__PURE__ */ jsx7("div", {
+        className: tw5`px-4 py-3 flex flex-col gap-3`,
+        children: layerInfo.properties.map(([k, v], index) => /* @__PURE__ */ jsxs4("div", {
+          children: [
+            /* @__PURE__ */ jsx7("div", {
+              className: tw5`text-gray-600`,
+              children: k
+            }),
+            /* @__PURE__ */ jsx7("div", {
+              children: v
+            })
+          ]
+        }, k + v + index))
+      })
+    ]
+  });
+}
+
+// src/components/infobar/content.tsx
+import { jsx as jsx8, jsxs as jsxs5 } from "react/jsx-runtime";
+function InfoBarContent({ onClose }) {
+  var _a;
+  const {
+    layer: { selectedFeatures, selectedLayers, selectionStyle }
+  } = useLayers();
+  const { t } = useT2();
+  return /* @__PURE__ */ jsxs5("div", {
+    className: tw6`absolute top-0 right-0 bottom-0 left-0 md:top-4 md:right-4 md:bottom-4 md:left-auto bg-white rounded-lg overflow-hidden shadow-md md:max-w-sm w-full z-20 flex flex-col`,
+    children: [
+      /* @__PURE__ */ jsxs5("div", {
+        className: "flex w-full",
+        children: [
+          /* @__PURE__ */ jsxs5("div", {
+            className: tw6`h-12 px-4 flex items-center gap-3 flex-grow bg-gray-200`,
+            children: [
+              /* @__PURE__ */ jsx8(CrossHairIcon, {}),
+              " ",
+              t("infobar")
+            ]
+          }),
+          /* @__PURE__ */ jsx8(CloseButton, {
+            onClick: onClose
+          })
+        ]
+      }),
+      /* @__PURE__ */ jsx8("div", {
+        className: tw6`bg-gray-100 p-4 flex-shrink-0 rt`,
+        children: /* @__PURE__ */ jsx8(LayerSelection, {
+          hideLabel: true
+        })
+      }),
+      /* @__PURE__ */ jsx8("div", {
+        className: tw6`flex flex-col flex-grow overflow-auto gap-3 p-4`,
+        children: (_a = selectedFeatures.flat(1)) == null ? void 0 : _a.map((data) => {
+          var _a2;
+          return /* @__PURE__ */ jsx8(InfoBarPanel, {
+            data
+          }, ((_a2 = selectedLayers == null ? void 0 : selectedLayers[0]) == null ? void 0 : _a2.source.type) === "raster" || selectionStyle === SELECTION_STYLE.ALL ? data == null ? void 0 : data.sourceLayer : (data == null ? void 0 : data.sourceLayer) + (data == null ? void 0 : data.properties[PROPERTY_ID]));
+        })
+      })
+    ]
+  });
+}
+
+// src/components/infobar/index.tsx
+import { jsx as jsx9 } from "react/jsx-runtime";
+function InfoBar() {
+  var _a;
+  const { layer, isInfoBarOpen, setIsInfoBarOpen } = useLayers();
+  if (!((_a = layer.selectedFeatures) == null ? void 0 : _a.length))
+    return null;
+  const toggleOpen = () => setIsInfoBarOpen(!isInfoBarOpen);
+  return isInfoBarOpen ? /* @__PURE__ */ jsx9(InfoBarContent, {
+    onClose: toggleOpen
+  }) : /* @__PURE__ */ jsx9(InfobarButton, {
+    onClick: toggleOpen
+  });
+}
+
+// src/components/sidebar/index.tsx
+import { useEffect as useEffect3, useState as useState8 } from "react";
+import { useMap as useMap2 } from "react-map-gl/maplibre";
+
+// src/components/sidebar/tabs.tsx
+import { useT as useT10 } from "@biodiv-platform/naksha-commons";
+import { tw as tw18 } from "twind";
+
+// src/components/sidebar/layers/index.tsx
+import { tw as tw15 } from "twind";
+
+// src/components/sidebar/layers/layer-list.tsx
+import React8, { useMemo as useMemo4 } from "react";
+import { useVirtual } from "react-virtual";
+import AutoSizer from "react-virtualized-auto-sizer";
+import { tw as tw13 } from "twind";
+
+// src/components/sidebar/common/layer-item.tsx
+import { useT as useT6 } from "@biodiv-platform/naksha-commons";
+import { useMemo as useMemo3, useState as useState6 } from "react";
+import { SortableHandle } from "react-sortable-hoc";
+import { RWebShare } from "react-web-share";
+import { tw as tw12 } from "twind";
+
+// src/components/core/highlighter.tsx
+import { Fragment, jsx as jsx10 } from "react/jsx-runtime";
+var Highlighted = ({ text = "", highlight = "" }) => {
+  if (!highlight.trim()) {
+    return /* @__PURE__ */ jsx10(Fragment, {
+      children: text
+    });
+  }
+  const regex = new RegExp(`(${highlight})`, "gi");
+  const parts = text.split(regex);
+  return /* @__PURE__ */ jsx10(Fragment, {
+    children: parts.filter((part) => part).map(
+      (part, i) => regex.test(part) ? /* @__PURE__ */ jsx10("mark", {
+        children: part
+      }, i) : /* @__PURE__ */ jsx10("span", {
+        children: part
+      }, i)
+    )
+  });
+};
+
+// src/components/sidebar/common/grid-legend.tsx
+import { tw as tw8 } from "twind";
+
+// src/components/sidebar/common/moreless.tsx
+import { useT as useT3 } from "@biodiv-platform/naksha-commons";
+import { useState as useState3 } from "react";
+import { tw as tw7 } from "twind";
+import { jsx as jsx11, jsxs as jsxs6 } from "react/jsx-runtime";
+function MoreLess({ children }) {
+  const [showMore, setShowMore] = useState3(false);
+  const { t } = useT3();
+  return /* @__PURE__ */ jsxs6("div", {
+    children: [
+      showMore && children,
+      /* @__PURE__ */ jsx11("button", {
+        onClick: () => setShowMore(!showMore),
+        className: tw7`text-blue-600 focus:outline-none focus:outline focus:ring`,
+        children: showMore ? t("less") : t("legend")
+      })
+    ]
+  });
+}
+
+// src/components/sidebar/common/grid-legend.tsx
+import { jsx as jsx12, jsxs as jsxs7 } from "react/jsx-runtime";
+function GridLegend({ item }) {
+  const { layer } = useLayers();
+  const legendInfo = layer.gridLegends[item.id];
+  if (!legendInfo)
+    return null;
+  return /* @__PURE__ */ jsx12(MoreLess, {
+    children: /* @__PURE__ */ jsxs7("ul", {
+      style: { margin: 0, padding: 0 },
+      children: [
+        legendInfo == null ? void 0 : legendInfo.stops.map(([stop, color], index, stopsArr) => {
+          const prevStop = (stopsArr[index - 1] || [0])[0];
+          if (prevStop === stop)
+            return /* @__PURE__ */ jsx12("div", {}, color);
+          return /* @__PURE__ */ jsxs7("li", {
+            className: tw8`flex gap-2 items-center mb-1`,
+            children: [
+              /* @__PURE__ */ jsx12("svg", {
+                viewBox: "0 0 24 24",
+                height: "14",
+                width: "14",
+                focusable: "false",
+                children: /* @__PURE__ */ jsx12("circle", {
+                  cx: "12",
+                  fill: color,
+                  cy: "12",
+                  r: "12",
+                  stroke: "none"
+                })
+              }),
+              /* @__PURE__ */ jsxs7("div", {
+                children: [
+                  prevStop,
+                  " - ",
+                  stop
+                ]
+              })
+            ]
+          }, color);
+        }),
+        /* @__PURE__ */ jsxs7("li", {
+          children: [
+            "1 Square = ",
+            legendInfo == null ? void 0 : legendInfo.squareSize,
+            " x ",
+            legendInfo == null ? void 0 : legendInfo.squareSize,
+            " km"
+          ]
+        })
+      ]
+    })
+  });
+}
+
+// src/components/sidebar/common/info-popover.tsx
+import { LICENSES, useT as useT4 } from "@biodiv-platform/naksha-commons";
+import { useState as useState4 } from "react";
+import { Popover } from "react-tiny-popover";
+import { tw as tw9 } from "twind";
+import { jsx as jsx13, jsxs as jsxs8 } from "react/jsx-runtime";
+var LayerInfoLine = ({
+  icon,
+  name,
+  title,
+  link,
+  children
+}) => {
+  const content = /* @__PURE__ */ jsx13("span", {
+    children: children || "-"
+  });
+  return /* @__PURE__ */ jsxs8("div", {
+    className: tw9`flex gap-3 text-sm text-gray-600 break-all`,
+    title: name && title && `${name}: ${title}`,
+    children: [
+      /* @__PURE__ */ jsx13("div", {
+        children: icon
+      }),
+      link ? /* @__PURE__ */ jsx13("a", {
+        className: tw9`text-blue-700 focus:outline-none focus:ring`,
+        target: "_blank",
+        rel: "noopener",
+        href: link,
+        children: content
+      }) : content
+    ]
+  });
+};
+function InfoPopover({ item, containerStyle }) {
+  var _a;
+  const { t } = useT4();
+  const { layer, mp } = useLayers();
+  const license = item.license || "CC-BY";
+  const createdOn = (item == null ? void 0 : item.createdDate) && new Date(item.createdDate).toLocaleDateString();
+  const tags = (_a = item.tags) == null ? void 0 : _a.join(", ");
+  return /* @__PURE__ */ jsxs8("div", {
+    className: tw9`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 && /* @__PURE__ */ jsxs8(LayerInfoLine, {
+        icon: /* @__PURE__ */ jsx13(EyeIcon, {}),
+        name: t("visiblity"),
+        title: item.layerStatus,
+        children: [
+          item.layerStatus,
+          /* @__PURE__ */ jsx13("button", {
+            className: tw9`text-blue-600 focus:outline-none ml-4`,
+            onClick: () => layer.togglePublish(item.id, item == null ? void 0 : item.layerStatus),
+            children: t("toggle")
+          }),
+          /* @__PURE__ */ jsx13("button", {
+            className: tw9`text-red-600 focus:outline-none ml-4`,
+            onClick: () => layer.delete(item.id, t("are_you_sure")),
+            children: t("delete")
+          })
+        ]
+      }),
+      /* @__PURE__ */ jsx13(LayerInfoLine, {
+        icon: /* @__PURE__ */ jsx13(AttributionIcon, {}),
+        link: item.url,
+        name: t("uploader"),
+        title: item.createdBy,
+        children: item.createdBy
+      }),
+      /* @__PURE__ */ jsx13(LayerInfoLine, {
+        icon: /* @__PURE__ */ jsx13(AttributionIcon, {}),
+        link: item.url,
+        name: t("created_by"),
+        title: item.attribution,
+        children: item.attribution
+      }),
+      /* @__PURE__ */ jsx13(LayerInfoLine, {
+        icon: /* @__PURE__ */ jsx13(ClockIcon, {}),
+        name: t("created_on"),
+        title: createdOn,
+        children: createdOn
+      }),
+      /* @__PURE__ */ jsx13(LayerInfoLine, {
+        icon: /* @__PURE__ */ jsx13(TagIcon, {}),
+        name: t("tags"),
+        title: tags,
+        children: tags
+      }),
+      /* @__PURE__ */ jsx13(LayerInfoLine, {
+        name: t("license"),
+        title: license,
+        link: license && LICENSES[license],
+        icon: /* @__PURE__ */ jsx13(LicenseIcon, {}),
+        children: license
+      })
+    ]
+  });
+}
+var PopoverWrapper = ({ item }) => {
+  const [isPopoverOpen, setIsPopoverOpen] = useState4(false);
+  const togglePopover = () => setIsPopoverOpen(!isPopoverOpen);
+  return /* @__PURE__ */ jsx13(Popover, {
+    isOpen: isPopoverOpen,
+    padding: 10,
+    positions: ["right"],
+    containerStyle: { zIndex: 99 },
+    onClickOutside: togglePopover,
+    content: /* @__PURE__ */ jsx13(InfoPopover, {
+      item
+    }),
+    children: /* @__PURE__ */ jsx13(Button, {
+      onClick: togglePopover,
+      children: /* @__PURE__ */ jsx13(InfoIcon, {}),
+      title: "Information"
+    })
+  });
+};
+
+// src/components/sidebar/common/layer-item-style.tsx
+import { tw as tw11 } from "twind";
+
+// src/components/sidebar/common/style-legend.tsx
+import { useMemo as useMemo2, useState as useState5 } from "react";
+import { useT as useT5 } from "@biodiv-platform/naksha-commons";
+import { tw as tw10 } from "twind";
+import { jsx as jsx14, jsxs as jsxs9 } from "react/jsx-runtime";
+function StyleLegend({ item }) {
+  var _a;
+  const [showImage, setShowImage] = useState5(true);
+  const { mp } = useLayers();
+  const { t } = useT5();
+  const legendStyles = useMemo2(
+    () => {
+      var _a2, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l;
+      return ((_f = (_e = (_d = (_c = (_b = (_a2 = item == null ? void 0 : item.data) == null ? void 0 : _a2.styles) == null ? void 0 : _b[item.data.styleIndex]) == null ? void 0 : _c.colors) == null ? void 0 : _d.paint) == null ? void 0 : _e["fill-color"]) == null ? void 0 : _f.stops) || ((_l = (_k = (_j = (_i = (_h = (_g = item == null ? void 0 : item.data) == null ? void 0 : _g.styles) == null ? void 0 : _h[item.data.styleIndex]) == null ? void 0 : _i.colors) == null ? void 0 : _j.paint) == null ? void 0 : _k["circle-color"]) == null ? void 0 : _l.stops) || [];
+    },
+    [item]
+  );
+  const vectorLegend = () => {
+    return legendStyles.map(([title, color]) => /* @__PURE__ */ jsxs9("li", {
+      className: tw10`flex gap-2 items-center mb-1`,
+      children: [
+        /* @__PURE__ */ jsx14("svg", {
+          viewBox: "0 0 24 24",
+          height: "14",
+          width: "14",
+          focusable: "false",
+          children: /* @__PURE__ */ jsx14("circle", {
+            cx: "12",
+            fill: color,
+            cy: "12",
+            r: "12",
+            stroke: "none"
+          })
+        }),
+        /* @__PURE__ */ jsx14("div", {
+          children: title
+        })
+      ]
+    }, color));
+  };
+  return /* @__PURE__ */ jsx14("ul", {
+    style: { margin: 0, padding: 0 },
+    children: item.layerType !== "RASTER" ? vectorLegend() : showImage ? /* @__PURE__ */ jsx14("li", {
+      children: /* @__PURE__ */ jsx14("img", {
+        style: { margin: "5px" },
+        onError: () => setShowImage(false),
+        src: `${(_a = mp == null ? void 0 : mp.geoserver) == null ? void 0 : _a.endpoint}/wms?REQUEST=GetLegendGraphic&VERSION=1.0.0&WIDTH=20&HEIGHT=20&STRICT=false&layer=biodiv:${item.id}`
+      })
+    }) : /* @__PURE__ */ jsx14("div", {
+      children: t("raster_style_not_found")
+    })
+  });
+}
+
+// src/components/sidebar/common/layer-item-style.tsx
+import { jsx as jsx15, jsxs as jsxs10 } from "react/jsx-runtime";
+function LayerItemStyle({ item }) {
+  var _a, _b;
+  if (!((_a = item.data) == null ? void 0 : _a.styles))
+    return null;
+  const { layer } = useLayers();
+  const onStyleChange = (e) => {
+    layer.updateStyle(item.id, Number(e.target.value));
+  };
+  return /* @__PURE__ */ jsxs10("div", {
+    className: tw11`flex flex-col gap-4 pt-2`,
+    children: [
+      item.layerType !== "RASTER" && /* @__PURE__ */ jsx15(SelectInput, {
+        onChange: onStyleChange,
+        children: (_b = item.data) == null ? void 0 : _b.styles.map((opt, idx) => /* @__PURE__ */ jsx15("option", {
+          value: idx,
+          children: opt.styleTitle
+        }, idx))
+      }),
+      /* @__PURE__ */ jsx15(MoreLess, {
+        children: /* @__PURE__ */ jsx15(StyleLegend, {
+          item
+        })
+      })
+    ]
+  });
+}
+
+// src/components/sidebar/common/layer-item.tsx
+import { jsx as jsx16, jsxs as jsxs11 } from "react/jsx-runtime";
+var DragHandle = SortableHandle(() => /* @__PURE__ */ jsx16("div", {
+  className: tw12`mt-1 w-6 text-center cursor-move`,
+  children: /* @__PURE__ */ jsx16(GrabberIcon, {})
+}));
+function LayerItem({ item, extended }) {
+  const { t } = useT6();
+  const { layer, query, mp, query: { setClickedLngLat }, setIsInfoBarOpen } = useLayers();
+  const [isAdded, setIsAdded] = useState6(layer.selectedIds.includes(item.id));
+  const [isLoading, setIsLoading] = useState6(false);
+  const shareData = useMemo3(
+    () => mp.canLayerShare ? {
+      url: `${window.location.href.split("?")[0]}?layers=${item.id}`,
+      title: item.title
+    } : void 0,
+    [item.id]
+  );
+  const onToggleLayer = () => __async(this, null, function* () {
+    setIsLoading(true);
+    setIsInfoBarOpen(true);
+    layer.setSelectedFeatures([]);
+    setClickedLngLat(null);
+    yield layer.toggle({ layerId: item.id, add: !isAdded });
+    setIsAdded(!isAdded);
+    setIsLoading(false);
+  });
+  const onDownloadLayer = () => __async(this, null, function* () {
+    yield axDownloadLayer(
+      mp.nakshaApiEndpoint,
+      mp.nakshaEndpointToken,
+      item.id,
+      item.title
+    );
+    mp == null ? void 0 : mp.onLayerDownload(item.id);
+  });
+  const handleOnZoom = () => layer.zoomToExtent(item.id);
+  return /* @__PURE__ */ jsxs11("div", {
+    className: tw12`z-20 p-3 bg-white`,
+    style: { borderTop: "1px solid #e5e7eb" },
+    children: [
+      /* @__PURE__ */ jsxs11("div", {
+        className: tw12`flex gap-3`,
+        children: [
+          /* @__PURE__ */ jsxs11("div", {
+            className: tw12`flex-shrink-0`,
+            children: [
+              /* @__PURE__ */ jsx16(CheckboxInput, {
+                name: item.id,
+                checked: isAdded,
+                onChange: onToggleLayer,
+                isLoading
+              }),
+              extended && /* @__PURE__ */ jsx16(DragHandle, {})
+            ]
+          }),
+          /* @__PURE__ */ jsx16("img", {
+            className: tw12`flex-shrink-0 overflow-hidden h-16 w-16 p-1 mb-2 object-cover border border-gray-200 rounded`,
+            src: item.thumbnail || FALLBACK_THUMB
+          }),
+          /* @__PURE__ */ jsxs11("div", {
+            children: [
+              /* @__PURE__ */ jsx16("div", {
+                title: item.title,
+                className: tw12`mb-1 leading-tight`,
+                style: overflowStyle,
+                children: /* @__PURE__ */ jsx16(Highlighted, {
+                  text: item.title,
+                  highlight: query.term
+                })
+              }),
+              /* @__PURE__ */ jsx16("p", {
+                title: item.description,
+                className: tw12`text-gray-600 text-sm`,
+                style: overflowStyle2,
+                children: item.description
+              })
+            ]
+          })
+        ]
+      }),
+      /* @__PURE__ */ jsxs11("div", {
+        className: tw12`flex justify-between`,
+        children: [
+          /* @__PURE__ */ jsxs11(Button, {
+            onClick: onDownloadLayer,
+            disabled: !item.isDownloadable,
+            children: [
+              /* @__PURE__ */ jsx16(DownloadIcon, {}),
+              " ",
+              t("download")
+            ]
+          }),
+          /* @__PURE__ */ jsxs11("div", {
+            className: tw12`flex gap-3`,
+            children: [
+              shareData && /* @__PURE__ */ jsx16(RWebShare, {
+                data: shareData,
+                children: /* @__PURE__ */ jsx16(Button, {
+                  title: "Share",
+                  children: /* @__PURE__ */ jsx16(ShareIcon, {})
+                })
+              }),
+              extended && /* @__PURE__ */ jsx16(Button, {
+                onClick: handleOnZoom,
+                title: "Zoom To Extent",
+                children: /* @__PURE__ */ jsx16(ZoomExtentIcon, {})
+              }),
+              /* @__PURE__ */ jsx16(PopoverWrapper, {
+                item
+              })
+            ]
+          })
+        ]
+      }),
+      extended && /* @__PURE__ */ jsx16(LayerItemStyle, {
+        item
+      }),
+      extended && item.source.type === "grid" && /* @__PURE__ */ jsx16(GridLegend, {
+        item
+      })
+    ]
+  });
+}
+
+// src/components/sidebar/layers/layer-list.tsx
+import { jsx as jsx17 } from "react/jsx-runtime";
+function LayerList() {
+  const { layer, query } = useLayers();
+  const filteredLayers = useMemo4(
+    () => query.term ? layer.all.filter(
+      (_l) => _l.title.toLowerCase().includes(query.term.toLowerCase())
+    ) : layer.all,
+    [layer.all, query.term]
+  );
+  const parentRef = React8.useRef();
+  const rowVirtualizer = useVirtual({
+    size: filteredLayers.length,
+    parentRef
+  });
+  return /* @__PURE__ */ jsx17("div", {
+    className: tw13`flex-grow-1 relative`,
+    children: /* @__PURE__ */ jsx17(AutoSizer, {
+      disableWidth: true,
+      children: (p) => /* @__PURE__ */ jsx17("div", {
+        ref: parentRef,
+        className: "List",
+        style: { height: p.height, overflow: "auto" },
+        children: /* @__PURE__ */ jsx17("div", {
+          style: {
+            height: rowVirtualizer.totalSize,
+            width: "100%",
+            position: "relative"
+          },
+          children: rowVirtualizer.virtualItems.map((virtualRow) => /* @__PURE__ */ jsx17("div", {
+            ref: virtualRow.measureRef,
+            className: tw13`absolute top-0 left-0 w-full`,
+            style: { transform: `translateY(${virtualRow.start}px)` },
+            children: /* @__PURE__ */ jsx17("div", {
+              style: { height: 146 },
+              children: /* @__PURE__ */ jsx17(LayerItem, {
+                item: filteredLayers[virtualRow.index]
+              })
+            })
+          }, virtualRow.index))
+        })
+      })
+    })
+  });
+}
+
+// src/components/sidebar/layers/search.tsx
+import { useT as useT7 } from "@biodiv-platform/naksha-commons";
+import { tw as tw14 } from "twind";
+import { jsx as jsx18 } from "react/jsx-runtime";
+function LayerSearch() {
+  const { t } = useT7();
+  const { query } = useLayers();
+  const handleOnSearchChange = (e) => query.setTerm(e.target.value);
+  return /* @__PURE__ */ jsx18("div", {
+    className: tw14`flex-shrink-0 border-b-2 p-4`,
+    children: /* @__PURE__ */ jsx18(SearchInput, {
+      name: "lyr_search",
+      placeholder: t("find_layer_by_name"),
+      onChange: handleOnSearchChange
+    })
+  });
+}
+
+// src/components/sidebar/layers/index.tsx
+import { jsx as jsx19, jsxs as jsxs12 } from "react/jsx-runtime";
+function LayersTabPanel() {
+  return /* @__PURE__ */ jsxs12("div", {
+    className: tw15`flex flex-col w-full`,
+    children: [
+      /* @__PURE__ */ jsx19(LayerSearch, {}),
+      /* @__PURE__ */ jsx19(LayerList, {})
+    ]
+  });
+}
+
+// src/utils/array-move.ts
+function arrayMoveMutable(array, fromIndex, toIndex) {
+  const startIndex = fromIndex < 0 ? array.length + fromIndex : fromIndex;
+  if (startIndex >= 0 && startIndex < array.length) {
+    const endIndex = toIndex < 0 ? array.length + toIndex : toIndex;
+    const [item] = array.splice(fromIndex, 1);
+    array.splice(endIndex, 0, item);
+  }
+}
+function arrayMoveImmutable(array, fromIndex, toIndex) {
+  array = [...array];
+  arrayMoveMutable(array, fromIndex, toIndex);
+  return array;
+}
+
+// src/components/sidebar/selected/selected-item-list.tsx
+import { SortableContainer, SortableElement } from "react-sortable-hoc";
+import { jsx as jsx20 } from "react/jsx-runtime";
+var SelectedItem = SortableElement(({ item, extended }) => /* @__PURE__ */ jsx20(LayerItem, {
+  item,
+  extended
+}));
+var SelectedItemList = SortableContainer(({ layerList }) => /* @__PURE__ */ jsx20("div", {
+  children: layerList.map((item, index) => /* @__PURE__ */ jsx20(SelectedItem, {
+    index,
+    item,
+    extended: true
+  }, item.id))
+}));
+
+// src/components/sidebar/selected/index.tsx
+import { useT as useT8 } from "@biodiv-platform/naksha-commons";
+import { tw as tw16 } from "twind";
+import { jsx as jsx21, jsxs as jsxs13 } from "react/jsx-runtime";
+function SelectedTabPanel() {
+  const { layer } = useLayers();
+  const { t } = useT8();
+  const onSortEnd = ({ oldIndex, newIndex }) => {
+    layer.setSelectedIds(
+      arrayMoveImmutable(layer.selectedIds, oldIndex, newIndex)
+    );
+  };
+  return /* @__PURE__ */ jsxs13("div", {
+    className: tw16`flex flex-col gap-3 w-full`,
+    children: [
+      layer.selectedIds.length > 0 && /* @__PURE__ */ jsx21("div", {
+        className: tw16`p-3 pb-0`,
+        children: /* @__PURE__ */ jsxs13(Button, {
+          onClick: () => layer.clearAll(),
+          children: [
+            "\u2715 ",
+            t("clear")
+          ]
+        })
+      }),
+      /* @__PURE__ */ jsx21(SelectedItemList, {
+        layerList: layer.selectedLayers,
+        useDragHandle: true,
+        onSortEnd
+      })
+    ]
+  });
+}
+
+// src/components/sidebar/settings/index.tsx
+import { defaultMapStyles as defaultMapStyles2, useT as useT9 } from "@biodiv-platform/naksha-commons";
+import { tw as tw17 } from "twind";
+import { jsx as jsx22, jsxs as jsxs14 } from "react/jsx-runtime";
+function SettingsTabPanel() {
+  const { layer } = useLayers();
+  const { t } = useT9();
+  const handleOnStyleChange = (e) => layer.setMapStyle(e.target.value);
+  return /* @__PURE__ */ jsxs14("div", {
+    className: tw17`w-full p-4 flex flex-col gap-4`,
+    children: [
+      /* @__PURE__ */ jsx22(SelectInput, {
+        name: "base_style",
+        label: t("base_style"),
+        defaultValue: layer.mapStyle,
+        onChange: handleOnStyleChange,
+        children: defaultMapStyles2.map((ms) => /* @__PURE__ */ jsx22("option", {
+          value: ms.style,
+          children: ms.text
+        }, ms.key))
+      }),
+      /* @__PURE__ */ jsx22(LayerSelection, {})
+    ]
+  });
+}
+
+// src/components/sidebar/tabs.tsx
+import { jsx as jsx23, jsxs as jsxs15 } from "react/jsx-runtime";
+function SidebarTabs({ onClose }) {
+  const { t } = useT10();
+  return /* @__PURE__ */ jsxs15("div", {
+    className: tw18`absolute top-0 right-0 bottom-0 left-0 md:right-auto md:top-4 md:left-4 md:bottom-4 bg-white rounded-lg shadow-md md:max-w-sm w-full z-20 overflow-hidden`,
+    children: [
+      /* @__PURE__ */ jsx23(CloseButton, {
+        onClick: onClose
+      }),
+      /* @__PURE__ */ jsx23("div", {
+        className: tw18`flex flex-col h-full`,
+        children: /* @__PURE__ */ jsxs15(Tabs, {
+          children: [
+            /* @__PURE__ */ jsxs15(TabHeader, {
+              children: [
+                /* @__PURE__ */ jsx23(IconTab, {
+                  icon: /* @__PURE__ */ jsx23(LayersIcon, {}),
+                  children: t("layers")
+                }),
+                /* @__PURE__ */ jsx23(IconTab, {
+                  icon: /* @__PURE__ */ jsx23(LayersIcon, {}),
+                  children: t("selected")
+                }),
+                /* @__PURE__ */ jsx23(IconTab, {
+                  icon: /* @__PURE__ */ jsx23(SlidersIcon, {}),
+                  children: t("settings")
+                })
+              ]
+            }),
+            /* @__PURE__ */ jsx23(Panel, {
+              children: /* @__PURE__ */ jsx23(LayersTabPanel, {})
+            }),
+            /* @__PURE__ */ jsx23(Panel, {
+              children: /* @__PURE__ */ jsx23(SelectedTabPanel, {})
+            }),
+            /* @__PURE__ */ jsx23(Panel, {
+              children: /* @__PURE__ */ jsx23(SettingsTabPanel, {})
+            })
+          ]
+        })
+      })
+    ]
+  });
+}
+
+// src/components/sidebar/index.tsx
+import { jsx as jsx24 } from "react/jsx-runtime";
+function Sidebar() {
+  const { mp, layer } = useLayers();
+  const [isOpen, setIsOpen] = useState8(mp.showToC);
+  const { mapl } = useMap2();
+  const toggleOpen = () => setIsOpen(!isOpen);
+  function loadToC() {
+    return __async(this, null, function* () {
+      const _layers = yield axGetGeoserverLayers(
+        mp.nakshaEndpointToken,
+        mp.nakshaApiEndpoint,
+        mp.geoserver,
+        mp.selectedLayers
+      );
+      const _newLayers = [...mp.layers || [], ..._layers];
+      layer.setAll(_newLayers);
+      if (layer.selectedIds.length) {
+        const _layer = _newLayers.find((l) => l.id === layer.selectedIds[0]);
+        (_layer == null ? void 0 : _layer.bbox) && (mapl == null ? void 0 : mapl.fitBounds(_layer.bbox, { padding: 40, duration: 1e3 }));
+      }
+    });
+  }
+  useEffect3(() => {
+    if (mapl && mp.loadToC) {
+      loadToC();
+    }
+  }, [mapl]);
+  return isOpen ? /* @__PURE__ */ jsx24(SidebarTabs, {
+    onClose: toggleOpen
+  }) : /* @__PURE__ */ jsx24(LayersButton, {
+    onClick: toggleOpen
+  });
+}
+
+// src/components/map/layers/index.tsx
+import { useMap as useMap4 } from "react-map-gl/maplibre";
+
+// src/components/map/layers/grid/index.tsx
+import { useEffect as useEffect4, useState as useState9 } from "react";
+import { Layer, Source, useMap as useMap3 } from "react-map-gl/maplibre";
+import { jsx as jsx25 } from "react/jsx-runtime";
+function GridLayer({
+  data,
+  beforeId
+}) {
+  const { layer } = useLayers();
+  const { mapl } = useMap3();
+  const [layerData, setLayerData] = useState9({ geojson: {}, paint: {} });
+  const fetchGridData = () => __async(this, null, function* () {
+    const { success, geojson, paint: paint2, stops, squareSize } = yield getGridLayerData(
+      data.source.fetcher,
+      mapl == null ? void 0 : mapl.getBounds(),
+      mapl == null ? void 0 : mapl.getZoom()
+    );
+    if (success) {
+      setLayerData({ geojson, paint: paint2 });
+      layer.setGridLegends({
+        [data.id]: { stops, squareSize }
+      });
+    }
+  });
+  useEffect4(() => {
+    mapl == null ? void 0 : mapl.on("idle", fetchGridData);
+  }, []);
+  return /* @__PURE__ */ jsx25(Source, {
+    id: data.id,
+    type: "geojson",
+    data: layerData.geojson,
+    children: /* @__PURE__ */ jsx25(Layer, {
+      beforeId,
+      id: data.id,
+      type: "fill",
+      paint: layerData.paint
+    })
+  });
+}
+
+// src/components/map/layers/vector/index.tsx
+import { useMemo as useMemo5 } from "react";
+import { Layer as Layer2, Source as Source2 } from "react-map-gl/maplibre";
+import { jsx as jsx26, jsxs as jsxs16 } from "react/jsx-runtime";
+var 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 }) {
+  var _a;
+  const { layer } = useLayers();
+  const layerProps = useMemo5(
+    () => {
+      var _a2, _b, _c, _d;
+      return (_d = (_c = (_a2 = data.data) == null ? void 0 : _a2.styles) == null ? void 0 : _c[(_b = data.data) == null ? void 0 : _b.styleIndex]) == null ? void 0 : _d.colors;
+    },
+    [data, layer.selectedFeatures]
+  );
+  const highlightData = (_a = layer.selectedFeaturesId) == null ? void 0 : _a[data.id];
+  return /* @__PURE__ */ jsxs16(Source2, __spreadProps(__spreadValues({}, data.source), {
+    children: [
+      layerProps && /* @__PURE__ */ jsx26(Layer2, __spreadValues({
+        beforeId
+      }, layerProps)),
+      highlightData && layerProps && /* @__PURE__ */ jsx26(Layer2, __spreadProps(__spreadValues({}, layerProps), {
+        beforeId,
+        id: `hl_${data.id}`,
+        filter: ["in", PROPERTY_ID, ...highlightData],
+        type: layerProps.type === "fill" ? "line" : layerProps.type,
+        paint: paint[layerProps.type]
+      }))
+    ]
+  }));
+}
+
+// src/components/map/layers/raster/index.tsx
+import { Layer as Layer3, Source as Source3 } from "react-map-gl/maplibre";
+import { jsx as jsx27 } from "react/jsx-runtime";
+function RasterLayer({
+  data,
+  beforeId
+}) {
+  var _a;
+  const { mp } = useLayers();
+  return /* @__PURE__ */ jsx27(Source3, {
+    id: data.id,
+    type: "raster",
+    tiles: [
+      `${(_a = mp == null ? void 0 : mp.geoserver) == null ? void 0 : _a.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}`
+    ],
+    tileSize: 256,
+    children: /* @__PURE__ */ jsx27(Layer3, {
+      id: data.id,
+      beforeId,
+      type: "raster",
+      source: "biodiv",
+      layout: { visibility: "visible" },
+      paint: {}
+    })
+  });
+}
+
+// src/components/map/layers/index.tsx
+import { jsx as jsx28 } from "react/jsx-runtime";
+function MapLayer({
+  layer,
+  beforeId
+}) {
+  const { mapl } = useMap4();
+  if (!mapl) {
+    return null;
+  }
+  switch (layer.source.type) {
+    case "vector":
+      return /* @__PURE__ */ jsx28(VectorLayer, {
+        beforeId,
+        layer
+      });
+    case "grid":
+      return /* @__PURE__ */ jsx28(GridLayer, {
+        beforeId,
+        data: layer
+      });
+    case "raster":
+      return /* @__PURE__ */ jsx28(RasterLayer, {
+        beforeId,
+        data: layer
+      });
+    default:
+      return /* @__PURE__ */ jsx28(VectorLayer, {
+        beforeId,
+        layer
+      });
+  }
+}
+
+// src/components/map/markers-list/index.tsx
+import { useMemo as useMemo6 } from "react";
+import { Marker } from "react-map-gl/maplibre";
+import { Fragment as Fragment2, jsx as jsx29 } from "react/jsx-runtime";
+var Marker1 = Marker;
+var MarkersList = () => {
+  const { mp } = useLayers();
+  const markersMemoized = useMemo6(() => mp.markers, [mp.markers]);
+  return /* @__PURE__ */ jsx29(Fragment2, {
+    children: markersMemoized == null ? void 0 : markersMemoized.map(({ latitude, longitude, colorHex }, index) => /* @__PURE__ */ jsx29(Marker1, {
+      latitude,
+      longitude,
+      children: /* @__PURE__ */ jsx29("img", {
+        style: { cursor: "pointer" },
+        alt: "Marker",
+        src: "https://unpkg.com/leaflet@1.9.4/dist/images/marker-icon.png"
+      })
+    }, index))
+  });
+};
+var markers_list_default = MarkersList;
+
+// src/components/map/popup/index.tsx
+import clsx3 from "clsx";
+import { Popup } from "react-map-gl/maplibre";
+import { tw as tw19 } from "twind";
+import { jsx as jsx30, jsxs as jsxs17 } from "react/jsx-runtime";
+var Pop = Popup;
+function HoverPopup({ coordinates }) {
+  const { hover } = useLayers();
+  return (coordinates == null ? void 0 : coordinates.lat) && hover.features ? /* @__PURE__ */ jsx30(Pop, {
+    latitude: coordinates.lat,
+    longitude: coordinates.lng,
+    closeButton: false,
+    children: /* @__PURE__ */ jsxs17("table", {
+      className: tw19`table-auto border`,
+      children: [
+        /* @__PURE__ */ jsx30("thead", {
+          children: /* @__PURE__ */ jsx30("tr", {
+            children: /* @__PURE__ */ jsx30("th", {
+              className: tw19`bg-gray-200 py-1 px-2`,
+              colSpan: 2,
+              children: hover.features.title
+            })
+          })
+        }),
+        /* @__PURE__ */ jsx30("tbody", {
+          children: hover.features.data.map(([k, v], idx) => /* @__PURE__ */ jsxs17("tr", {
+            className: tw19(
+              clsx3({
+                "bg-gray-50": idx % 2 === 0,
+                "border-gray-100 border-t": 1
+              })
+            ),
+            children: [
+              /* @__PURE__ */ jsx30("td", {
+                className: tw19`py-1 px-2`,
+                children: k
+              }),
+              /* @__PURE__ */ jsx30("td", {
+                className: tw19`py-1 px-2 border-l border-gray-100`,
+                children: v
+              })
+            ]
+          }, k + v))
+        })
+      ]
+    })
+  }) : null;
+}
+
+// src/components/map/index.tsx
+import { jsx as jsx31, jsxs as jsxs18 } from "react/jsx-runtime";
+var NavControl = NavigationControl;
+function Map2() {
+  var _a;
+  const { mp, layer, hover, query } = useLayers();
+  const [coordinates, setCoordinates] = useState10();
+  const viewState = useMemo7(
+    () => mp.defaultViewState || defaultViewState2,
+    [mp.defaultViewState]
+  );
+  const onMapClick = (e) => query.setClickedLngLat(e.lngLat);
+  const handleOnMouseMove = (event) => {
+    setCoordinates(event.lngLat);
+    hover.onHover(event);
+  };
+  return /* @__PURE__ */ jsxs18("div", {
+    className: tw20`h-full w-full relative bg-gray-100`,
+    children: [
+      mp.loadToC && /* @__PURE__ */ jsx31(Sidebar, {}),
+      ((_a = layer.selectedFeatures) == null ? void 0 : _a.length) > 0 && /* @__PURE__ */ jsx31(InfoBar, {}),
+      /* @__PURE__ */ jsxs18(MapGL, {
+        id: "mapl",
+        cursor: "default",
+        initialViewState: viewState,
+        style: { width: "100%", height: "100%" },
+        mapStyle: layer.mapStyle,
+        onClick: onMapClick,
+        onMouseMove: handleOnMouseMove,
+        children: [
+          /* @__PURE__ */ jsx31(NavControl, {
+            position: "bottom-right",
+            showZoom: true,
+            showCompass: true
+          }),
+          /* @__PURE__ */ jsx31(markers_list_default, {}),
+          layer.selectedLayers.map((_l, index) => {
+            const beforeId = index > 0 ? layer.selectedIds[index - 1] : void 0;
+            return /* @__PURE__ */ jsx31(MapLayer, {
+              layer: _l,
+              beforeId
+            }, _l.id);
+          }),
+          /* @__PURE__ */ jsx31(HoverPopup, {
+            coordinates
+          }, "popup")
+        ]
+      })
+    ]
+  });
+}
+
+// src/index.tsx
+import { jsx as jsx32 } from "react/jsx-runtime";
+setup({ preflight: false });
+var NakshaMaplibreLayers = (props) => {
+  const mp = React14.useMemo(
+    () => __spreadValues(__spreadValues({}, defaultNakshaProps), props),
+    [props]
+  );
+  return /* @__PURE__ */ jsx32(MapProvider, {
+    children: /* @__PURE__ */ jsx32(TranslationProvider, {
+      localeStrings: locales_default,
+      lang: mp.lang,
+      children: /* @__PURE__ */ jsx32(LayersProvider, {
+        mp,
+        children: /* @__PURE__ */ jsx32(Map2, {})
+      })
+    })
+  });
+};
+export {
+  NakshaMaplibreLayers
+};