[Backport 2.x] Refresh custom wms layer+source on update (issue 601)

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
+* Fixed broken wms custom layer update ([#601](https://github.com/opensearch-project/dashboards-maps/pull/631))
 * Add data source reference id in data layer search request ([#623](https://github.com/opensearch-project/dashboards-maps/pull/623))
 ### Infrastructure
 ### Documentation

public/model/customLayerFunctions.test.ts

@@ -92,34 +92,6 @@ describe('CustomLayerFunctions', () => {
     expect(map.addLayer).toHaveBeenCalledWith(expect.any(Object));
   });
 
-  it('should update an existing layer', () => {
-    const updatedLayerConfig: CustomLayerSpecification = {
-      id: 'existing-layer',
-      source: {
-        // @ts-ignore
-        type: DASHBOARDS_CUSTOM_MAPS_LAYER_TYPE.TMS,
-        tiles: ['https://updatedtiles.example.com/{z}/{x}/{y}.png'],
-        attribution: 'Updated Test Attribution',
-      },
-      opacity: 50,
-      zoomRange: [0, 15],
-      visibility: 'visible',
-    };
-
-    CustomLayerFunctions.render(maplibreRef, updatedLayerConfig);
-
-    expect(map.setPaintProperty).toHaveBeenCalledWith(
-      updatedLayerConfig.id,
-      'raster-opacity',
-      updatedLayerConfig.opacity / 100
-    );
-    expect(map.setLayerZoomRange).toHaveBeenCalledWith(
-      updatedLayerConfig.id,
-      updatedLayerConfig.zoomRange[0],
-      updatedLayerConfig.zoomRange[1]
-    );
-  });
-
   it('should convert zoomRange to a numeric array', () => {
     const layerConfig = {
       id: 'test-layer',

public/model/customLayerFunctions.ts

@@ -1,42 +1,13 @@
-import { AttributionControl, RasterSourceSpecification } from 'maplibre-gl';
 import { CustomLayerSpecification, OSMLayerSpecification } from './mapLayerType';
 import { hasLayer, removeLayers } from './map/layer_operations';
 import { MaplibreRef } from './layersFunctions';
 
-const updateLayerConfig = (layerConfig: CustomLayerSpecification, maplibreRef: MaplibreRef) => {
+const refreshLayer = (layerConfig: CustomLayerSpecification, maplibreRef: MaplibreRef) => {
   const maplibreInstance = maplibreRef.current;
   if (maplibreInstance) {
-    const customLauer = maplibreInstance.getLayer(layerConfig.id);
-    if (customLauer) {
-      maplibreInstance.setPaintProperty(
-        layerConfig.id,
-        'raster-opacity',
-        layerConfig.opacity / 100
-      );
-      maplibreInstance.setLayerZoomRange(
-        layerConfig.id,
-        layerConfig.zoomRange[0],
-        layerConfig.zoomRange[1]
-      );
-      const rasterLayerSource = maplibreInstance.getSource(
-        layerConfig.id
-      )! as RasterSourceSpecification;
-      if (rasterLayerSource.attribution !== layerConfig.source?.attribution) {
-        rasterLayerSource.attribution = layerConfig?.source?.attribution;
-        maplibreInstance._controls.forEach((control) => {
-          if (control instanceof AttributionControl) {
-            control._updateAttributions();
-          }
-        });
-      }
-      const tilesURL = getCustomMapURL(layerConfig);
-      if (rasterLayerSource.tiles![0] !== tilesURL) {
-        rasterLayerSource.tiles = [layerConfig?.source?.url];
-        maplibreInstance.style.sourceCaches[layerConfig.id].clearTiles();
-        maplibreInstance.style.sourceCaches[layerConfig.id].update(maplibreInstance.transform);
-        maplibreInstance.triggerRepaint();
-      }
-    }
+    maplibreInstance.removeLayer(layerConfig.id);
+    maplibreInstance.removeSource(layerConfig.id);
+    addNewLayer(layerConfig, maplibreRef);
   }
 };
 
@@ -89,7 +60,7 @@ export const applyZoomRangeToLayer = (layerConfig: CustomLayerSpecification) =>
 export const CustomLayerFunctions = {
   render: (maplibreRef: MaplibreRef, layerConfig: CustomLayerSpecification) => {
     return hasLayer(maplibreRef.current!, layerConfig.id)
-      ? updateLayerConfig(layerConfig, maplibreRef)
+      ? refreshLayer(layerConfig, maplibreRef)
       : addNewLayer(layerConfig, maplibreRef);
   },
   remove: (maplibreRef: MaplibreRef, layerConfig: OSMLayerSpecification) => {