@biodiv-platform/naksha-maplibre-layers 5.0.2 → 5.0.4

package/dist/esm/index.js

@@ -251,27 +251,27 @@ var processRectangles = function(data, level) {
   counts.forEach((count, hash) => {
     const bboxStart = GeoHash.decodeGeoHash(hash);
     const bboxEnd = GeoHash.decodeGeoHash(bins.get(hash));
-    const feature = new BoundingBox({
+    const feature2 = 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 } }));
+    features.push(__spreadProps(__spreadValues({}, feature2), { 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]
+    const bbox2 = GeoHash.decodeGeoHash(hash);
+    const feature2 = new BoundingBox({
+      minlat: bbox2.latitude[0],
+      minlon: bbox2.longitude[0],
+      maxlat: bbox2.latitude[1],
+      maxlon: bbox2.longitude[1]
     }).toGeoJSON();
-    features.push(__spreadProps(__spreadValues({}, feature), { properties: { count, [PROPERTY_ID]: hash } }));
+    features.push(__spreadProps(__spreadValues({}, feature2), { properties: { count, [PROPERTY_ID]: hash } }));
   }
   return features;
 };
@@ -482,13 +482,18 @@ var LayersContext = createContext(
   {}
 );
 var LayersProvider = ({ mp: _mp, children }) => {
-  var _a;
+  var _a, _b;
   const [mp, setMP] = useState(_mp);
   const { mapl } = useMap();
   const [queryTerm, setQueryTerm] = useState("");
   const queryTermDebounced = useDebounce(queryTerm, 500);
   const styles = mp.mapStyles && mp.mapStyles.length > 0 ? mp.mapStyles : defaultMapStyles;
-  const [mapStyle, setMapStyle] = useState((_a = styles[(mp == null ? void 0 : mp.mapStyle) || 0]) == null ? void 0 : _a.style);
+  const [mapStyle, setMapStyle] = useState(
+    (_a = styles[(mp == null ? void 0 : mp.mapStyle) || 0]) == null ? void 0 : _a.style
+  );
+  const [maxZoom, setMaxZoom] = useState(
+    (_b = styles[(mp == null ? void 0 : mp.mapStyle) || 0]) == null ? void 0 : _b.maxZoom
+  );
   const [selectionStyle, setSelectionStyle] = useState(
     SELECTION_STYLE.TOP
   );
@@ -549,7 +554,7 @@ var LayersProvider = ({ mp: _mp, children }) => {
     toggleVectorLayer(layerIndex, styleIndex, false);
   });
   const onMapHover = (e) => __async(void 0, null, function* () {
-    var _a2, _b, _c, _d;
+    var _a2, _b2, _c, _d;
     if (!selectedLayerIds.length || !mapl)
       return;
     try {
@@ -558,14 +563,14 @@ var LayersProvider = ({ mp: _mp, children }) => {
         layers: [lastLayerId]
       });
       if (feats.length) {
-        const fId = ((_a2 = feats[0]) == null ? void 0 : _a2.id) || ((_c = (_b = feats[0]) == null ? void 0 : _b.properties) == null ? void 0 : _c[PROPERTY_ID]);
+        const fId = ((_a2 = feats[0]) == null ? void 0 : _a2.id) || ((_c = (_b2 = feats[0]) == null ? void 0 : _b2.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 _a3, _b2, _c2;
+          var _a3, _b3, _c2;
           return [
-            ((_b2 = (_a3 = layer.data) == null ? void 0 : _a3.propertyMap) == null ? void 0 : _b2[sc]) || sc,
+            ((_b3 = (_a3 = layer.data) == null ? void 0 : _a3.propertyMap) == null ? void 0 : _b3[sc]) || sc,
             (_c2 = feats[0].properties) == null ? void 0 : _c2[sc]
           ];
         });
@@ -586,7 +591,7 @@ var LayersProvider = ({ mp: _mp, children }) => {
     styleIndex = 0,
     focus = true
   }) {
-    var _a2;
+    var _a2, _b2;
     if (!add) {
       setSelectedLayerIds(
         selectedLayerIds.filter((_lyrId) => layerId !== _lyrId)
@@ -595,11 +600,26 @@ var LayersProvider = ({ mp: _mp, children }) => {
     }
     const layerIndex = getLayerIndexById(layerId);
     const sourceType = (_a2 = layers[layerIndex]) == null ? void 0 : _a2.source.type;
-    yield toggleVectorLayer(layerIndex, styleIndex, focus);
-    setSelectedLayerIds((_slIds) => [
-      layerId,
-      ..._slIds.filter((lid) => lid !== layerId)
-    ]);
+    if (sourceType === "grid") {
+      setSelectedLayerIds((_slIds) => [
+        layerId,
+        ..._slIds.filter((lid) => lid !== layerId)
+      ]);
+      if (focus && ((_b2 = layers[layerIndex]) == null ? void 0 : _b2.bbox)) {
+        setTimeout(() => {
+          mapl == null ? void 0 : mapl.fitBounds(layers[layerIndex].bbox, {
+            padding: 40,
+            duration: 1e3
+          });
+        }, 100);
+      }
+    } else {
+      yield toggleVectorLayer(layerIndex, styleIndex, focus);
+      setSelectedLayerIds((_slIds) => [
+        layerId,
+        ..._slIds.filter((lid) => lid !== layerId)
+      ]);
+    }
   });
   const clearAllLayers = () => __async(void 0, null, function* () {
     return setSelectedLayerIds([]);
@@ -689,6 +709,8 @@ var LayersProvider = ({ mp: _mp, children }) => {
         mapStyle,
         featuresAtLatLng,
         setMapStyle,
+        maxZoom,
+        setMaxZoom,
         mapStyles: styles,
         all: layers,
         setAll: setLayers,
@@ -1954,7 +1976,13 @@ 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);
+  const handleOnStyleChange = (e) => {
+    var _a;
+    layer.setMapStyle(e.target.value);
+    layer.setMaxZoom(
+      (_a = layer.mapStyles.find((ms) => ms.style === e.target.value)) == null ? void 0 : _a.maxZoom
+    );
+  };
   return /* @__PURE__ */ jsxs14("div", {
     className: tw17`w-full p-4 flex flex-col gap-4`,
     children: [
@@ -2057,6 +2085,170 @@ function Sidebar() {
 // src/components/map/layers/index.tsx
 import { useMap as useMap4 } from "react-map-gl/maplibre";
 
+// ../../node_modules/@turf/helpers/dist/es/index.js
+var earthRadius = 63710088e-1;
+var factors = {
+  centimeters: earthRadius * 100,
+  centimetres: earthRadius * 100,
+  degrees: earthRadius / 111325,
+  feet: earthRadius * 3.28084,
+  inches: earthRadius * 39.37,
+  kilometers: earthRadius / 1e3,
+  kilometres: earthRadius / 1e3,
+  meters: earthRadius,
+  metres: earthRadius,
+  miles: earthRadius / 1609.344,
+  millimeters: earthRadius * 1e3,
+  millimetres: earthRadius * 1e3,
+  nauticalmiles: earthRadius / 1852,
+  radians: 1,
+  yards: earthRadius * 1.0936
+};
+var unitsFactors = {
+  centimeters: 100,
+  centimetres: 100,
+  degrees: 1 / 111325,
+  feet: 3.28084,
+  inches: 39.37,
+  kilometers: 1 / 1e3,
+  kilometres: 1 / 1e3,
+  meters: 1,
+  metres: 1,
+  miles: 1 / 1609.344,
+  millimeters: 1e3,
+  millimetres: 1e3,
+  nauticalmiles: 1 / 1852,
+  radians: 1 / earthRadius,
+  yards: 1.0936133
+};
+
+// ../../node_modules/@turf/meta/dist/es/index.js
+function coordEach(geojson, callback, excludeWrapCoord) {
+  if (geojson === null)
+    return;
+  var j, k, l, geometry, stopG, coords, geometryMaybeCollection, wrapShrink = 0, coordIndex = 0, isGeometryCollection, type = geojson.type, isFeatureCollection = type === "FeatureCollection", isFeature = type === "Feature", stop = isFeatureCollection ? geojson.features.length : 1;
+  for (var featureIndex = 0; featureIndex < stop; featureIndex++) {
+    geometryMaybeCollection = isFeatureCollection ? geojson.features[featureIndex].geometry : isFeature ? geojson.geometry : geojson;
+    isGeometryCollection = geometryMaybeCollection ? geometryMaybeCollection.type === "GeometryCollection" : false;
+    stopG = isGeometryCollection ? geometryMaybeCollection.geometries.length : 1;
+    for (var geomIndex = 0; geomIndex < stopG; geomIndex++) {
+      var multiFeatureIndex = 0;
+      var geometryIndex = 0;
+      geometry = isGeometryCollection ? geometryMaybeCollection.geometries[geomIndex] : geometryMaybeCollection;
+      if (geometry === null)
+        continue;
+      coords = geometry.coordinates;
+      var geomType = geometry.type;
+      wrapShrink = excludeWrapCoord && (geomType === "Polygon" || geomType === "MultiPolygon") ? 1 : 0;
+      switch (geomType) {
+        case null:
+          break;
+        case "Point":
+          if (callback(
+            coords,
+            coordIndex,
+            featureIndex,
+            multiFeatureIndex,
+            geometryIndex
+          ) === false)
+            return false;
+          coordIndex++;
+          multiFeatureIndex++;
+          break;
+        case "LineString":
+        case "MultiPoint":
+          for (j = 0; j < coords.length; j++) {
+            if (callback(
+              coords[j],
+              coordIndex,
+              featureIndex,
+              multiFeatureIndex,
+              geometryIndex
+            ) === false)
+              return false;
+            coordIndex++;
+            if (geomType === "MultiPoint")
+              multiFeatureIndex++;
+          }
+          if (geomType === "LineString")
+            multiFeatureIndex++;
+          break;
+        case "Polygon":
+        case "MultiLineString":
+          for (j = 0; j < coords.length; j++) {
+            for (k = 0; k < coords[j].length - wrapShrink; k++) {
+              if (callback(
+                coords[j][k],
+                coordIndex,
+                featureIndex,
+                multiFeatureIndex,
+                geometryIndex
+              ) === false)
+                return false;
+              coordIndex++;
+            }
+            if (geomType === "MultiLineString")
+              multiFeatureIndex++;
+            if (geomType === "Polygon")
+              geometryIndex++;
+          }
+          if (geomType === "Polygon")
+            multiFeatureIndex++;
+          break;
+        case "MultiPolygon":
+          for (j = 0; j < coords.length; j++) {
+            geometryIndex = 0;
+            for (k = 0; k < coords[j].length; k++) {
+              for (l = 0; l < coords[j][k].length - wrapShrink; l++) {
+                if (callback(
+                  coords[j][k][l],
+                  coordIndex,
+                  featureIndex,
+                  multiFeatureIndex,
+                  geometryIndex
+                ) === false)
+                  return false;
+                coordIndex++;
+              }
+              geometryIndex++;
+            }
+            multiFeatureIndex++;
+          }
+          break;
+        case "GeometryCollection":
+          for (j = 0; j < geometry.geometries.length; j++)
+            if (coordEach(geometry.geometries[j], callback, excludeWrapCoord) === false)
+              return false;
+          break;
+        default:
+          throw new Error("Unknown Geometry Type");
+      }
+    }
+  }
+}
+
+// ../../node_modules/@turf/bbox/dist/es/index.js
+function bbox(geojson) {
+  var result = [Infinity, Infinity, -Infinity, -Infinity];
+  coordEach(geojson, function(coord) {
+    if (result[0] > coord[0]) {
+      result[0] = coord[0];
+    }
+    if (result[1] > coord[1]) {
+      result[1] = coord[1];
+    }
+    if (result[2] < coord[0]) {
+      result[2] = coord[0];
+    }
+    if (result[3] < coord[1]) {
+      result[3] = coord[1];
+    }
+  });
+  return result;
+}
+bbox["default"] = bbox;
+var es_default = bbox;
+
 // 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";
@@ -2068,7 +2260,9 @@ function GridLayer({
   const { layer } = useLayers();
   const { mapl } = useMap3();
   const [layerData, setLayerData] = useState9({ geojson: {}, paint: {} });
-  const fetchGridData = () => __async(this, null, function* () {
+  const isSelected = layer.selectedIds.includes(data.id);
+  const isLastSelected = layer.selectedIds[0] === data.id;
+  const fetchGridData = (shouldFitBounds = false) => __async(this, null, function* () {
     const { success, geojson, paint: paint2, stops, squareSize } = yield getGridLayerData(
       data.source.fetcher,
       mapl == null ? void 0 : mapl.getBounds(),
@@ -2076,14 +2270,50 @@ function GridLayer({
     );
     if (success) {
       setLayerData({ geojson, paint: paint2 });
+      if (shouldFitBounds && isLastSelected && data.zoomToFit) {
+        try {
+          const [minLon, minLat, maxLon, maxLat] = es_default(geojson);
+          mapl == null ? void 0 : mapl.fitBounds(
+            [
+              [minLon, minLat],
+              [maxLon, maxLat]
+            ],
+            { padding: 40, animate: true }
+          );
+        } catch (e) {
+          console.warn("Failed to compute bbox", e);
+        }
+      }
       layer.setGridLegends({
         [data.id]: { stops, squareSize }
       });
     }
   });
   useEffect4(() => {
-    mapl == null ? void 0 : mapl.on("idle", fetchGridData);
-  }, []);
+    if (isSelected && isLastSelected) {
+      fetchGridData(true);
+    } else if (isSelected) {
+      fetchGridData(false);
+    }
+  }, [isSelected, isLastSelected]);
+  useEffect4(() => {
+    if (!isSelected || !mapl)
+      return;
+    const handleIdle = () => fetchGridData(false);
+    mapl.on("idle", handleIdle);
+    return () => {
+      mapl.off("idle", handleIdle);
+    };
+  }, [isSelected, mapl]);
+  useEffect4(() => {
+    return () => {
+      layer.setGridLegends((prev) => {
+        const newLegends = __spreadValues({}, prev);
+        delete newLegends[data.id];
+        return newLegends;
+      });
+    };
+  }, [data.id]);
   return /* @__PURE__ */ jsx25(Source, {
     id: data.id,
     type: "geojson",
@@ -2287,6 +2517,7 @@ function Map2() {
     setCoordinates(event.lngLat);
     hover.onHover(event);
   };
+  console.info("NakshaMaplibreLayers props");
   return /* @__PURE__ */ jsxs18("div", {
     className: tw20`h-full w-full relative bg-gray-100`,
     children: [
@@ -2298,6 +2529,7 @@ function Map2() {
         initialViewState: viewState,
         style: { width: "100%", height: "100%" },
         mapStyle: layer.mapStyle,
+        maxZoom: layer.maxZoom,
         onClick: onMapClick,
         onMouseMove: handleOnMouseMove,
         children: [

package/dist/index.d.ts

@@ -60,6 +60,7 @@ interface GeoserverLayer {
     createdDate?: string;
     isDownloadable?: boolean;
     bbox?: any[];
+    zoomToFit?: boolean;
     isAdded?: boolean;
     ats?: any;
     source: {

package/dist/index.js

@@ -272,27 +272,27 @@ var processRectangles = function(data, level) {
   counts.forEach((count, hash) => {
     const bboxStart = import_geohash.GeoHash.decodeGeoHash(hash);
     const bboxEnd = import_geohash.GeoHash.decodeGeoHash(bins.get(hash));
-    const feature = new import_boundingbox.default({
+    const feature2 = new import_boundingbox.default({
       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 } }));
+    features.push(__spreadProps(__spreadValues({}, feature2), { properties: { count, [PROPERTY_ID]: hash } }));
   });
   return features;
 };
 var processSquares = (data) => {
   const features = [];
   for (const [hash, count] of Object.entries(data)) {
-    const bbox = import_geohash.GeoHash.decodeGeoHash(hash);
-    const feature = new import_boundingbox.default({
-      minlat: bbox.latitude[0],
-      minlon: bbox.longitude[0],
-      maxlat: bbox.latitude[1],
-      maxlon: bbox.longitude[1]
+    const bbox2 = import_geohash.GeoHash.decodeGeoHash(hash);
+    const feature2 = new import_boundingbox.default({
+      minlat: bbox2.latitude[0],
+      minlon: bbox2.longitude[0],
+      maxlat: bbox2.latitude[1],
+      maxlon: bbox2.longitude[1]
     }).toGeoJSON();
-    features.push(__spreadProps(__spreadValues({}, feature), { properties: { count, [PROPERTY_ID]: hash } }));
+    features.push(__spreadProps(__spreadValues({}, feature2), { properties: { count, [PROPERTY_ID]: hash } }));
   }
   return features;
 };
@@ -503,13 +503,18 @@ var LayersContext = (0, import_react.createContext)(
   {}
 );
 var LayersProvider = ({ mp: _mp, children }) => {
-  var _a;
+  var _a, _b;
   const [mp, setMP] = (0, import_react.useState)(_mp);
   const { mapl } = (0, import_maplibre.useMap)();
   const [queryTerm, setQueryTerm] = (0, import_react.useState)("");
   const queryTermDebounced = (0, import_naksha_commons2.useDebounce)(queryTerm, 500);
   const styles = mp.mapStyles && mp.mapStyles.length > 0 ? mp.mapStyles : import_naksha_commons2.defaultMapStyles;
-  const [mapStyle, setMapStyle] = (0, import_react.useState)((_a = styles[(mp == null ? void 0 : mp.mapStyle) || 0]) == null ? void 0 : _a.style);
+  const [mapStyle, setMapStyle] = (0, import_react.useState)(
+    (_a = styles[(mp == null ? void 0 : mp.mapStyle) || 0]) == null ? void 0 : _a.style
+  );
+  const [maxZoom, setMaxZoom] = (0, import_react.useState)(
+    (_b = styles[(mp == null ? void 0 : mp.mapStyle) || 0]) == null ? void 0 : _b.maxZoom
+  );
   const [selectionStyle, setSelectionStyle] = (0, import_react.useState)(
     SELECTION_STYLE.TOP
   );
@@ -570,7 +575,7 @@ var LayersProvider = ({ mp: _mp, children }) => {
     toggleVectorLayer(layerIndex, styleIndex, false);
   });
   const onMapHover = (e) => __async(void 0, null, function* () {
-    var _a2, _b, _c, _d;
+    var _a2, _b2, _c, _d;
     if (!selectedLayerIds.length || !mapl)
       return;
     try {
@@ -579,14 +584,14 @@ var LayersProvider = ({ mp: _mp, children }) => {
         layers: [lastLayerId]
       });
       if (feats.length) {
-        const fId = ((_a2 = feats[0]) == null ? void 0 : _a2.id) || ((_c = (_b = feats[0]) == null ? void 0 : _b.properties) == null ? void 0 : _c[PROPERTY_ID]);
+        const fId = ((_a2 = feats[0]) == null ? void 0 : _a2.id) || ((_c = (_b2 = feats[0]) == null ? void 0 : _b2.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 _a3, _b2, _c2;
+          var _a3, _b3, _c2;
           return [
-            ((_b2 = (_a3 = layer.data) == null ? void 0 : _a3.propertyMap) == null ? void 0 : _b2[sc]) || sc,
+            ((_b3 = (_a3 = layer.data) == null ? void 0 : _a3.propertyMap) == null ? void 0 : _b3[sc]) || sc,
             (_c2 = feats[0].properties) == null ? void 0 : _c2[sc]
           ];
         });
@@ -607,7 +612,7 @@ var LayersProvider = ({ mp: _mp, children }) => {
     styleIndex = 0,
     focus = true
   }) {
-    var _a2;
+    var _a2, _b2;
     if (!add) {
       setSelectedLayerIds(
         selectedLayerIds.filter((_lyrId) => layerId !== _lyrId)
@@ -616,11 +621,26 @@ var LayersProvider = ({ mp: _mp, children }) => {
     }
     const layerIndex = getLayerIndexById(layerId);
     const sourceType = (_a2 = layers[layerIndex]) == null ? void 0 : _a2.source.type;
-    yield toggleVectorLayer(layerIndex, styleIndex, focus);
-    setSelectedLayerIds((_slIds) => [
-      layerId,
-      ..._slIds.filter((lid) => lid !== layerId)
-    ]);
+    if (sourceType === "grid") {
+      setSelectedLayerIds((_slIds) => [
+        layerId,
+        ..._slIds.filter((lid) => lid !== layerId)
+      ]);
+      if (focus && ((_b2 = layers[layerIndex]) == null ? void 0 : _b2.bbox)) {
+        setTimeout(() => {
+          mapl == null ? void 0 : mapl.fitBounds(layers[layerIndex].bbox, {
+            padding: 40,
+            duration: 1e3
+          });
+        }, 100);
+      }
+    } else {
+      yield toggleVectorLayer(layerIndex, styleIndex, focus);
+      setSelectedLayerIds((_slIds) => [
+        layerId,
+        ..._slIds.filter((lid) => lid !== layerId)
+      ]);
+    }
   });
   const clearAllLayers = () => __async(void 0, null, function* () {
     return setSelectedLayerIds([]);
@@ -710,6 +730,8 @@ var LayersProvider = ({ mp: _mp, children }) => {
         mapStyle,
         featuresAtLatLng,
         setMapStyle,
+        maxZoom,
+        setMaxZoom,
         mapStyles: styles,
         all: layers,
         setAll: setLayers,
@@ -1975,7 +1997,13 @@ var import_jsx_runtime22 = require("react/jsx-runtime");
 function SettingsTabPanel() {
   const { layer } = useLayers();
   const { t } = (0, import_naksha_commons11.useT)();
-  const handleOnStyleChange = (e) => layer.setMapStyle(e.target.value);
+  const handleOnStyleChange = (e) => {
+    var _a;
+    layer.setMapStyle(e.target.value);
+    layer.setMaxZoom(
+      (_a = layer.mapStyles.find((ms) => ms.style === e.target.value)) == null ? void 0 : _a.maxZoom
+    );
+  };
   return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", {
     className: import_twind17.tw`w-full p-4 flex flex-col gap-4`,
     children: [
@@ -2078,6 +2106,170 @@ function Sidebar() {
 // src/components/map/layers/index.tsx
 var import_maplibre6 = require("react-map-gl/maplibre");
 
+// ../../node_modules/@turf/helpers/dist/es/index.js
+var earthRadius = 63710088e-1;
+var factors = {
+  centimeters: earthRadius * 100,
+  centimetres: earthRadius * 100,
+  degrees: earthRadius / 111325,
+  feet: earthRadius * 3.28084,
+  inches: earthRadius * 39.37,
+  kilometers: earthRadius / 1e3,
+  kilometres: earthRadius / 1e3,
+  meters: earthRadius,
+  metres: earthRadius,
+  miles: earthRadius / 1609.344,
+  millimeters: earthRadius * 1e3,
+  millimetres: earthRadius * 1e3,
+  nauticalmiles: earthRadius / 1852,
+  radians: 1,
+  yards: earthRadius * 1.0936
+};
+var unitsFactors = {
+  centimeters: 100,
+  centimetres: 100,
+  degrees: 1 / 111325,
+  feet: 3.28084,
+  inches: 39.37,
+  kilometers: 1 / 1e3,
+  kilometres: 1 / 1e3,
+  meters: 1,
+  metres: 1,
+  miles: 1 / 1609.344,
+  millimeters: 1e3,
+  millimetres: 1e3,
+  nauticalmiles: 1 / 1852,
+  radians: 1 / earthRadius,
+  yards: 1.0936133
+};
+
+// ../../node_modules/@turf/meta/dist/es/index.js
+function coordEach(geojson, callback, excludeWrapCoord) {
+  if (geojson === null)
+    return;
+  var j, k, l, geometry, stopG, coords, geometryMaybeCollection, wrapShrink = 0, coordIndex = 0, isGeometryCollection, type = geojson.type, isFeatureCollection = type === "FeatureCollection", isFeature = type === "Feature", stop = isFeatureCollection ? geojson.features.length : 1;
+  for (var featureIndex = 0; featureIndex < stop; featureIndex++) {
+    geometryMaybeCollection = isFeatureCollection ? geojson.features[featureIndex].geometry : isFeature ? geojson.geometry : geojson;
+    isGeometryCollection = geometryMaybeCollection ? geometryMaybeCollection.type === "GeometryCollection" : false;
+    stopG = isGeometryCollection ? geometryMaybeCollection.geometries.length : 1;
+    for (var geomIndex = 0; geomIndex < stopG; geomIndex++) {
+      var multiFeatureIndex = 0;
+      var geometryIndex = 0;
+      geometry = isGeometryCollection ? geometryMaybeCollection.geometries[geomIndex] : geometryMaybeCollection;
+      if (geometry === null)
+        continue;
+      coords = geometry.coordinates;
+      var geomType = geometry.type;
+      wrapShrink = excludeWrapCoord && (geomType === "Polygon" || geomType === "MultiPolygon") ? 1 : 0;
+      switch (geomType) {
+        case null:
+          break;
+        case "Point":
+          if (callback(
+            coords,
+            coordIndex,
+            featureIndex,
+            multiFeatureIndex,
+            geometryIndex
+          ) === false)
+            return false;
+          coordIndex++;
+          multiFeatureIndex++;
+          break;
+        case "LineString":
+        case "MultiPoint":
+          for (j = 0; j < coords.length; j++) {
+            if (callback(
+              coords[j],
+              coordIndex,
+              featureIndex,
+              multiFeatureIndex,
+              geometryIndex
+            ) === false)
+              return false;
+            coordIndex++;
+            if (geomType === "MultiPoint")
+              multiFeatureIndex++;
+          }
+          if (geomType === "LineString")
+            multiFeatureIndex++;
+          break;
+        case "Polygon":
+        case "MultiLineString":
+          for (j = 0; j < coords.length; j++) {
+            for (k = 0; k < coords[j].length - wrapShrink; k++) {
+              if (callback(
+                coords[j][k],
+                coordIndex,
+                featureIndex,
+                multiFeatureIndex,
+                geometryIndex
+              ) === false)
+                return false;
+              coordIndex++;
+            }
+            if (geomType === "MultiLineString")
+              multiFeatureIndex++;
+            if (geomType === "Polygon")
+              geometryIndex++;
+          }
+          if (geomType === "Polygon")
+            multiFeatureIndex++;
+          break;
+        case "MultiPolygon":
+          for (j = 0; j < coords.length; j++) {
+            geometryIndex = 0;
+            for (k = 0; k < coords[j].length; k++) {
+              for (l = 0; l < coords[j][k].length - wrapShrink; l++) {
+                if (callback(
+                  coords[j][k][l],
+                  coordIndex,
+                  featureIndex,
+                  multiFeatureIndex,
+                  geometryIndex
+                ) === false)
+                  return false;
+                coordIndex++;
+              }
+              geometryIndex++;
+            }
+            multiFeatureIndex++;
+          }
+          break;
+        case "GeometryCollection":
+          for (j = 0; j < geometry.geometries.length; j++)
+            if (coordEach(geometry.geometries[j], callback, excludeWrapCoord) === false)
+              return false;
+          break;
+        default:
+          throw new Error("Unknown Geometry Type");
+      }
+    }
+  }
+}
+
+// ../../node_modules/@turf/bbox/dist/es/index.js
+function bbox(geojson) {
+  var result = [Infinity, Infinity, -Infinity, -Infinity];
+  coordEach(geojson, function(coord) {
+    if (result[0] > coord[0]) {
+      result[0] = coord[0];
+    }
+    if (result[1] > coord[1]) {
+      result[1] = coord[1];
+    }
+    if (result[2] < coord[0]) {
+      result[2] = coord[0];
+    }
+    if (result[3] < coord[1]) {
+      result[3] = coord[1];
+    }
+  });
+  return result;
+}
+bbox["default"] = bbox;
+var es_default = bbox;
+
 // src/components/map/layers/grid/index.tsx
 var import_react10 = require("react");
 var import_maplibre3 = require("react-map-gl/maplibre");
@@ -2089,7 +2281,9 @@ function GridLayer({
   const { layer } = useLayers();
   const { mapl } = (0, import_maplibre3.useMap)();
   const [layerData, setLayerData] = (0, import_react10.useState)({ geojson: {}, paint: {} });
-  const fetchGridData = () => __async(this, null, function* () {
+  const isSelected = layer.selectedIds.includes(data.id);
+  const isLastSelected = layer.selectedIds[0] === data.id;
+  const fetchGridData = (shouldFitBounds = false) => __async(this, null, function* () {
     const { success, geojson, paint: paint2, stops, squareSize } = yield getGridLayerData(
       data.source.fetcher,
       mapl == null ? void 0 : mapl.getBounds(),
@@ -2097,14 +2291,50 @@ function GridLayer({
     );
     if (success) {
       setLayerData({ geojson, paint: paint2 });
+      if (shouldFitBounds && isLastSelected && data.zoomToFit) {
+        try {
+          const [minLon, minLat, maxLon, maxLat] = es_default(geojson);
+          mapl == null ? void 0 : mapl.fitBounds(
+            [
+              [minLon, minLat],
+              [maxLon, maxLat]
+            ],
+            { padding: 40, animate: true }
+          );
+        } catch (e) {
+          console.warn("Failed to compute bbox", e);
+        }
+      }
       layer.setGridLegends({
         [data.id]: { stops, squareSize }
       });
     }
   });
   (0, import_react10.useEffect)(() => {
-    mapl == null ? void 0 : mapl.on("idle", fetchGridData);
-  }, []);
+    if (isSelected && isLastSelected) {
+      fetchGridData(true);
+    } else if (isSelected) {
+      fetchGridData(false);
+    }
+  }, [isSelected, isLastSelected]);
+  (0, import_react10.useEffect)(() => {
+    if (!isSelected || !mapl)
+      return;
+    const handleIdle = () => fetchGridData(false);
+    mapl.on("idle", handleIdle);
+    return () => {
+      mapl.off("idle", handleIdle);
+    };
+  }, [isSelected, mapl]);
+  (0, import_react10.useEffect)(() => {
+    return () => {
+      layer.setGridLegends((prev) => {
+        const newLegends = __spreadValues({}, prev);
+        delete newLegends[data.id];
+        return newLegends;
+      });
+    };
+  }, [data.id]);
   return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_maplibre3.Source, {
     id: data.id,
     type: "geojson",
@@ -2308,6 +2538,7 @@ function Map2() {
     setCoordinates(event.lngLat);
     hover.onHover(event);
   };
+  console.info("NakshaMaplibreLayers props");
   return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", {
     className: import_twind20.tw`h-full w-full relative bg-gray-100`,
     children: [
@@ -2319,6 +2550,7 @@ function Map2() {
         initialViewState: viewState,
         style: { width: "100%", height: "100%" },
         mapStyle: layer.mapStyle,
+        maxZoom: layer.maxZoom,
         onClick: onMapClick,
         onMouseMove: handleOnMouseMove,
         children: [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@biodiv-platform/naksha-maplibre-layers",
-  "version": "5.0.2",
+  "version": "5.0.4",
   "author": "harshzalavadiya",
   "main": "./dist/index.js",
   "module": "./dist/esm/index.js",