From 4a0a657d9ee6b562655ef938c10813c02fbabd33 Mon Sep 17 00:00:00 2001
From: Junqiu Lei <junqiu@amazon.com>
Date: Fri, 29 Mar 2024 13:16:41 -0700
Subject: [PATCH] Fix zoom level type error in custom layer

Signed-off-by: Junqiu Lei <junqiu@amazon.com>
---
 CHANGELOG.md                                            | 1 +
 public/components/layer_config/layer_basic_settings.tsx | 8 +++++---
 public/model/customLayerFunctions.ts                    | 6 ++++--
 3 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 0186244d..287942cf 100644
--- 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
index 2dbbffc6..ea6b6a9f 100644
--- 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
index 51fc2a2d..05d0e86e 100644
--- 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],
     });
   }
 };