add new layer functions for opensearch map layer

maps_dashboards/common/index.ts

@@ -6,7 +6,9 @@
 export const PLUGIN_ID = 'maps-dashboards';
 export const PLUGIN_NAME = 'Maps';
 
-export const MAP_VECTOR_TILE_URL = 'https://tiles.maps.opensearch.org/styles/basic.json';
+export const MAP_VECTOR_TILE_BASIC_STYLE = 'https://tiles.maps.opensearch.org/styles/basic.json';
+export const MAP_GLYPHS = 'https://tiles.maps.opensearch.org/fonts/{fontstack}/{range}.pbf';
+export const MAP_VECTOR_TILE_DATA_SOURCE = 'https://tiles.maps.opensearch.org/data/v1.json';
 
 // Starting position [lng, lat] and zoom
 export const MAP_INITIAL_STATE = {

maps_dashboards/package.json

@@ -8,6 +8,8 @@
     "osd": "node ../../scripts/osd"
   },
   "dependencies": {
-    "maplibre-gl": "^2.4.0"
+    "maplibre-gl": "^2.4.0",
+    "uuid": "3.3.2",
+    "prettier": "^2.1.1"
   }
 }

maps_dashboards/public/components/add_layer_panel/add_layer_panel.tsx

@@ -3,35 +3,44 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import React, { Fragment, useState } from 'react';
+import React, { useState } from 'react';
 import {
   EuiFlexGroup,
   EuiFlexItem,
   EuiModal,
   EuiModalBody,
   EuiModalHeader,
   EuiModalHeaderTitle,
-  EuiSpacer,
-  EuiTabbedContent,
+  EuiHorizontalRule,
   EuiTitle,
   EuiButton,
   EuiIcon,
   EuiKeyPadMenuItem,
 } from '@elastic/eui';
 import './add_layer_panel.scss';
-import { DASHBOARDS_MAPS_LAYER_TYPE } from '../../../common';
+import { v4 as uuidv4 } from 'uuid';
+import { DASHBOARDS_MAPS_LAYER_TYPE, LAYER_VISIBILITY } from '../../../common';
 
 interface Props {
   setIsLayerConfigVisible: Function;
   setSelectedLayerConfig: Function;
-  addNewLayerToList: Function;
 }
 
 export const AddLayerPanel = ({ setIsLayerConfigVisible, setSelectedLayerConfig }: Props) => {
   const [isAddNewLayerModalVisible, setIsAddNewLayerModalVisible] = useState(false);
 
   function onClickAddNewLayer(layerItem: string) {
-    // Will add new layer logic
+    if (layerItem === DASHBOARDS_MAPS_LAYER_TYPE.OPENSEARCH_MAP) {
+      setSelectedLayerConfig({
+        iconType: 'visMapRegion',
+        name: DASHBOARDS_MAPS_LAYER_TYPE.OPENSEARCH_MAP,
+        type: DASHBOARDS_MAPS_LAYER_TYPE.OPENSEARCH_MAP,
+        id: uuidv4(),
+        zoomRange: [0, 22],
+        opacity: 1,
+        visibility: LAYER_VISIBILITY.VISIBLE,
+      });
+    }
     setIsAddNewLayerModalVisible(false);
     setIsLayerConfigVisible(true);
   }
@@ -56,31 +65,6 @@ export const AddLayerPanel = ({ setIsLayerConfigVisible, setSelectedLayerConfig
   const closeModal = () => setIsAddNewLayerModalVisible(false);
   const showModal = () => setIsAddNewLayerModalVisible(true);
 
-  const tabs = [
-    {
-      id: 'select-layer-id',
-      name: 'Select layer',
-      content: (
-        <Fragment>
-          <EuiSpacer />
-          <EuiFlexGroup gutterSize="l">{availableLayers}</EuiFlexGroup>
-        </Fragment>
-      ),
-    },
-    {
-      id: 'import-id',
-      name: 'Import',
-      content: (
-        <Fragment>
-          <EuiSpacer />
-          <EuiTitle>
-            <h3>Import GeoJSON or JSON</h3>
-          </EuiTitle>
-        </Fragment>
-      ),
-    },
-  ];
-
   return (
     <div className="addLayer">
       <EuiFlexItem className="addLayer__button">
@@ -96,12 +80,11 @@ export const AddLayerPanel = ({ setIsLayerConfigVisible, setSelectedLayerConfig
             </EuiModalHeaderTitle>
           </EuiModalHeader>
           <EuiModalBody>
-            <EuiTabbedContent
-              tabs={tabs}
-              initialSelectedTab={tabs[0]}
-              autoFocus="selected"
-              aria-label="Add layer tabs"
-            />
+            <EuiHorizontalRule />
+            <EuiTitle size="s">
+              <h4>Reference layer</h4>
+            </EuiTitle>
+            <EuiFlexGroup gutterSize="l">{availableLayers}</EuiFlexGroup>
           </EuiModalBody>
         </EuiModal>
       )}

maps_dashboards/public/components/layer_config/layer_config_panel.tsx

@@ -23,7 +23,6 @@ interface Props {
   setIsLayerConfigVisible: Function;
   selectedLayerConfig: ILayerConfig;
   setSelectedLayerConfig: Function;
-  addNewLayerFunction: Function;
   updateLayer: Function;
 }
 
@@ -39,7 +38,6 @@ export const LayerConfigPanel = ({
   };
   const onUpdate = () => {
     updateLayer();
-    selectedLayerConfig.update?.();
     onClose();
   };
 

maps_dashboards/public/components/layer_control_panel/layer_control_panel.tsx

@@ -17,10 +17,16 @@ import {
 import { I18nProvider } from '@osd/i18n/react';
 import { Map as Maplibre } from 'maplibre-gl';
 import './layer_control_panel.scss';
+import { v4 as uuidv4 } from 'uuid';
 import { AddLayerPanel } from '../add_layer_panel';
 import { LayerConfigPanel } from '../layer_config';
 import { ILayerConfig } from '../../model/ILayerConfig';
-import { DASHBOARDS_MAPS_LAYER_TYPE, MAP_VECTOR_TILE_URL, LAYER_VISIBILITY } from '../../../common';
+import {
+  DASHBOARDS_MAPS_LAYER_TYPE,
+  LAYER_VISIBILITY,
+  MAP_VECTOR_TILE_BASIC_STYLE,
+} from '../../../common';
+import { layersFunctionMap } from '../../model/layersFunctions';
 
 interface MaplibreRef {
   current: Maplibre | null;
@@ -44,81 +50,45 @@ const LayerControlPanel = ({ maplibreRef }: Props) => {
     visibility: '',
   });
 
-  const [layers, setLayers] = useState<ILayerConfig[]>([
-    {
-      iconType: 'visMapRegion',
-      id: 'example_id_1',
-      type: DASHBOARDS_MAPS_LAYER_TYPE.OPENSEARCH_MAP,
-      name: 'Base Map Layer',
-      zoomRange: [0, 12],
-      opacity: 1,
-      visibility: LAYER_VISIBILITY.VISIBLE,
-      update() {
-        const maplibreInstance = maplibreRef.current;
-        if (maplibreInstance) {
-          const baseMapJson = maplibreInstance.getStyle().layers;
-          if (baseMapJson) {
-            baseMapJson.forEach((mbLayer) => {
-              maplibreInstance.setLayerZoomRange(mbLayer.id, this.zoomRange[0], this.zoomRange[1]);
-              // it will catch error when update opacity in symbol type layer, need figure out later
-              if (mbLayer.type === 'symbol') {
-                return;
-              }
-              maplibreInstance.setPaintProperty(
-                mbLayer.id,
-                `${mbLayer.type}-opacity`,
-                this.opacity
-              );
-              maplibreInstance.setLayoutProperty(mbLayer.id, 'visibility', this.visibility);
-            });
-          } else {
-            maplibreInstance.setStyle(MAP_VECTOR_TILE_URL);
-          }
-        }
-      },
-      hide() {
-        const maplibreInstance = maplibreRef.current;
-        if (maplibreInstance) {
-          const baseMapJson = maplibreInstance.getStyle().layers;
-          if (baseMapJson) {
-            baseMapJson.forEach((mbLayer) => {
-              maplibreInstance.setLayoutProperty(mbLayer.id, 'visibility', this.visibility);
-            });
-          }
-        }
-      },
-      remove() {
-        const maplibreInstance = maplibreRef.current;
-        if (maplibreInstance) {
-          const baseMapJson = maplibreInstance.getStyle().layers;
-          if (baseMapJson) {
-            baseMapJson.forEach((mbLayer) => {
-              maplibreInstance.removeLayer(mbLayer.id);
-            });
-          }
-        }
-      },
+  const initialLoadLayer: ILayerConfig = {
+    iconType: 'visMapRegion',
+    id: uuidv4(),
+    type: DASHBOARDS_MAPS_LAYER_TYPE.OPENSEARCH_MAP,
+    name: DASHBOARDS_MAPS_LAYER_TYPE.OPENSEARCH_MAP,
+    zoomRange: [0, 22],
+    opacity: 1,
+    visibility: LAYER_VISIBILITY.VISIBLE,
+    layerSpec: {
+      OSMUrl: MAP_VECTOR_TILE_BASIC_STYLE,
     },
-  ]);
+  };
+
+  const [layers, setLayers] = useState<ILayerConfig[]>([initialLoadLayer]);
 
   useEffect(() => {
-    layers.forEach((layer) => {
-      layer.update?.();
+    maplibreRef.current?.on('load', function () {
+      layers.forEach((layer) => {
+        layersFunctionMap[layer.type]?.initial(maplibreRef, layer);
+      });
     });
-  }, [layers]);
+  }, []);
 
-  const updateLayers = () => {
+  const updateLayer = () => {
     const layersClone = [...layers];
     const index = layersClone.findIndex((layer) => layer.id === selectedLayerConfig.id);
-    if (index > -1) {
+    if (index <= -1) {
+      layersClone.push(selectedLayerConfig);
+      layersFunctionMap[selectedLayerConfig.type]?.addNewLayer(maplibreRef, selectedLayerConfig);
+    } else {
       layersClone[index] = {
         ...layersClone[index],
         ...selectedLayerConfig,
       };
-    } else {
-      layersClone.push(selectedLayerConfig);
     }
     setLayers(layersClone);
+    setTimeout(function () {
+      layersFunctionMap[selectedLayerConfig.type]?.update(maplibreRef, selectedLayerConfig);
+    }, 50);
   };
 
   const removeLayer = (index: number) => {
@@ -188,15 +158,15 @@ const LayerControlPanel = ({ maplibreRef }: Props) => {
                     <EuiFlexGroup justifyContent="flexEnd" gutterSize="none">
                       <EuiFlexItem grow={false} className="layerControlPanel__layerFunctionButton">
                         <EuiButtonEmpty
-                          iconType="eyeClosed"
+                          iconType='eyeClosed'
                           size="s"
                           onClick={() => {
                             if (layer.visibility === LAYER_VISIBILITY.VISIBLE) {
                               layer.visibility = LAYER_VISIBILITY.NONE;
                             } else {
                               layer.visibility = LAYER_VISIBILITY.VISIBLE;
                             }
-                            layer.hide(index);
+                            layersFunctionMap[layer.type]?.hide(maplibreRef, layer);
                           }}
                           aria-label="Hide or show layer"
                           color="text"
@@ -208,7 +178,7 @@ const LayerControlPanel = ({ maplibreRef }: Props) => {
                           size="s"
                           iconType="trash"
                           onClick={() => {
-                            layer.remove(index);
+                            layersFunctionMap[layer.type]?.remove(maplibreRef, layer);
                             removeLayer(index);
                           }}
                           aria-label="Delete layer"
@@ -226,14 +196,13 @@ const LayerControlPanel = ({ maplibreRef }: Props) => {
               <LayerConfigPanel
                 setIsLayerConfigVisible={setIsLayerConfigVisible}
                 selectedLayerConfig={selectedLayerConfig}
-                updateLayer={updateLayers}
+                updateLayer={updateLayer}
                 setSelectedLayerConfig={setSelectedLayerConfig}
               />
             )}
             <AddLayerPanel
               setIsLayerConfigVisible={setIsLayerConfigVisible}
               setSelectedLayerConfig={setSelectedLayerConfig}
-              addNewLayerFunction={updateLayers}
             />
           </EuiFlexGroup>
         </EuiPanel>

maps_dashboards/public/components/map_container/map_container.scss

@@ -22,3 +22,10 @@
   left: $euiSizeS;
   top: $euiSizeS;
 }
+
+.zoombar {
+  z-index: 1;
+  position: absolute;
+  bottom: $euiSizeM;
+  right: $euiSizeS;
+}

maps_dashboards/public/components/map_container/map_container.tsx

@@ -3,36 +3,63 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import React, { useEffect, useRef } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
+import { EuiPanel } from '@elastic/eui';
 import { Map as Maplibre, NavigationControl } from 'maplibre-gl';
 import { LayerControlPanel } from '../layer_control_panel';
 import './map_container.scss';
-import { MAP_VECTOR_TILE_URL, MAP_INITIAL_STATE } from '../../../common/index';
+import { MAP_INITIAL_STATE, MAP_GLYPHS, MAP_VECTOR_TILE_DATA_SOURCE } from '../../../common';
 
 export const MapContainer = () => {
   const maplibreRef = useRef<Maplibre | null>(null);
   const mapContainer = useRef(null);
+  const [mounted, setMounted] = useState(false);
+  const [zoom, setZoom] = useState(MAP_INITIAL_STATE.zoom);
 
   useEffect(() => {
-    const mapStyle = MAP_VECTOR_TILE_URL;
-    const initialState = MAP_INITIAL_STATE;
+    const mbStyle = {
+      version: 8 as 8,
+      sources: {},
+      layers: [],
+      glyphs: MAP_GLYPHS,
+    };
 
-    const maplibre = new Maplibre({
+    maplibreRef.current = new Maplibre({
       // @ts-ignore
       container: mapContainer.current,
-      center: [initialState.lng, initialState.lat],
-      zoom: initialState.zoom,
+      center: [MAP_INITIAL_STATE.lng, MAP_INITIAL_STATE.lat],
+      zoom,
+      style: mbStyle,
     });
 
-    maplibre.setStyle(mapStyle);
-    maplibreRef.current = maplibre;
-    maplibre.addControl(new NavigationControl({ showCompass: false }), 'top-right');
+    maplibreRef.current.addControl(new NavigationControl({ showCompass: false }), 'top-right');
+    maplibreRef.current.on('style.load', function () {
+      // @ts-ignore
+      maplibreRef.current.addSource('openmaptiles', {
+        type: 'vector',
+        url: MAP_VECTOR_TILE_DATA_SOURCE,
+      });
+      setMounted(true);
+    });
   }, []);
 
+  useEffect(() => {
+    // @ts-ignore
+    maplibreRef.current.on('move', () => {
+      // @ts-ignore
+      return setZoom(maplibreRef.current.getZoom().toFixed(2));
+    });
+  }, [zoom]);
+
+  useEffect(() => {}, []);
+
   return (
     <div>
+      <EuiPanel hasShadow={false} hasBorder={false} color="transparent" className="zoombar">
+        <p> Zoom: {zoom} </p>
+      </EuiPanel>
       <div className="layerControlPanel-container">
-        <LayerControlPanel maplibreRef={maplibreRef} />
+        {mounted && <LayerControlPanel maplibreRef={maplibreRef} />}
       </div>
       <div className="map-container" ref={mapContainer} />
     </div>