Fix zoom level type error in custom layer

Signed-off-by: Junqiu Lei <[email protected]>
opensearch-project · Mar 29, 2024 · 4a0a657 · 4a0a657
1 parent 4f413a7
commit 4a0a657
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 5 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -16,6 +16,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 ### Features
 ### Enhancements
 ### Bug Fixes
+* Fix zoom level type error in custom layer ([#605](https://github.com/opensearch-project/dashboards-maps/pull/605))
 ### Infrastructure
 ### Documentation
 ### Maintenance

diff --git a/public/components/layer_config/layer_basic_settings.tsx b/public/components/layer_config/layer_basic_settings.tsx
@@ -25,6 +25,7 @@ import {
   MAP_LAYER_DEFAULT_OPACITY_STEP,
   MAX_LAYER_NAME_LIMIT,
 } from '../../../common';
+import { ValueMember } from '../../../../../src/plugins/opensearch_dashboards_react/public/validated_range/validated_dual_range';
 
 interface Props {
   selectedLayerConfig: MapLayerSpecification;
@@ -73,8 +74,9 @@ export const LayerBasicSettings = ({
     const newLayerConfig = { ...selectedLayerConfig, [key]: value };
     setSelectedLayerConfig(newLayerConfig);
   };
-  const onZoomChange = (value: number[]) => {
-    commonUpdate('zoomRange', value);
+  const onZoomChange = (value: ValueMember[]) => {
+    const zoomNumberValue = value.map((v) => Number(v));
+    commonUpdate('zoomRange', zoomNumberValue);
   };
 
   const onOpacityChange = (e: any) => {
@@ -121,7 +123,7 @@ export const LayerBasicSettings = ({
           <EuiDualRange
             min={MAP_DEFAULT_MIN_ZOOM}
             max={MAP_DEFAULT_MAX_ZOOM}
-            value={selectedLayerConfig.zoomRange}
+            value={selectedLayerConfig.zoomRange as [ValueMember, ValueMember]}
             showInput
             minInputProps={{ 'aria-label': 'Min value' }}
             maxInputProps={{ 'aria-label': 'Max value' }}

diff --git a/public/model/customLayerFunctions.ts b/public/model/customLayerFunctions.ts
@@ -51,6 +51,8 @@ const addNewLayer = (layerConfig: CustomLayerSpecification, maplibreRef: Maplibr
       tileSize: 256,
       attribution: layerSource?.attribution,
     });
+    // Convert zoomRange to number[] to avoid type error for backport versions
+    const zoomRange: number[] = layerConfig.zoomRange.map((zoom) => Number(zoom));
     maplibreInstance.addLayer({
       id: layerConfig.id,
       type: 'raster',
@@ -61,8 +63,8 @@ const addNewLayer = (layerConfig: CustomLayerSpecification, maplibreRef: Maplibr
       layout: {
         visibility: layerConfig.visibility === 'visible' ? 'visible' : 'none',
       },
-      minzoom: layerConfig.zoomRange[0],
-      maxzoom: layerConfig.zoomRange[1],
+      minzoom: zoomRange[0],
+      maxzoom: zoomRange[1],
     });
   }
 };