@biodiv-platform/naksha-maplibre-layers 5.0.1 → 5.0.3

package/dist/esm/index.js

@@ -482,13 +482,14 @@ var LayersContext = createContext(
   {}
 );
 var LayersProvider = ({ mp: _mp, children }) => {
+  var _a, _b;
   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 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 [maxZoom, setMaxZoom] = useState((_b = styles[(mp == null ? void 0 : mp.mapStyle) || 0]) == null ? void 0 : _b.maxZoom);
   const [selectionStyle, setSelectionStyle] = useState(
     SELECTION_STYLE.TOP
   );
@@ -502,12 +503,12 @@ var LayersProvider = ({ mp: _mp, children }) => {
   const [hoverFeatures, setHoverFeatures] = useState();
   const [selectedFeatures, setSelectedFeatures] = useState();
   const selectedFeaturesId = useMemo(() => {
-    var _a;
+    var _a2;
     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]
+        (_a2 = qr == null ? void 0 : qr.properties) == null ? void 0 : _a2[PROPERTY_ID]
       ];
     }
     return Object.keys(meta).length ? meta : void 0;
@@ -549,7 +550,7 @@ var LayersProvider = ({ mp: _mp, children }) => {
     toggleVectorLayer(layerIndex, styleIndex, false);
   });
   const onMapHover = (e) => __async(void 0, null, function* () {
-    var _a, _b, _c, _d;
+    var _a2, _b2, _c, _d;
     if (!selectedLayerIds.length || !mapl)
       return;
     try {
@@ -558,14 +559,14 @@ var LayersProvider = ({ mp: _mp, children }) => {
         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]);
+        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 _a2, _b2, _c2;
+          var _a3, _b3, _c2;
           return [
-            ((_b2 = (_a2 = layer.data) == null ? void 0 : _a2.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 +587,7 @@ var LayersProvider = ({ mp: _mp, children }) => {
     styleIndex = 0,
     focus = true
   }) {
-    var _a;
+    var _a2;
     if (!add) {
       setSelectedLayerIds(
         selectedLayerIds.filter((_lyrId) => layerId !== _lyrId)
@@ -594,7 +595,7 @@ var LayersProvider = ({ mp: _mp, children }) => {
       return;
     }
     const layerIndex = getLayerIndexById(layerId);
-    const sourceType = (_a = layers[layerIndex]) == null ? void 0 : _a.source.type;
+    const sourceType = (_a2 = layers[layerIndex]) == null ? void 0 : _a2.source.type;
     yield toggleVectorLayer(layerIndex, styleIndex, focus);
     setSelectedLayerIds((_slIds) => [
       layerId,
@@ -689,6 +690,9 @@ var LayersProvider = ({ mp: _mp, children }) => {
         mapStyle,
         featuresAtLatLng,
         setMapStyle,
+        maxZoom,
+        setMaxZoom,
+        mapStyles: styles,
         all: layers,
         setAll: setLayers,
         selectedIds: selectedLayerIds,
@@ -1947,13 +1951,19 @@ function SelectedTabPanel() {
 }
 
 // src/components/sidebar/settings/index.tsx
-import { defaultMapStyles as defaultMapStyles2, useT as useT9 } from "@biodiv-platform/naksha-commons";
+import { 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);
+  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: [
@@ -1962,7 +1972,7 @@ function SettingsTabPanel() {
         label: t("base_style"),
         defaultValue: layer.mapStyle,
         onChange: handleOnStyleChange,
-        children: defaultMapStyles2.map((ms) => /* @__PURE__ */ jsx22("option", {
+        children: layer.mapStyles.map((ms) => /* @__PURE__ */ jsx22("option", {
           value: ms.style,
           children: ms.text
         }, ms.key))
@@ -2286,6 +2296,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: [
@@ -2297,6 +2308,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

@@ -24,6 +24,12 @@ interface NakshaMaplibreLayersProps {
     selectedLayers?: string[];
     onSelectedLayersChange?: any;
     mapStyle?: MapStyles;
+    mapStyles?: Array<{
+        text: string;
+        key: string;
+        style: string;
+        maxZoom?: number;
+    }>;
     layers?: GeoserverLayer[];
     onLayerDownload?: any;
     canLayerShare?: any;

package/dist/index.js

@@ -503,13 +503,14 @@ var LayersContext = (0, import_react.createContext)(
   {}
 );
 var LayersProvider = ({ mp: _mp, children }) => {
+  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 [mapStyle, setMapStyle] = (0, import_react.useState)(
-    import_naksha_commons2.defaultMapStyles[(mp == null ? void 0 : mp.mapStyle) || 0].style
-  );
+  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 [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
   );
@@ -523,12 +524,12 @@ var LayersProvider = ({ mp: _mp, children }) => {
   const [hoverFeatures, setHoverFeatures] = (0, import_react.useState)();
   const [selectedFeatures, setSelectedFeatures] = (0, import_react.useState)();
   const selectedFeaturesId = (0, import_react.useMemo)(() => {
-    var _a;
+    var _a2;
     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]
+        (_a2 = qr == null ? void 0 : qr.properties) == null ? void 0 : _a2[PROPERTY_ID]
       ];
     }
     return Object.keys(meta).length ? meta : void 0;
@@ -570,7 +571,7 @@ var LayersProvider = ({ mp: _mp, children }) => {
     toggleVectorLayer(layerIndex, styleIndex, false);
   });
   const onMapHover = (e) => __async(void 0, null, function* () {
-    var _a, _b, _c, _d;
+    var _a2, _b2, _c, _d;
     if (!selectedLayerIds.length || !mapl)
       return;
     try {
@@ -579,14 +580,14 @@ var LayersProvider = ({ mp: _mp, children }) => {
         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]);
+        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 _a2, _b2, _c2;
+          var _a3, _b3, _c2;
           return [
-            ((_b2 = (_a2 = layer.data) == null ? void 0 : _a2.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 +608,7 @@ var LayersProvider = ({ mp: _mp, children }) => {
     styleIndex = 0,
     focus = true
   }) {
-    var _a;
+    var _a2;
     if (!add) {
       setSelectedLayerIds(
         selectedLayerIds.filter((_lyrId) => layerId !== _lyrId)
@@ -615,7 +616,7 @@ var LayersProvider = ({ mp: _mp, children }) => {
       return;
     }
     const layerIndex = getLayerIndexById(layerId);
-    const sourceType = (_a = layers[layerIndex]) == null ? void 0 : _a.source.type;
+    const sourceType = (_a2 = layers[layerIndex]) == null ? void 0 : _a2.source.type;
     yield toggleVectorLayer(layerIndex, styleIndex, focus);
     setSelectedLayerIds((_slIds) => [
       layerId,
@@ -710,6 +711,9 @@ var LayersProvider = ({ mp: _mp, children }) => {
         mapStyle,
         featuresAtLatLng,
         setMapStyle,
+        maxZoom,
+        setMaxZoom,
+        mapStyles: styles,
         all: layers,
         setAll: setLayers,
         selectedIds: selectedLayerIds,
@@ -1974,7 +1978,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: [
@@ -1983,7 +1993,7 @@ function SettingsTabPanel() {
         label: t("base_style"),
         defaultValue: layer.mapStyle,
         onChange: handleOnStyleChange,
-        children: import_naksha_commons11.defaultMapStyles.map((ms) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("option", {
+        children: layer.mapStyles.map((ms) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("option", {
           value: ms.style,
           children: ms.text
         }, ms.key))
@@ -2307,6 +2317,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: [
@@ -2318,6 +2329,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.1",
+  "version": "5.0.3",
   "author": "harshzalavadiya",
   "main": "./dist/index.js",
   "module": "./dist/esm/index.js",