refator: ♻️ maxzoom prop added and code refactoring

Author: arunasd463

packages/naksha-components-react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "naksha-components-react",
-  "version": "4.6.1-beta.21",
+  "version": "5.0.0",
   "author": "harshzalavadiya",
   "main": "./dist/index.js",
   "module": "./dist/esm/index.js",
@@ -24,8 +24,8 @@
     "@biodiv-platform/naksha-gmaps-draw": "4.5.3",
     "@biodiv-platform/naksha-gmaps-view": "4.4.9",
     "@biodiv-platform/naksha-maplibre-draw": "5.0.10",
-    "@biodiv-platform/naksha-maplibre-layers": "5.0.1",
-    "@biodiv-platform/naksha-maplibre-view": "5.0.2",
+    "@biodiv-platform/naksha-maplibre-layers": "5.0.3",
+    "@biodiv-platform/naksha-maplibre-view": "5.0.3",
     "@biodiv-platform/tsconfig": "4.4.9"
   },
   "devDependencies": {

packages/naksha-maplibre-layers/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",

packages/naksha-maplibre-layers/src/components/map/index.tsx

@@ -28,6 +28,8 @@ export default function Map() {
     hover.onHover(event);
   };
 
+  console.info("NakshaMaplibreLayers props");
+
   return (
     <div className={tw`h-full w-full relative bg-gray-100`}>
       {mp.loadToC && <Sidebar />}
@@ -38,6 +40,7 @@ export default function Map() {
         initialViewState={viewState}
         style={{ width: "100%", height: "100%" }}
         mapStyle={layer.mapStyle}
+        maxZoom={layer.maxZoom}
         onClick={onMapClick}
         onMouseMove={handleOnMouseMove}
       >

packages/naksha-maplibre-layers/src/components/sidebar/settings/index.tsx

@@ -10,8 +10,12 @@ export default function SettingsTabPanel() {
   const { layer } = useLayers();
   const { t } = useT();
 
-  const handleOnStyleChange = (e) => layer.setMapStyle(e.target.value);
-
+  const handleOnStyleChange = (e) => {
+    layer.setMapStyle(e.target.value);
+    layer.setMaxZoom(
+      layer.mapStyles.find((ms) => ms.style === e.target.value)?.maxZoom
+    );
+  };
   return (
     <div className={tw`w-full p-4 flex flex-col gap-4`}>
       <SelectInput

packages/naksha-maplibre-layers/src/hooks/use-layers.tsx

@@ -26,8 +26,12 @@ interface LayersContextProps {
   setIsInfoBarOpen;
   layer: {
     mapStyle?;
-    mapStyles?;
     setMapStyle;
+
+    maxZoom?;
+    setMaxZoom?;
+
+    mapStyles?;
     featuresAtLatLng;
     all: GeoserverLayer[];
     setAll;
@@ -84,6 +88,7 @@ export const LayersProvider = ({ mp: _mp, children }: LayersProviderProps) => {
     mp.mapStyles && mp.mapStyles.length > 0 ? mp.mapStyles : defaultMapStyles;
 
   const [mapStyle, setMapStyle] = useState(styles[mp?.mapStyle || 0]?.style);
+  const [maxZoom, setMaxZoom] = useState(styles[mp?.mapStyle || 0]?.maxZoom);
   const [selectionStyle, setSelectionStyle] = useState<string>(
     SELECTION_STYLE.TOP
   );
@@ -331,6 +336,8 @@ export const LayersProvider = ({ mp: _mp, children }: LayersProviderProps) => {
           mapStyle,
           featuresAtLatLng,
           setMapStyle,
+          maxZoom,
+          setMaxZoom,
           mapStyles: styles,
           all: layers,
           setAll: setLayers,

packages/naksha-maplibre-view/package.json

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

packages/naksha-maplibre-view/src/components/map.tsx

@@ -26,7 +26,9 @@ export default function Map(props: NakshaMaplibreViewProps) {
   );
 
   const mapTile = props.mapStyles ? props.mapStyles : defaultMapStyles;
-  const mapStyle = mapTile[selectedMapStyleIdx]?.style;
+  const selectedMapTile = mapTile[selectedMapStyleIdx];
+  const mapStyle = selectedMapTile?.style;
+  const maxZoom = selectedMapTile?.maxZoom;
 
   const onDataChange = () => {
     if (!props.data || !mapv) return;
@@ -39,7 +41,7 @@ export default function Map(props: NakshaMaplibreViewProps) {
     onDataChange();
   }, [props.data]);
 
-  const handleStyleChange = (idx) => {
+  const handleStyleChange = (idx: number) => {
     setSelectedMapStyleIdx(idx);
   };
 
@@ -50,6 +52,7 @@ export default function Map(props: NakshaMaplibreViewProps) {
       initialViewState={viewState}
       style={{ width: "100%", height: "100%" }}
       mapStyle={mapStyle}
+      maxZoom={maxZoom}
       onLoad={onDataChange}
     >
       <NavControl position="bottom-right" showZoom={true} showCompass={true} />