From d19c7d1496fcac933d6b49d2b2a0908f4a44bb0e Mon Sep 17 00:00:00 2001
From: Junqiu Lei <junqiu@amazon.com>
Date: Fri, 30 Dec 2022 16:15:34 -0800
Subject: [PATCH] Update beforeMbLayerId to addLayer

Signed-off-by: Junqiu Lei <junqiu@amazon.com>
---
 .../public/model/OSMLayerFunctions.ts            | 14 ++------------
 .../public/model/customLayerFunctions.ts         | 16 ++++------------
 .../public/model/documentLayerFunctions.ts       | 12 +-----------
 maps_dashboards/public/model/layersFunctions.ts  | 11 +++++++++++
 4 files changed, 18 insertions(+), 35 deletions(-)

diff --git a/maps_dashboards/public/model/OSMLayerFunctions.ts b/maps_dashboards/public/model/OSMLayerFunctions.ts
index 3c882082..ca879121 100644
--- a/maps_dashboards/public/model/OSMLayerFunctions.ts
+++ b/maps_dashboards/public/model/OSMLayerFunctions.ts
@@ -1,6 +1,6 @@
 import { Map as Maplibre, LayerSpecification } from 'maplibre-gl';
 import { OSMLayerSpecification } from './mapLayerType';
-import { getMaplibreBeforeLayerId } from './layersFunctions';
+import { getMaplibreBeforeLayerId, layerExistInMbSource } from './layersFunctions';
 
 interface MaplibreRef {
   current: Maplibre | null;
@@ -43,16 +43,6 @@ const handleStyleLayers = (layerConfig: OSMLayerSpecification, maplibreRef: Mapl
   });
 };
 
-const layerExistInMbSource = (layerConfig: OSMLayerSpecification, maplibreRef: MaplibreRef) => {
-  const layers = getCurrentStyleLayers(maplibreRef);
-  for (const layer in layers) {
-    if (layers[layer].id.includes(layerConfig.id)) {
-      return true;
-    }
-  }
-  return false;
-};
-
 const updateLayerConfig = (layerConfig: OSMLayerSpecification, maplibreRef: MaplibreRef) => {
   if (maplibreRef.current) {
     handleStyleLayers(layerConfig, maplibreRef);
@@ -108,7 +98,7 @@ export const OSMLayerFunctions = {
   ) => {
     // If layer already exist in maplibre source, update layer config
     // else add new layer.
-    if (layerExistInMbSource(layerConfig, maplibreRef)) {
+    if (layerExistInMbSource(layerConfig.id, maplibreRef)) {
       updateLayerConfig(layerConfig, maplibreRef);
     } else {
       addNewLayer(layerConfig, maplibreRef, beforeLayerId);
diff --git a/maps_dashboards/public/model/customLayerFunctions.ts b/maps_dashboards/public/model/customLayerFunctions.ts
index 77f10a79..24f7bc17 100644
--- a/maps_dashboards/public/model/customLayerFunctions.ts
+++ b/maps_dashboards/public/model/customLayerFunctions.ts
@@ -1,5 +1,6 @@
 import { Map as Maplibre, AttributionControl, RasterSourceSpecification } from 'maplibre-gl';
 import { CustomLayerSpecification, OSMLayerSpecification } from './mapLayerType';
+import { getMaplibreBeforeLayerId, layerExistInMbSource } from './layersFunctions';
 
 interface MaplibreRef {
   current: Maplibre | null;
@@ -9,16 +10,6 @@ const getCurrentStyleLayers = (maplibreRef: MaplibreRef) => {
   return maplibreRef.current?.getStyle().layers || [];
 };
 
-const layerExistInMbSource = (layerConfig: CustomLayerSpecification, maplibreRef: MaplibreRef) => {
-  const layers = getCurrentStyleLayers(maplibreRef);
-  for (const layer in layers) {
-    if (layers[layer].id.includes(layerConfig.id)) {
-      return true;
-    }
-  }
-  return false;
-};
-
 const updateLayerConfig = (layerConfig: CustomLayerSpecification, maplibreRef: MaplibreRef) => {
   const maplibreInstance = maplibreRef.current;
   if (maplibreInstance) {
@@ -71,13 +62,14 @@ const addNewLayer = (
       tileSize: 256,
       attribution: layerSource?.attribution,
     });
+    const beforeMbLayerId = getMaplibreBeforeLayerId(layerConfig, maplibreRef, beforeLayerId);
     maplibreInstance.addLayer(
       {
         id: layerConfig.id,
         type: 'raster',
         source: layerConfig.id,
       },
-      beforeLayerId
+      beforeMbLayerId
     );
   }
 };
@@ -99,7 +91,7 @@ export const CustomLayerFunctions = {
     layerConfig: CustomLayerSpecification,
     beforeLayerId: string | undefined
   ) => {
-    if (layerExistInMbSource(layerConfig, maplibreRef)) {
+    if (layerExistInMbSource(layerConfig.id, maplibreRef)) {
       updateLayerConfig(layerConfig, maplibreRef);
     } else {
       addNewLayer(layerConfig, maplibreRef, beforeLayerId);
diff --git a/maps_dashboards/public/model/documentLayerFunctions.ts b/maps_dashboards/public/model/documentLayerFunctions.ts
index 01bf6a2b..0bcd76a1 100644
--- a/maps_dashboards/public/model/documentLayerFunctions.ts
+++ b/maps_dashboards/public/model/documentLayerFunctions.ts
@@ -7,7 +7,7 @@ import { Map as Maplibre, Popup, MapGeoJSONFeature } from 'maplibre-gl';
 import { createPopup, getPopupLngLat } from '../components/tooltip/create_tooltip';
 import { DocumentLayerSpecification } from './mapLayerType';
 import { convertGeoPointToGeoJSON, isGeoJSON } from '../utils/geo_formater';
-import { getMaplibreBeforeLayerId } from './layersFunctions';
+import { getMaplibreBeforeLayerId, layerExistInMbSource } from './layersFunctions';
 
 interface MaplibreRef {
   current: Maplibre | null;
@@ -29,16 +29,6 @@ const GeoJSONMaplibreMap = new Map<string, string>([
   ['Polygon', 'fill'],
 ]);
 
-const layerExistInMbSource = (layerConfigId: string, maplibreRef: MaplibreRef) => {
-  const layers = getCurrentStyleLayers(maplibreRef);
-  for (const layer in layers) {
-    if (layers[layer].id.includes(layerConfigId)) {
-      return true;
-    }
-  }
-  return false;
-};
-
 const getFieldValue = (data: any, name: string) => {
   if (!name) {
     return null;
diff --git a/maps_dashboards/public/model/layersFunctions.ts b/maps_dashboards/public/model/layersFunctions.ts
index 01617404..68634816 100644
--- a/maps_dashboards/public/model/layersFunctions.ts
+++ b/maps_dashboards/public/model/layersFunctions.ts
@@ -83,6 +83,17 @@ export const getMaplibreBeforeLayerId = (
   }
   return undefined;
 };
+
+export const layerExistInMbSource = (layerConfigId: string, maplibreRef: MaplibreRef) => {
+  const layers = getCurrentStyleLayers(maplibreRef);
+  for (const layer in layers) {
+    if (layers[layer].id.includes(layerConfigId)) {
+      return true;
+    }
+  }
+  return false;
+};
+
 export const layersTypeIconMap: { [key: string]: string } = {
   [DASHBOARDS_MAPS_LAYER_TYPE.OPENSEARCH_MAP]: DASHBOARDS_MAPS_LAYER_ICON.OPENSEARCH_MAP,
   [DASHBOARDS_MAPS_LAYER_TYPE.DOCUMENTS]: DASHBOARDS_MAPS_LAYER_ICON.DOCUMENTS,