Support overriding maps config from OSD config yml file (#202)

(cherry picked from commit b180af9)

common/index.ts

@@ -23,9 +23,6 @@ export {
   PLUGIN_NAME,
 };
 
-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';
 export const MAP_DEFAULT_MIN_ZOOM = 0;
 export const MAP_DEFAULT_MAX_ZOOM = 22;
 export const MAP_REFERENCE_LAYER_DEFAULT_OPACITY = 100;

public/application.tsx

@@ -9,11 +9,16 @@ import { AppMountParameters } from '../../../src/core/public';
 import { MapServices } from './types';
 import { MapsDashboardsApp } from './components/app';
 import { OpenSearchDashboardsContextProvider } from '../../../src/plugins/opensearch_dashboards_react/public';
+import { ConfigSchema } from './config';
 
-export const renderApp = ({ element }: AppMountParameters, services: MapServices) => {
+export const renderApp = (
+  { element }: AppMountParameters,
+  services: MapServices,
+  mapConfig: ConfigSchema
+) => {
   ReactDOM.render(
     <OpenSearchDashboardsContextProvider services={services}>
-      <MapsDashboardsApp />
+      <MapsDashboardsApp mapConfig={mapConfig} />
     </OpenSearchDashboardsContextProvider>,
     element
   );

public/components/add_layer_panel/add_layer_panel.tsx

@@ -28,6 +28,7 @@ import {
   NEW_MAP_LAYER_DEFAULT_PREFIX,
 } from '../../../common';
 import { getLayerConfigMap } from '../../utils/getIntialConfig';
+import { ConfigSchema } from '../../config';
 
 interface Props {
   setIsLayerConfigVisible: Function;
@@ -36,6 +37,7 @@ interface Props {
   addLayer: Function;
   setIsNewLayer: Function;
   newLayerIndex: number;
+  mapConfig: ConfigSchema;
 }
 
 export const AddLayerPanel = ({
@@ -45,12 +47,13 @@ export const AddLayerPanel = ({
   addLayer,
   setIsNewLayer,
   newLayerIndex,
+  mapConfig,
 }: Props) => {
   const [isAddNewLayerModalVisible, setIsAddNewLayerModalVisible] = useState(false);
   const [highlightItem, setHighlightItem] = useState<Layer | null>(null);
 
   function onClickAddNewLayer(layerType: string) {
-    const initLayerConfig = getLayerConfigMap()[layerType];
+    const initLayerConfig = getLayerConfigMap(mapConfig)[layerType];
     initLayerConfig.name = NEW_MAP_LAYER_DEFAULT_PREFIX + ' ' + newLayerIndex;
     setSelectedLayerConfig(initLayerConfig);
     setIsAddNewLayerModalVisible(false);

public/components/app.tsx

@@ -11,8 +11,12 @@ import { MapPage } from './map_page';
 import { APP_PATH } from '../../common';
 import { useOpenSearchDashboards } from '../../../../src/plugins/opensearch_dashboards_react/public';
 import { MapServices } from '../types';
+import { ConfigSchema } from '../config';
 
-export const MapsDashboardsApp = () => {
+interface Props {
+  mapConfig: ConfigSchema;
+}
+export const MapsDashboardsApp = ({ mapConfig }: Props) => {
   const {
     services: { appBasePath },
   } = useOpenSearchDashboards<MapServices>();
@@ -22,7 +26,10 @@ export const MapsDashboardsApp = () => {
       <I18nProvider>
         <div>
           <Switch>
-            <Route path={[APP_PATH.CREATE_MAP, APP_PATH.EDIT_MAP]} render={() => <MapPage />} />
+            <Route
+              path={[APP_PATH.CREATE_MAP, APP_PATH.EDIT_MAP]}
+              render={() => <MapPage mapConfig={mapConfig} />}
+            />
             <Route exact path={APP_PATH.LANDING_PAGE_PATH} render={() => <MapsList />} />
           </Switch>
         </div>

public/components/layer_control_panel/layer_control_panel.tsx

@@ -47,6 +47,7 @@ import {
   handleReferenceLayerRender,
 } from '../../model/layerRenderController';
 import { MapState } from '../../model/mapState';
+import { ConfigSchema } from '../../config';
 
 interface MaplibreRef {
   current: Maplibre | null;
@@ -60,6 +61,7 @@ interface Props {
   setLayersIndexPatterns: (indexPatterns: IndexPattern[]) => void;
   mapState: MapState;
   zoom: number;
+  mapConfig: ConfigSchema;
 }
 
 export const LayerControlPanel = memo(
@@ -71,6 +73,7 @@ export const LayerControlPanel = memo(
     setLayersIndexPatterns,
     mapState,
     zoom,
+    mapConfig,
   }: Props) => {
     const { services } = useOpenSearchDashboards<MapServices>();
     const {
@@ -500,6 +503,7 @@ export const LayerControlPanel = memo(
                 addLayer={addLayer}
                 newLayerIndex={newLayerIndex()}
                 setIsNewLayer={setIsNewLayer}
+                mapConfig={mapConfig}
               />
               {deleteLayerModal}
             </EuiFlexGroup>

public/components/map_container/map_container.tsx

@@ -9,14 +9,15 @@ import { LngLat, Map as Maplibre, NavigationControl, Popup, MapEventType } from
 import { debounce } from 'lodash';
 import { LayerControlPanel } from '../layer_control_panel';
 import './map_container.scss';
-import { MAP_INITIAL_STATE, MAP_GLYPHS, DASHBOARDS_MAPS_LAYER_TYPE } from '../../../common';
+import { MAP_INITIAL_STATE, DASHBOARDS_MAPS_LAYER_TYPE } from '../../../common';
 import { MapLayerSpecification } from '../../model/mapLayerType';
 import { IndexPattern } from '../../../../../src/plugins/data/public';
 import { MapState } from '../../model/mapState';
 import { createPopup, getPopupLngLat, isTooltipEnabledLayer } from '../tooltip/create_tooltip';
 import { handleDataLayerRender } from '../../model/layerRenderController';
 import { useOpenSearchDashboards } from '../../../../../src/plugins/opensearch_dashboards_react/public';
 import { MapServices } from '../../types';
+import { ConfigSchema } from '../../config';
 
 interface MapContainerProps {
   setLayers: (layers: MapLayerSpecification[]) => void;
@@ -25,6 +26,7 @@ interface MapContainerProps {
   setLayersIndexPatterns: (indexPatterns: IndexPattern[]) => void;
   maplibreRef: React.MutableRefObject<Maplibre | null>;
   mapState: MapState;
+  mapConfig: ConfigSchema;
 }
 
 export const MapContainer = ({
@@ -34,6 +36,7 @@ export const MapContainer = ({
   setLayersIndexPatterns,
   maplibreRef,
   mapState,
+  mapConfig,
 }: MapContainerProps) => {
   const { services } = useOpenSearchDashboards<MapServices>();
   const mapContainer = useRef(null);
@@ -47,7 +50,7 @@ export const MapContainer = ({
       version: 8 as 8,
       sources: {},
       layers: [],
-      glyphs: MAP_GLYPHS,
+      glyphs: mapConfig.opensearchVectorTileGlyphsUrl,
     };
 
     maplibreRef.current = new Maplibre({
@@ -180,6 +183,7 @@ export const MapContainer = ({
             setLayersIndexPatterns={setLayersIndexPatterns}
             mapState={mapState}
             zoom={zoom}
+            mapConfig={mapConfig}
           />
         )}
       </div>

public/components/map_page/map_page.tsx

@@ -9,7 +9,6 @@ import { SimpleSavedObject } from 'opensearch-dashboards/public';
 import { Map as Maplibre } from 'maplibre-gl';
 import { MapContainer } from '../map_container';
 import { MapTopNavMenu } from '../map_top_nav';
-import { MapLayerSpecification } from '../../model/mapLayerType';
 import { MapServices } from '../../types';
 import { useOpenSearchDashboards } from '../../../../../src/plugins/opensearch_dashboards_react/public';
 import { MapSavedObjectAttributes } from '../../../common/map_saved_object_attributes';
@@ -21,8 +20,13 @@ import {
 import { getLayerConfigMap, getInitialMapState } from '../../utils/getIntialConfig';
 import { IndexPattern } from '../../../../../src/plugins/data/public';
 import { MapState } from '../../model/mapState';
+import { ConfigSchema } from '../../config';
 
-export const MapPage = () => {
+interface Props {
+  mapConfig: ConfigSchema;
+}
+
+export const MapPage = ({ mapConfig }: Props) => {
   const { services } = useOpenSearchDashboards<MapServices>();
   const {
     savedObjects: { client: savedObjectsClient },
@@ -54,7 +58,7 @@ export const MapPage = () => {
         setLayersIndexPatterns(savedIndexPatterns);
       });
     } else {
-      const initialDefaultLayer: MapLayerSpecification = getLayerConfigMap()[
+      const initialDefaultLayer: MapLayerSpecification = getLayerConfigMap(mapConfig)[
         OPENSEARCH_MAP_LAYER.type
       ];
       initialDefaultLayer.name = MAP_LAYER_DEFAULT_NAME;
@@ -80,6 +84,7 @@ export const MapPage = () => {
         setLayersIndexPatterns={setLayersIndexPatterns}
         maplibreRef={maplibreRef}
         mapState={mapState}
+        mapConfig={mapConfig}
       />
     </div>
   );

public/config.ts

@@ -0,0 +1,20 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { schema, TypeOf } from '@osd/config-schema';
+
+export const configSchema = schema.object({
+  opensearchVectorTileDataUrl: schema.string({
+    defaultValue: 'https://tiles.maps.opensearch.org/data/v1.json',
+  }),
+  opensearchVectorTileStyleUrl: schema.string({
+    defaultValue: 'https://tiles.maps.opensearch.org/styles/basic.json',
+  }),
+  opensearchVectorTileGlyphsUrl: schema.string({
+    defaultValue: 'https://tiles.maps.opensearch.org/fonts/{fontstack}/{range}.pbf',
+  }),
+});
+
+export type ConfigSchema = TypeOf<typeof configSchema>;

public/index.ts

@@ -4,12 +4,15 @@
  */
 
 import './index.scss';
+import { PluginInitializerContext } from '../../../src/core/server';
 
 import { CustomImportMapPlugin } from './plugin';
+import { ConfigSchema } from './config';
 
 // This exports static code and TypeScript types,
 // as well as, OpenSearch Dashboards Platform `plugin()` initializer.
-export function plugin() {
-  return new CustomImportMapPlugin();
+export function plugin(initializerContext: PluginInitializerContext<ConfigSchema>) {
+  // @ts-ignore
+  return new CustomImportMapPlugin(initializerContext);
 }
 export { CustomImportMapPluginSetup, CustomImportMapPluginStart } from './types';

public/plugin.tsx

@@ -2,7 +2,6 @@
  * Copyright OpenSearch Contributors
  * SPDX-License-Identifier: Apache-2.0
  */
-
 import { i18n } from '@osd/i18n';
 import React from 'react';
 import {
@@ -11,23 +10,38 @@ import {
   CoreStart,
   DEFAULT_APP_CATEGORIES,
   Plugin,
+  PluginInitializerContext,
 } from '../../../src/core/public';
 import {
   AppPluginStartDependencies,
-  MapServices, CustomImportMapPluginSetup, CustomImportMapPluginStart,
+  MapServices,
+  CustomImportMapPluginSetup,
+  CustomImportMapPluginStart,
 } from './types';
-import {PLUGIN_NAME, PLUGIN_NAVIGATION_BAR_ID, PLUGIN_NAVIGATION_BAR_TILE} from '../common/constants/shared';
+import {
+  PLUGIN_NAME,
+  PLUGIN_NAVIGATION_BAR_ID,
+  PLUGIN_NAVIGATION_BAR_TILE,
+} from '../common/constants/shared';
+import { ConfigSchema } from './config';
 
 import { AppPluginSetupDependencies } from './types';
 import { RegionMapVisualizationDependencies } from '../../../src/plugins/region_map/public';
 import { VectorUploadOptions } from './components/vector_upload_options';
 
 export class CustomImportMapPlugin
   implements Plugin<CustomImportMapPluginSetup, CustomImportMapPluginStart> {
+  readonly _initializerContext: PluginInitializerContext<ConfigSchema>;
+  constructor(initializerContext: PluginInitializerContext<ConfigSchema>) {
+    this._initializerContext = initializerContext;
+  }
   public setup(
     core: CoreSetup,
     { regionMap }: AppPluginSetupDependencies
   ): CustomImportMapPluginSetup {
+    const mapConfig: ConfigSchema = {
+      ...this._initializerContext.config.get<ConfigSchema>(),
+    };
     // Register an application into the side navigation menu
     core.application.register({
       id: PLUGIN_NAVIGATION_BAR_ID,
@@ -45,7 +59,7 @@ export class CustomImportMapPlugin
         const [coreStart, depsStart] = await core.getStartServices();
         const { navigation, data } = depsStart as AppPluginStartDependencies;
 
-        // make sure the index pattern list is up to date
+        // make sure the index pattern list is up-to-date
         data.indexPatterns.clearCache();
         // make sure a default index pattern exists
         // if not, the page will be redirected to management and maps won't be rendered
@@ -62,7 +76,7 @@ export class CustomImportMapPlugin
           data,
         };
         // Render the application
-        return renderApp(params, services);
+        return renderApp(params, services, mapConfig);
       },
     });
 

public/utils/getIntialConfig.ts

@@ -16,14 +16,13 @@ import {
   MAP_DEFAULT_MIN_ZOOM,
   MAP_LAYER_DEFAULT_BORDER_THICKNESS,
   MAP_REFERENCE_LAYER_DEFAULT_OPACITY,
-  MAP_VECTOR_TILE_BASIC_STYLE,
-  MAP_VECTOR_TILE_DATA_SOURCE,
   OPENSEARCH_MAP_LAYER,
   CUSTOM_MAP,
 } from '../../common';
 import { MapState } from '../model/mapState';
+import { ConfigSchema } from '../config';
 
-export const getLayerConfigMap = () => ({
+export const getLayerConfigMap = (mapConfig: ConfigSchema) => ({
   [OPENSEARCH_MAP_LAYER.type]: {
     name: '',
     description: '',
@@ -33,10 +32,10 @@ export const getLayerConfigMap = () => ({
     opacity: MAP_REFERENCE_LAYER_DEFAULT_OPACITY,
     visibility: LAYER_VISIBILITY.VISIBLE,
     source: {
-      dataURL: MAP_VECTOR_TILE_DATA_SOURCE,
+      dataURL: mapConfig.opensearchVectorTileDataUrl,
     },
     style: {
-      styleURL: MAP_VECTOR_TILE_BASIC_STYLE,
+      styleURL: mapConfig.opensearchVectorTileStyleUrl,
     },
   },
   [DOCUMENTS.type]: {

release-notes/opensearch-dashboards-maps.release-notes-2.5.0.0.md

@@ -23,3 +23,4 @@ Compatible with OpenSearch and OpenSearch Dashboards Version 2.5.0
 * Update basic layer settings ([#107](https://github.com/opensearch-project/dashboards-maps/pull/107))
 * Delete layer modal ([#139](https://github.com/opensearch-project/dashboards-maps/pull/139))
 * Add multi-layer support to map popup ([#140](https://github.com/opensearch-project/dashboards-maps/pull/140))
+* Support overriding maps config from OSD config yml file ([#202](https://github.com/opensearch-project/dashboards-maps/pull/202))

server/index.ts

@@ -3,9 +3,9 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { PluginInitializerContext } from '../../../src/core/server';
+import { PluginConfigDescriptor, PluginInitializerContext } from '../../../src/core/server';
 import { CustomImportMapPlugin } from './plugin';
-
+import { ConfigSchema, configSchema } from '../public/config';
 // This exports static code and TypeScript types,
 // as well as, OpenSearch Dashboards Platform `plugin()` initializer.
 
@@ -14,3 +14,12 @@ export function plugin(initializerContext: PluginInitializerContext) {
 }
 
 export { CustomImportMapPluginSetup, CustomImportMapPluginStart } from './types';
+
+export const config: PluginConfigDescriptor<ConfigSchema> = {
+  exposeToBrowser: {
+    opensearchVectorTileDataUrl: true,
+    opensearchVectorTileStyleUrl: true,
+    opensearchVectorTileGlyphsUrl: true,
+  },
+  schema: configSchema,
+};