Change font opacity along with OpenSearch base map layer

CHANGELOG.md

@@ -34,6 +34,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 * Update listener on KeyUp ([#364](https://github.com/opensearch-project/dashboards-maps/pull/364))
 * Update draw filter shape ui properties ([#372](https://github.com/opensearch-project/dashboards-maps/pull/372))
 * Add filter bar to display global geospatial filters ([#371](https://github.com/opensearch-project/dashboards-maps/pull/371))
+* Change font opacity along with OpenSearch base map layer ([#373](https://github.com/opensearch-project/dashboards-maps/pull/373))
 
 ### Bug Fixes
 * Fix property value undefined check ([#276](https://github.com/opensearch-project/dashboards-maps/pull/276))

public/model/OSMLayerFunctions.ts

@@ -1,6 +1,13 @@
 import { Map as Maplibre, LayerSpecification, SymbolLayerSpecification } from 'maplibre-gl';
 import { OSMLayerSpecification } from './mapLayerType';
-import { getLayers, hasLayer } from './map/layer_operations';
+import {
+  addOSMLayerSource,
+  addOSMStyleLayer,
+  getLayers,
+  hasLayer,
+  getOSMStyleLayerWithMapLayerId,
+  updateOSMStyleLayer,
+} from './map/layer_operations';
 import { getMapLanguage } from '../../common/util';
 
 interface MaplibreRef {
@@ -20,20 +27,7 @@ const fetchStyleLayers = (url: string) => {
 
 const handleStyleLayers = (layerConfig: OSMLayerSpecification, maplibreRef: MaplibreRef) => {
   getLayers(maplibreRef.current!, layerConfig.id).forEach((mbLayer) => {
-    maplibreRef.current?.setLayerZoomRange(
-      mbLayer.id,
-      layerConfig.zoomRange[0],
-      layerConfig.zoomRange[1]
-    );
-    // TODO: figure out error reason
-    if (mbLayer.type === 'symbol') {
-      return;
-    }
-    maplibreRef.current?.setPaintProperty(
-      mbLayer.id,
-      `${mbLayer.type}-opacity`,
-      layerConfig.opacity / 100
-    );
+    updateOSMStyleLayer(maplibreRef.current!, layerConfig, mbLayer);
   });
 };
 
@@ -54,35 +48,14 @@ const setLanguage = (maplibreRef: MaplibreRef, styleLayer: LayerSpecification) =
 
 const addNewLayer = (layerConfig: OSMLayerSpecification, maplibreRef: MaplibreRef) => {
   if (maplibreRef.current) {
-    const { source, style } = layerConfig;
-    maplibreRef.current.addSource(layerConfig.id, {
-      type: 'vector',
-      url: source?.dataURL,
-    });
+    const maplibre = maplibreRef.current;
+    const { id, source, style } = layerConfig;
+    addOSMLayerSource(maplibre, id, source.dataURL);
     fetchStyleLayers(style?.styleURL).then((styleLayers: LayerSpecification[]) => {
-      styleLayers.forEach((styleLayer) => {
-        styleLayer.id = styleLayer.id + '_' + layerConfig.id;
-        // TODO: Add comments on why we skip background type
-        if (styleLayer.type !== 'background') {
-          styleLayer.source = layerConfig.id;
-        }
-        maplibreRef.current?.addLayer(styleLayer);
+      styleLayers.forEach((layer) => {
+        const styleLayer = getOSMStyleLayerWithMapLayerId(id, layer);
+        addOSMStyleLayer(maplibre, layerConfig, styleLayer);
         setLanguage(maplibreRef, styleLayer);
-        maplibreRef.current?.setLayoutProperty(styleLayer.id, 'visibility', layerConfig.visibility);
-        maplibreRef.current?.setLayerZoomRange(
-          styleLayer.id,
-          layerConfig.zoomRange[0],
-          layerConfig.zoomRange[1]
-        );
-        // TODO: figure out error reason
-        if (styleLayer.type === 'symbol') {
-          return;
-        }
-        maplibreRef.current?.setPaintProperty(
-          styleLayer.id,
-          `${styleLayer.type}-opacity`,
-          layerConfig.opacity / 100
-        );
       });
     });
   }

public/model/map/layer_operations.test.ts

@@ -16,10 +16,14 @@ import {
   updateLayerVisibilityHandler,
   addSymbolLayer,
   updateSymbolLayer,
+  addOSMLayerSource,
+  addOSMStyleLayer,
+  getOSMStyleLayerWithMapLayerId,
 } from './layer_operations';
-import { Map as Maplibre } from 'maplibre-gl';
+import { LayerSpecification, Map as Maplibre } from 'maplibre-gl';
 import { MockMaplibreMap } from './__mocks__/map';
 import { MockLayer } from './__mocks__/layer';
+import { OSMLayerSpecification } from '../mapLayerType';
 
 describe('Circle layer', () => {
   it('add new circle layer', () => {
@@ -509,3 +513,66 @@ describe('update visibility', function () {
     );
   });
 });
+
+describe('OpenSearch base map', function () {
+  it('should add OpenSearch base map source', function () {
+    const mockMap: MockMaplibreMap = new MockMaplibreMap([]);
+    addOSMLayerSource(mockMap as unknown as Maplibre, 'source-1', 'foo.com');
+    expect(mockMap.getSource('source-1')).toBeDefined();
+  });
+
+  it('should add OpenSearch base map style layer', function () {
+    const mockMap: MockMaplibreMap = new MockMaplibreMap([]);
+    const mockMapLayer: OSMLayerSpecification = {
+      name: 'mock-layer-1',
+      type: 'opensearch_vector_tile_map',
+      id: 'layer-1-id',
+      description: 'layer-1-description',
+      zoomRange: [0, 10],
+      opacity: 80,
+      visibility: 'visible',
+      source: {
+        dataURL: 'foo.data.com',
+      },
+      style: {
+        styleURL: 'foo.style.com',
+      },
+    };
+    const mockStyleLayer = {
+      id: 'style-layer-1',
+      type: 'fill',
+      source: 'source-1',
+    } as unknown as LayerSpecification;
+
+    const mockSymbolStyleLayer = {
+      id: 'style-layer-2',
+      type: 'symbol',
+      source: 'source-1',
+    } as unknown as LayerSpecification;
+
+    addOSMStyleLayer(mockMap as unknown as Maplibre, mockMapLayer, mockStyleLayer);
+    expect(mockMap.getLayers().length).toBe(1);
+    expect(mockMap.getLayers()[0].getProperty('id')).toBe('style-layer-1');
+    expect(mockMap.getLayers()[0].getProperty('type')).toBe('fill');
+    expect(mockMap.getLayers()[0].getProperty('source')).toBe('source-1');
+    expect(mockMap.getLayers()[0].getProperty('visibility')).toBe('visible');
+    expect(mockMap.getLayers()[0].getProperty('minZoom')).toBe(0);
+    expect(mockMap.getLayers()[0].getProperty('maxZoom')).toBe(10);
+    expect(mockMap.getLayers()[0].getProperty('fill-opacity')).toBe(0.8);
+
+    addOSMStyleLayer(mockMap as unknown as Maplibre, mockMapLayer, mockSymbolStyleLayer);
+    expect(mockMap.getLayers().length).toBe(2);
+    expect(mockMap.getLayers()[1].getProperty('id')).toBe('style-layer-2');
+    expect(mockMap.getLayers()[1].getProperty('type')).toBe('symbol');
+    expect(mockMap.getLayers()[1].getProperty('text-opacity')).toBe(0.8);
+  });
+
+  it('should set OSM style layer source ID', function () {
+    const mockMapLayerId = 'layer-1-id';
+    const mockStyleLayer = {
+      id: 'style-layer-1',
+      type: 'fill',
+    } as LayerSpecification;
+    getOSMStyleLayerWithMapLayerId(mockMapLayerId, mockStyleLayer);
+  });
+});

public/model/map/layer_operations.ts

@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 import { LayerSpecification, Map as Maplibre } from 'maplibre-gl';
-import { DocumentLayerSpecification } from '../mapLayerType';
+import { DocumentLayerSpecification, OSMLayerSpecification } from '../mapLayerType';
 
 export const getLayers = (map: Maplibre, dashboardMapsLayerId?: string): LayerSpecification[] => {
   const layers: LayerSpecification[] = map.getStyle().layers;
@@ -277,3 +277,56 @@ export const updateSymbolLayer = (
   map.setPaintProperty(symbolLayerId, 'text-halo-color', specification.symbolBorderColor);
   return symbolLayerId;
 };
+
+// The function to add a new OSM layer to the map
+export const addOSMLayerSource = (map: Maplibre, sourceId: string, dataURL: string): void => {
+  map.addSource(sourceId, {
+    type: 'vector',
+    url: dataURL,
+  });
+};
+
+export const addOSMStyleLayer = (
+  map: Maplibre,
+  mapLayer: OSMLayerSpecification,
+  styleLayer: LayerSpecification
+) => {
+  map.addLayer(styleLayer);
+  return updateOSMStyleLayer(map, mapLayer, styleLayer);
+};
+
+export const updateOSMStyleLayer = (
+  map: Maplibre,
+  mapLayer: OSMLayerSpecification,
+  styleLayer: LayerSpecification
+) => {
+  const { zoomRange, visibility, opacity } = mapLayer;
+  const { id: styleLayerId, type: styleLayerType } = styleLayer;
+  map.setLayoutProperty(styleLayerId, 'visibility', visibility);
+  map.setLayerZoomRange(styleLayerId, zoomRange[0], zoomRange[1]);
+  if (styleLayerType === 'symbol') {
+    map.setPaintProperty(styleLayerId, 'text-opacity', opacity / 100);
+  } else {
+    map.setPaintProperty(styleLayerId, `${styleLayerType}-opacity`, opacity / 100);
+  }
+};
+
+export const getOSMStyleLayerWithMapLayerId = (
+  mapLayerId: string,
+  styleLayer: LayerSpecification
+): LayerSpecification => {
+  let updatedStyleLayerId = mapLayerId;
+  // non-background layer requires source
+  if (styleLayer.type !== 'background') {
+    updatedStyleLayerId = `${styleLayer.id}_${mapLayerId}`;
+    return {
+      ...styleLayer,
+      id: updatedStyleLayerId,
+      source: mapLayerId,
+    };
+  }
+  return {
+    ...styleLayer,
+    id: updatedStyleLayerId,
+  };
+};