From b2d5cd3d25435350648ac4453af4ab85a3ece2f3 Mon Sep 17 00:00:00 2001 From: Junqiu Lei Date: Wed, 28 Dec 2022 11:12:48 -0800 Subject: [PATCH 1/6] Support custom layer to Maps Signed-off-by: Junqiu Lei --- maps_dashboards/common/index.ts | 2 +- .../custom_map_config_panel.tsx | 47 +++++++ .../custom_map_config/custom_map_source.tsx | 119 ++++++++++++++++++ .../layer_config/layer_config_panel.tsx | 9 ++ .../layer_control_panel.tsx | 21 ++-- .../public/model/customLayerFunctions.ts | 115 +++++++++++++++++ .../public/model/layersFunctions.ts | 9 ++ maps_dashboards/public/model/mapLayerType.ts | 19 ++- .../public/utils/getIntialConfig.ts | 16 +-- 9 files changed, 335 insertions(+), 22 deletions(-) create mode 100644 maps_dashboards/public/components/layer_config/custom_map_config/custom_map_config_panel.tsx create mode 100644 maps_dashboards/public/components/layer_config/custom_map_config/custom_map_source.tsx create mode 100644 maps_dashboards/public/model/customLayerFunctions.ts diff --git a/maps_dashboards/common/index.ts b/maps_dashboards/common/index.ts index 616d07be..d023b54c 100644 --- a/maps_dashboards/common/index.ts +++ b/maps_dashboards/common/index.ts @@ -61,7 +61,7 @@ export enum DASHBOARDS_MAPS_LAYER_ICON { export enum DASHBOARDS_MAPS_LAYER_DESCRIPTION { OPENSEARCH_MAP = 'Default basemaps from OpenSearch', DOCUMENTS = 'View points, lines and polygons on map', - CUSTOM_MAP = 'Configure Maps to use WMS map server', + CUSTOM_MAP = 'Configure Maps to use a third-party raster tile source.', } export const DOCUMENTS = { diff --git a/maps_dashboards/public/components/layer_config/custom_map_config/custom_map_config_panel.tsx b/maps_dashboards/public/components/layer_config/custom_map_config/custom_map_config_panel.tsx new file mode 100644 index 00000000..5c6d1673 --- /dev/null +++ b/maps_dashboards/public/components/layer_config/custom_map_config/custom_map_config_panel.tsx @@ -0,0 +1,47 @@ +/* + * Copyright OpenSearch Contributors + * SPDX-License-Identifier: Apache-2.0 + */ + +import React, { Fragment } from 'react'; +import { EuiSpacer, EuiTabbedContent } from '@elastic/eui'; +import { CustomLayerSpecification } from '../../../model/mapLayerType'; +import { LayerBasicSettings } from '../layer_basic_settings'; +import { CustomMapSource } from './custom_map_source'; + +interface Props { + selectedLayerConfig: CustomLayerSpecification; + setSelectedLayerConfig: Function; + setIsUpdateDisabled: Function; + isLayerExists: Function; +} + +export const CustomMapConfigPanel = (props: Props) => { + const newProps = { + ...props, + }; + + const tabs = [ + { + id: 'custom-map-source--id', + name: 'Data', + content: ( + + + + + ), + }, + { + id: 'settings--id', + name: 'Settings', + content: ( + + + + + ), + }, + ]; + return ; +}; diff --git a/maps_dashboards/public/components/layer_config/custom_map_config/custom_map_source.tsx b/maps_dashboards/public/components/layer_config/custom_map_config/custom_map_source.tsx new file mode 100644 index 00000000..7d0fc3f6 --- /dev/null +++ b/maps_dashboards/public/components/layer_config/custom_map_config/custom_map_source.tsx @@ -0,0 +1,119 @@ +/* + * Copyright OpenSearch Contributors + * SPDX-License-Identifier: Apache-2.0 + */ + +import React, { useEffect, useState } from 'react'; +import { + EuiFlexItem, + EuiFormLabel, + EuiFlexGrid, + EuiSpacer, + EuiPanel, + EuiForm, + EuiFieldText, + EuiFormErrorText, +} from '@elastic/eui'; +import { FormattedMessage } from '@osd/i18n/react'; +import { CustomLayerSpecification } from '../../../model/mapLayerType'; + +interface Props { + selectedLayerConfig: CustomLayerSpecification; + setSelectedLayerConfig: Function; + setIsUpdateDisabled: Function; +} + +export const CustomMapSource = ({ + selectedLayerConfig, + setSelectedLayerConfig, + setIsUpdateDisabled, +}: Props) => { + const [customMapURL, setCustomMapURL] = useState(''); + const [customMapAttribution, setCustomMapAttribution] = useState(''); + + const onChangeCustomMapURL = (e: any) => { + setCustomMapURL(e.target.value); + setIsUpdateDisabled(false); + setSelectedLayerConfig({ + ...selectedLayerConfig, + source: { + ...selectedLayerConfig?.source, + url: e.target.value, + }, + }); + }; + + const onChangeCustomMapAttribution = (e: any) => { + setCustomMapAttribution(e.target.value); + setIsUpdateDisabled(false); + setSelectedLayerConfig({ + ...selectedLayerConfig, + source: { + ...selectedLayerConfig?.source, + attribution: e.target.value, + }, + }); + }; + + const isInvalidURL = (url: string): boolean => { + try { + new URL(url); + return false; + } catch (e) { + return true; + } + }; + + useEffect(() => { + setCustomMapURL(selectedLayerConfig.source.url); + }, [selectedLayerConfig.source.url]); + + useEffect(() => { + setCustomMapAttribution(selectedLayerConfig.source.attribution); + }, [selectedLayerConfig.source.attribution]); + + useEffect(() => { + const disableUpdate = isInvalidURL(customMapURL); + setIsUpdateDisabled(disableUpdate); + }, [customMapURL, setIsUpdateDisabled]); + + return ( +
+ + + + + Raster Tile URL + + + {isInvalidURL(customMapURL) && ( + + + + )} + + + Raster Tile Attribution + + + + + + + +
+ ); +}; diff --git a/maps_dashboards/public/components/layer_config/layer_config_panel.tsx b/maps_dashboards/public/components/layer_config/layer_config_panel.tsx index eee3bef1..e9a15d7f 100644 --- a/maps_dashboards/public/components/layer_config/layer_config_panel.tsx +++ b/maps_dashboards/public/components/layer_config/layer_config_panel.tsx @@ -29,6 +29,7 @@ import { DASHBOARDS_MAPS_LAYER_TYPE } from '../../../common'; import { DocumentLayerConfigPanel } from './documents_config/document_layer_config_panel'; import { layersTypeIconMap } from '../../model/layersFunctions'; import { IndexPattern } from '../../../../../src/plugins/data/public'; +import { CustomMapConfigPanel } from './custom_map_config/custom_map_config_panel'; interface Props { closeLayerConfigPanel: Function; @@ -128,6 +129,14 @@ export const LayerConfigPanel = ({ isLayerExists={isLayerExists} /> )} + {selectedLayerConfig.type === DASHBOARDS_MAPS_LAYER_TYPE.CUSTOM_MAP && ( + + )} diff --git a/maps_dashboards/public/components/layer_control_panel/layer_control_panel.tsx b/maps_dashboards/public/components/layer_control_panel/layer_control_panel.tsx index cd5a7ce6..fc7c0eec 100644 --- a/maps_dashboards/public/components/layer_control_panel/layer_control_panel.tsx +++ b/maps_dashboards/public/components/layer_control_panel/layer_control_panel.tsx @@ -33,7 +33,11 @@ import { LAYER_PANEL_SHOW_LAYER_ICON, LAYER_PANEL_HIDE_LAYER_ICON, } from '../../../common'; -import { LayerActions, layersFunctionMap } from '../../model/layersFunctions'; +import { + LayerActions, + layersFunctionMap, + referenceLayerTypeLookup, +} from '../../model/layersFunctions'; import { useOpenSearchDashboards } from '../../../../../src/plugins/opensearch_dashboards_react/public'; import { MapServices } from '../../types'; import { @@ -94,7 +98,10 @@ export const LayerControlPanel = memo( if (!selectedLayerConfig) { return; } - if (selectedLayerConfig.type === DASHBOARDS_MAPS_LAYER_TYPE.OPENSEARCH_MAP) { + if ( + selectedLayerConfig.type === DASHBOARDS_MAPS_LAYER_TYPE.OPENSEARCH_MAP || + selectedLayerConfig.type === DASHBOARDS_MAPS_LAYER_TYPE.CUSTOM_MAP + ) { handleReferenceLayerRender(selectedLayerConfig, maplibreRef, undefined); } else { updateIndexPatterns(); @@ -104,7 +111,7 @@ export const LayerControlPanel = memo( } else { layers.forEach((layer) => { const beforeLayerId = getMapBeforeLayerId(layer); - if (layer.type === DASHBOARDS_MAPS_LAYER_TYPE.OPENSEARCH_MAP) { + if (referenceLayerTypeLookup[layer.type]) { handleReferenceLayerRender(layer, maplibreRef, beforeLayerId); } else { handleDataLayerRender(layer, mapState, services, maplibreRef, beforeLayerId); @@ -227,10 +234,10 @@ export const LayerControlPanel = memo( if (!selectedLayerConfig) { return; } - if (selectedLayerConfig.type === DASHBOARDS_MAPS_LAYER_TYPE.OPENSEARCH_MAP) { - return; - } - if (!selectedLayerConfig.source.indexPatternId) { + if ( + selectedLayerConfig.type === DASHBOARDS_MAPS_LAYER_TYPE.OPENSEARCH_MAP || + selectedLayerConfig.type === DASHBOARDS_MAPS_LAYER_TYPE.CUSTOM_MAP + ) { return; } const findIndexPattern = layersIndexPatterns.find( diff --git a/maps_dashboards/public/model/customLayerFunctions.ts b/maps_dashboards/public/model/customLayerFunctions.ts new file mode 100644 index 00000000..dbfd60fc --- /dev/null +++ b/maps_dashboards/public/model/customLayerFunctions.ts @@ -0,0 +1,115 @@ +import { + Map as Maplibre, + AttributionControl, + RasterSourceSpecification, +} from 'maplibre-gl'; +import { CustomLayerSpecification, OSMLayerSpecification } from './mapLayerType'; + +interface MaplibreRef { + current: Maplibre | null; +} + +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) { + 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(); + } + }); + } + if (rasterLayerSource.tiles![0] !== layerConfig.source?.url) { + rasterLayerSource.tiles = [layerConfig?.source?.url]; + maplibreInstance.style.sourceCaches[layerConfig.id].clearTiles(); + maplibreInstance.style.sourceCaches[layerConfig.id].update(maplibreInstance.transform); + maplibreInstance.triggerRepaint(); + } + } + } +}; + +const addNewLayer = ( + layerConfig: CustomLayerSpecification, + maplibreRef: MaplibreRef, + beforeLayerId: string | undefined +) => { + const maplibreInstance = maplibreRef.current; + if (maplibreInstance) { + const layerSource = layerConfig?.source; + maplibreInstance.addSource(layerConfig.id, { + type: 'raster', + tiles: [layerSource?.url], + tileSize: 256, + attribution: layerSource?.attribution, + }); + maplibreInstance.addLayer( + { + id: layerConfig.id, + type: 'raster', + source: layerConfig.id, + }, + beforeLayerId + ); + } +}; + +export const CustomLayerFunctions = { + render: ( + maplibreRef: MaplibreRef, + layerConfig: CustomLayerSpecification, + beforeLayerId: string | undefined + ) => { + if (layerExistInMbSource(layerConfig, maplibreRef)) { + updateLayerConfig(layerConfig, maplibreRef); + } else { + addNewLayer(layerConfig, maplibreRef, beforeLayerId); + } + }, + remove: (maplibreRef: MaplibreRef, layerConfig: OSMLayerSpecification) => { + const layers = getCurrentStyleLayers(maplibreRef); + layers.forEach((mbLayer: { id: any }) => { + if (mbLayer.id.includes(layerConfig.id)) { + maplibreRef.current?.removeLayer(mbLayer.id); + } + }); + }, + hide: (maplibreRef: MaplibreRef, layerConfig: OSMLayerSpecification) => { + const layers = getCurrentStyleLayers(maplibreRef); + layers.forEach((mbLayer: { id: any }) => { + if (mbLayer.id.includes(layerConfig.id)) { + maplibreRef.current?.setLayoutProperty(mbLayer.id, 'visibility', layerConfig.visibility); + } + }); + }, +}; diff --git a/maps_dashboards/public/model/layersFunctions.ts b/maps_dashboards/public/model/layersFunctions.ts index 24355ae4..a4311b6a 100644 --- a/maps_dashboards/public/model/layersFunctions.ts +++ b/maps_dashboards/public/model/layersFunctions.ts @@ -12,6 +12,7 @@ import { import { OSMLayerFunctions } from './OSMLayerFunctions'; import { DocumentLayerFunctions } from './documentLayerFunctions'; import { MapLayerSpecification } from './mapLayerType'; +import { CustomLayerFunctions } from './customLayerFunctions'; interface MaplibreRef { current: Maplibre | null; @@ -55,11 +56,13 @@ export const LayerActions = { export const layersFunctionMap: { [key: string]: any } = { [DASHBOARDS_MAPS_LAYER_TYPE.OPENSEARCH_MAP]: OSMLayerFunctions, [DASHBOARDS_MAPS_LAYER_TYPE.DOCUMENTS]: DocumentLayerFunctions, + [DASHBOARDS_MAPS_LAYER_TYPE.CUSTOM_MAP]: CustomLayerFunctions, }; export const layersTypeNameMap: { [key: string]: string } = { [DASHBOARDS_MAPS_LAYER_TYPE.OPENSEARCH_MAP]: DASHBOARDS_MAPS_LAYER_NAME.OPENSEARCH_MAP, [DASHBOARDS_MAPS_LAYER_TYPE.DOCUMENTS]: DASHBOARDS_MAPS_LAYER_NAME.DOCUMENTS, + [DASHBOARDS_MAPS_LAYER_TYPE.CUSTOM_MAP]: DASHBOARDS_MAPS_LAYER_NAME.CUSTOM_MAP, }; const getCurrentStyleLayers = (maplibreRef: MaplibreRef) => { @@ -84,3 +87,9 @@ 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, }; + +export const referenceLayerTypeLookup = { + [DASHBOARDS_MAPS_LAYER_TYPE.OPENSEARCH_MAP]: true, + [DASHBOARDS_MAPS_LAYER_TYPE.CUSTOM_MAP]: true, + [DASHBOARDS_MAPS_LAYER_TYPE.DOCUMENTS]: false, +}; diff --git a/maps_dashboards/public/model/mapLayerType.ts b/maps_dashboards/public/model/mapLayerType.ts index ec0e4de1..8484b26a 100644 --- a/maps_dashboards/public/model/mapLayerType.ts +++ b/maps_dashboards/public/model/mapLayerType.ts @@ -6,7 +6,10 @@ import { Filter } from '../../../../src/plugins/data/public'; /* eslint @typescript-eslint/consistent-type-definitions: ["error", "type"] */ -export type MapLayerSpecification = OSMLayerSpecification | DocumentLayerSpecification; +export type MapLayerSpecification = + | OSMLayerSpecification + | DocumentLayerSpecification + | CustomLayerSpecification; export type OSMLayerSpecification = { name: string; @@ -49,3 +52,17 @@ export type DocumentLayerSpecification = { markerSize: number; }; }; + +export type CustomLayerSpecification = { + name: string; + id: string; + type: 'custom_map'; + description: string; + zoomRange: number[]; + opacity: number; + visibility: string; + source: { + url: string; + attribution: string; + }; +}; diff --git a/maps_dashboards/public/utils/getIntialConfig.ts b/maps_dashboards/public/utils/getIntialConfig.ts index 114e20c9..919a6399 100644 --- a/maps_dashboards/public/utils/getIntialConfig.ts +++ b/maps_dashboards/public/utils/getIntialConfig.ts @@ -61,27 +61,17 @@ export const getLayerConfigMap = () => ({ markerSize: DOCUMENTS_DEFAULT_MARKER_SIZE, }, }, - //TODO: update custom layer config [CUSTOM_MAP.type]: { name: '', description: '', type: CUSTOM_MAP.type, id: uuidv4(), zoomRange: [MAP_DEFAULT_MIN_ZOOM, MAP_DEFAULT_MAX_ZOOM], - opacity: MAP_DATA_LAYER_DEFAULT_OPACITY, + opacity: MAP_REFERENCE_LAYER_DEFAULT_OPACITY, visibility: LAYER_VISIBILITY.VISIBLE, source: { - indexPatternRefName: undefined, - geoFieldType: undefined, - geoFieldName: undefined, - documentRequestNumber: DOCUMENTS_DEFAULT_REQUEST_NUMBER, - tooltipFields: DOCUMENTS_DEFAULT_TOOLTIPS, - showTooltips: DOCUMENTS_DEFAULT_SHOW_TOOLTIPS, - }, - style: { - ...getStyleColor(), - borderThickness: MAP_LAYER_DEFAULT_BORDER_THICKNESS, - markerSize: DOCUMENTS_DEFAULT_MARKER_SIZE, + url: '', + attribution: '', }, }, }); From 3e349deb405b3498f07eec5cfa0ab91765d2d5e7 Mon Sep 17 00:00:00 2001 From: Junqiu Lei Date: Fri, 30 Dec 2022 15:12:00 -0800 Subject: [PATCH 2/6] Add WMS protocol to custom layer Signed-off-by: Junqiu Lei --- maps_dashboards/common/index.ts | 2 +- .../custom_map_config/custom_map_source.tsx | 190 +++++++++++++++--- .../layer_control_panel.tsx | 7 +- .../public/model/customLayerFunctions.ts | 23 ++- .../public/model/layersFunctions.ts | 1 + maps_dashboards/public/model/mapLayerType.ts | 24 ++- .../public/utils/getIntialConfig.ts | 1 + 7 files changed, 210 insertions(+), 38 deletions(-) diff --git a/maps_dashboards/common/index.ts b/maps_dashboards/common/index.ts index d023b54c..c6c7daeb 100644 --- a/maps_dashboards/common/index.ts +++ b/maps_dashboards/common/index.ts @@ -61,7 +61,7 @@ export enum DASHBOARDS_MAPS_LAYER_ICON { export enum DASHBOARDS_MAPS_LAYER_DESCRIPTION { OPENSEARCH_MAP = 'Default basemaps from OpenSearch', DOCUMENTS = 'View points, lines and polygons on map', - CUSTOM_MAP = 'Configure Maps to use a third-party raster tile source.', + CUSTOM_MAP = 'Configure Maps to use custom map source', } export const DOCUMENTS = { diff --git a/maps_dashboards/public/components/layer_config/custom_map_config/custom_map_source.tsx b/maps_dashboards/public/components/layer_config/custom_map_config/custom_map_source.tsx index 7d0fc3f6..68bc21fa 100644 --- a/maps_dashboards/public/components/layer_config/custom_map_config/custom_map_source.tsx +++ b/maps_dashboards/public/components/layer_config/custom_map_config/custom_map_source.tsx @@ -13,6 +13,7 @@ import { EuiForm, EuiFieldText, EuiFormErrorText, + EuiSelect, } from '@elastic/eui'; import { FormattedMessage } from '@osd/i18n/react'; import { CustomLayerSpecification } from '../../../model/mapLayerType'; @@ -28,8 +29,18 @@ export const CustomMapSource = ({ setSelectedLayerConfig, setIsUpdateDisabled, }: Props) => { + const customMapProtocolOptions = [ + { value: 'tms', text: 'TMS' }, + { value: 'wms', text: 'WMS' }, + ]; + const [customMapURL, setCustomMapURL] = useState(''); const [customMapAttribution, setCustomMapAttribution] = useState(''); + const [protocol, setProtocol] = useState(customMapProtocolOptions[0].value); + const [WMSLayers, setWMSLayers] = useState(''); + const [WMSVersion, setWMSVersion] = useState(''); + const [WMSFormat, setWMSFormat] = useState(''); + const [WMSStyles, setWMSStyles] = useState(''); const onChangeCustomMapURL = (e: any) => { setCustomMapURL(e.target.value); @@ -55,6 +66,61 @@ export const CustomMapSource = ({ }); }; + const onChangeProtocol = (e: any) => { + setProtocol(e.target.value); + setSelectedLayerConfig({ + ...selectedLayerConfig, + source: { + ...selectedLayerConfig?.source, + protocol: e.target.value, + }, + }); + }; + + const onChangeWMSLayers = (e: any) => { + setWMSLayers(e.target.value); + setSelectedLayerConfig({ + ...selectedLayerConfig, + source: { + ...selectedLayerConfig?.source, + layers: e.target.value, + }, + }); + }; + + const onChangeWMSVersion = (e: any) => { + setWMSVersion(e.target.value); + setSelectedLayerConfig({ + ...selectedLayerConfig, + source: { + ...selectedLayerConfig?.source, + version: e.target.value, + }, + }); + }; + + const onChangeWMSFormat = (e: any) => { + setWMSFormat(e.target.value); + setSelectedLayerConfig({ + ...selectedLayerConfig, + source: { + ...selectedLayerConfig?.source, + format: e.target.value, + }, + }); + }; + + const onChangeWMSStyles = (e: any) => { + setWMSStyles(e.target.value); + setSelectedLayerConfig({ + ...selectedLayerConfig, + source: { + ...selectedLayerConfig?.source, + styles: e.target.value, + }, + }); + }; + const isInvalidURL = (url: string): boolean => { try { new URL(url); @@ -66,7 +132,15 @@ export const CustomMapSource = ({ useEffect(() => { setCustomMapURL(selectedLayerConfig.source.url); - }, [selectedLayerConfig.source.url]); + setProtocol(selectedLayerConfig.source.protocol); + setCustomMapAttribution(selectedLayerConfig.source.attribution); + if (selectedLayerConfig.source.protocol === 'wms') { + setWMSLayers(selectedLayerConfig.source.layers); + setWMSVersion(selectedLayerConfig.source.version); + setWMSFormat(selectedLayerConfig.source.format); + setWMSStyles(selectedLayerConfig.source.styles); + } + }, [selectedLayerConfig]); useEffect(() => { setCustomMapAttribution(selectedLayerConfig.source.attribution); @@ -83,33 +157,99 @@ export const CustomMapSource = ({ - Raster Tile URL + Protocol - - {isInvalidURL(customMapURL) && ( - - - - )} - - - Raster Tile Attribution - - + {selectedLayerConfig.source.protocol === 'tms' && ( + <> + + TMS URL + + + {isInvalidURL(customMapURL) && ( + + + + )} + + + TMS attribution + + + + + )} + {selectedLayerConfig.source.protocol === 'wms' && ( + <> + + WMS URL + + + {isInvalidURL(customMapURL) && ( + + + + )} + + + WMS layers + + + + + WMS version + + + + + WMS format + + + + + WMS attribution + + + + + WMS styles + + + + + )} diff --git a/maps_dashboards/public/components/layer_control_panel/layer_control_panel.tsx b/maps_dashboards/public/components/layer_control_panel/layer_control_panel.tsx index fc7c0eec..14a7d9f2 100644 --- a/maps_dashboards/public/components/layer_control_panel/layer_control_panel.tsx +++ b/maps_dashboards/public/components/layer_control_panel/layer_control_panel.tsx @@ -234,16 +234,15 @@ export const LayerControlPanel = memo( if (!selectedLayerConfig) { return; } - if ( - selectedLayerConfig.type === DASHBOARDS_MAPS_LAYER_TYPE.OPENSEARCH_MAP || - selectedLayerConfig.type === DASHBOARDS_MAPS_LAYER_TYPE.CUSTOM_MAP - ) { + if (referenceLayerTypeLookup[selectedLayerConfig.type]) { return; } const findIndexPattern = layersIndexPatterns.find( + // @ts-ignore (indexPattern) => indexPattern.id === selectedLayerConfig.source.indexPatternId ); if (!findIndexPattern) { + // @ts-ignore const newIndexPattern = await indexPatterns.get(selectedLayerConfig.source.indexPatternId); const cloneLayersIndexPatterns = [...layersIndexPatterns, newIndexPattern]; setLayersIndexPatterns(cloneLayersIndexPatterns); diff --git a/maps_dashboards/public/model/customLayerFunctions.ts b/maps_dashboards/public/model/customLayerFunctions.ts index dbfd60fc..77f10a79 100644 --- a/maps_dashboards/public/model/customLayerFunctions.ts +++ b/maps_dashboards/public/model/customLayerFunctions.ts @@ -1,8 +1,4 @@ -import { - Map as Maplibre, - AttributionControl, - RasterSourceSpecification, -} from 'maplibre-gl'; +import { Map as Maplibre, AttributionControl, RasterSourceSpecification } from 'maplibre-gl'; import { CustomLayerSpecification, OSMLayerSpecification } from './mapLayerType'; interface MaplibreRef { @@ -49,7 +45,8 @@ const updateLayerConfig = (layerConfig: CustomLayerSpecification, maplibreRef: M } }); } - if (rasterLayerSource.tiles![0] !== layerConfig.source?.url) { + 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); @@ -66,10 +63,11 @@ const addNewLayer = ( ) => { const maplibreInstance = maplibreRef.current; if (maplibreInstance) { + const tilesURL = getCustomMapURL(layerConfig); const layerSource = layerConfig?.source; maplibreInstance.addSource(layerConfig.id, { type: 'raster', - tiles: [layerSource?.url], + tiles: [tilesURL], tileSize: 256, attribution: layerSource?.attribution, }); @@ -84,6 +82,17 @@ const addNewLayer = ( } }; +const getCustomMapURL = (layerConfig: CustomLayerSpecification) => { + const layerSource = layerConfig?.source; + if (layerSource?.protocol === 'tms') { + return layerSource?.url; + } else if (layerSource?.protocol === 'wms') { + return `${layerSource?.url}?service=WMS&version=${layerSource.version}&request=GetMap&format=${layerSource.format}&transparent=true&layers=${layerSource?.layers}&styles=${layerSource.styles}&SRS=EPSG%3A3857&WIDTH=256&HEIGHT=256&BBOX={bbox-epsg-3857}`; + } else { + return ''; + } +}; + export const CustomLayerFunctions = { render: ( maplibreRef: MaplibreRef, diff --git a/maps_dashboards/public/model/layersFunctions.ts b/maps_dashboards/public/model/layersFunctions.ts index a4311b6a..01617404 100644 --- a/maps_dashboards/public/model/layersFunctions.ts +++ b/maps_dashboards/public/model/layersFunctions.ts @@ -86,6 +86,7 @@ export const getMaplibreBeforeLayerId = ( 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, + [DASHBOARDS_MAPS_LAYER_TYPE.CUSTOM_MAP]: DASHBOARDS_MAPS_LAYER_ICON.CUSTOM_MAP, }; export const referenceLayerTypeLookup = { diff --git a/maps_dashboards/public/model/mapLayerType.ts b/maps_dashboards/public/model/mapLayerType.ts index 8484b26a..f44b141b 100644 --- a/maps_dashboards/public/model/mapLayerType.ts +++ b/maps_dashboards/public/model/mapLayerType.ts @@ -53,7 +53,24 @@ export type DocumentLayerSpecification = { }; }; -export type CustomLayerSpecification = { +export type CustomLayerSpecification = CustomTMSLayerSpecification | CustomWMSLayerSpecification; + +export type CustomTMSLayerSpecification = { + name: string; + id: string; + type: 'custom_map'; + description: string; + zoomRange: number[]; + opacity: number; + visibility: string; + source: { + url: string; + protocol: 'tms'; + attribution: string; + }; +}; + +export type CustomWMSLayerSpecification = { name: string; id: string; type: 'custom_map'; @@ -63,6 +80,11 @@ export type CustomLayerSpecification = { visibility: string; source: { url: string; + protocol: 'wms'; attribution: string; + layers: string; + styles: string; + version: string; + format: string; }; }; diff --git a/maps_dashboards/public/utils/getIntialConfig.ts b/maps_dashboards/public/utils/getIntialConfig.ts index 919a6399..7e073834 100644 --- a/maps_dashboards/public/utils/getIntialConfig.ts +++ b/maps_dashboards/public/utils/getIntialConfig.ts @@ -71,6 +71,7 @@ export const getLayerConfigMap = () => ({ visibility: LAYER_VISIBILITY.VISIBLE, source: { url: '', + protocol: 'tms', attribution: '', }, }, From d286a0d1611e4048b643929af0397e1e1446c336 Mon Sep 17 00:00:00 2001 From: Junqiu Lei Date: Fri, 30 Dec 2022 16:15:34 -0800 Subject: [PATCH 3/6] Update beforeMbLayerId to addLayer Signed-off-by: Junqiu Lei --- .../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 c2207d24..c39dce4c 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([ ['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, From 5efc7fb57753262d51907eb5e51b1e4880052122 Mon Sep 17 00:00:00 2001 From: Junqiu Lei Date: Fri, 30 Dec 2022 18:21:31 -0800 Subject: [PATCH 4/6] Update WMS Signed-off-by: Junqiu Lei --- .../custom_map_config/custom_map_source.tsx | 65 ++++++++++++++++--- .../public/model/customLayerFunctions.ts | 3 +- maps_dashboards/public/model/mapLayerType.ts | 2 + .../public/utils/getIntialConfig.ts | 8 ++- 4 files changed, 68 insertions(+), 10 deletions(-) diff --git a/maps_dashboards/public/components/layer_config/custom_map_config/custom_map_source.tsx b/maps_dashboards/public/components/layer_config/custom_map_config/custom_map_source.tsx index 68bc21fa..e7f89808 100644 --- a/maps_dashboards/public/components/layer_config/custom_map_config/custom_map_source.tsx +++ b/maps_dashboards/public/components/layer_config/custom_map_config/custom_map_source.tsx @@ -30,21 +30,23 @@ export const CustomMapSource = ({ setIsUpdateDisabled, }: Props) => { const customMapProtocolOptions = [ - { value: 'tms', text: 'TMS' }, - { value: 'wms', text: 'WMS' }, + { value: 'tms', text: 'Tile Map Service (TMS)' }, + { value: 'wms', text: 'Web Map Service (WMS)' }, ]; const [customMapURL, setCustomMapURL] = useState(''); const [customMapAttribution, setCustomMapAttribution] = useState(''); - const [protocol, setProtocol] = useState(customMapProtocolOptions[0].value); + const [protocol, setProtocol] = useState(customMapProtocolOptions[1].value); const [WMSLayers, setWMSLayers] = useState(''); const [WMSVersion, setWMSVersion] = useState(''); const [WMSFormat, setWMSFormat] = useState(''); const [WMSStyles, setWMSStyles] = useState(''); + // CRS: Coordinate reference systems in WMS + const [WMSCRS, setWMSCRS] = useState(''); + const [WMSBbox, setWMSBbox] = useState(''); const onChangeCustomMapURL = (e: any) => { setCustomMapURL(e.target.value); - setIsUpdateDisabled(false); setSelectedLayerConfig({ ...selectedLayerConfig, source: { @@ -56,7 +58,6 @@ export const CustomMapSource = ({ const onChangeCustomMapAttribution = (e: any) => { setCustomMapAttribution(e.target.value); - setIsUpdateDisabled(false); setSelectedLayerConfig({ ...selectedLayerConfig, source: { @@ -121,7 +122,30 @@ export const CustomMapSource = ({ }); }; + const onChangeWMSCRS = (e: any) => { + setWMSCRS(e.target.value); + setSelectedLayerConfig({ + ...selectedLayerConfig, + source: { + ...selectedLayerConfig?.source, + crs: e.target.value, + }, + }); + }; + + const onChangeWMSBbox = (e: any) => { + setWMSBbox(e.target.value); + setSelectedLayerConfig({ + ...selectedLayerConfig, + source: { + ...selectedLayerConfig?.source, + bbox: e.target.value, + }, + }); + }; + const isInvalidURL = (url: string): boolean => { + if (url === '') return false; try { new URL(url); return false; @@ -139,6 +163,8 @@ export const CustomMapSource = ({ setWMSVersion(selectedLayerConfig.source.version); setWMSFormat(selectedLayerConfig.source.format); setWMSStyles(selectedLayerConfig.source.styles); + setWMSCRS(selectedLayerConfig.source.crs); + setWMSBbox(selectedLayerConfig.source.bbox); } }, [selectedLayerConfig]); @@ -147,9 +173,22 @@ export const CustomMapSource = ({ }, [selectedLayerConfig.source.attribution]); useEffect(() => { - const disableUpdate = isInvalidURL(customMapURL); - setIsUpdateDisabled(disableUpdate); - }, [customMapURL, setIsUpdateDisabled]); + if (protocol === 'wms') { + setIsUpdateDisabled(isInvalidURL(customMapURL) || WMSLayers === '' || WMSVersion === ''); + } else { + setIsUpdateDisabled(isInvalidURL(customMapURL)); + } + }, [ + WMSBbox, + WMSCRS, + WMSFormat, + WMSLayers, + WMSStyles, + WMSVersion, + customMapURL, + protocol, + setIsUpdateDisabled, + ]); return (
@@ -234,6 +273,16 @@ export const CustomMapSource = ({ + + WMS CRS + + + + + WMS bbox + + + WMS attribution diff --git a/maps_dashboards/public/model/customLayerFunctions.ts b/maps_dashboards/public/model/customLayerFunctions.ts index 24f7bc17..d318ce9f 100644 --- a/maps_dashboards/public/model/customLayerFunctions.ts +++ b/maps_dashboards/public/model/customLayerFunctions.ts @@ -79,7 +79,8 @@ const getCustomMapURL = (layerConfig: CustomLayerSpecification) => { if (layerSource?.protocol === 'tms') { return layerSource?.url; } else if (layerSource?.protocol === 'wms') { - return `${layerSource?.url}?service=WMS&version=${layerSource.version}&request=GetMap&format=${layerSource.format}&transparent=true&layers=${layerSource?.layers}&styles=${layerSource.styles}&SRS=EPSG%3A3857&WIDTH=256&HEIGHT=256&BBOX={bbox-epsg-3857}`; + const referenceSystemName = layerSource.version === '1.3.0' ? 'crs' : 'srs'; + return `${layerSource?.url}?service=WMS&version=${layerSource.version}&request=GetMap&format=${layerSource.format}&transparent=true&layers=${layerSource?.layers}&styles=${layerSource.styles}&${referenceSystemName}=${layerSource.crs}&width=256&height=256&bbox={bbox-epsg-3857}`; } else { return ''; } diff --git a/maps_dashboards/public/model/mapLayerType.ts b/maps_dashboards/public/model/mapLayerType.ts index f44b141b..76e72899 100644 --- a/maps_dashboards/public/model/mapLayerType.ts +++ b/maps_dashboards/public/model/mapLayerType.ts @@ -86,5 +86,7 @@ export type CustomWMSLayerSpecification = { styles: string; version: string; format: string; + crs: string; + bbox: string; }; }; diff --git a/maps_dashboards/public/utils/getIntialConfig.ts b/maps_dashboards/public/utils/getIntialConfig.ts index 7e073834..007e3788 100644 --- a/maps_dashboards/public/utils/getIntialConfig.ts +++ b/maps_dashboards/public/utils/getIntialConfig.ts @@ -71,8 +71,14 @@ export const getLayerConfigMap = () => ({ visibility: LAYER_VISIBILITY.VISIBLE, source: { url: '', - protocol: 'tms', + protocol: 'wms', attribution: '', + layers: '', + styles: '', + version: '', + format: '', + crs: '', + bbox: '', }, }, }); From e6916b5ecd81e5ca762bc5a063f6581d8fe900d6 Mon Sep 17 00:00:00 2001 From: Junqiu Lei Date: Tue, 3 Jan 2023 09:32:35 -0800 Subject: [PATCH 5/6] Update name Signed-off-by: Junqiu Lei --- .../custom_map_config/custom_map_source.tsx | 30 +++++++++---------- .../public/model/customLayerFunctions.ts | 4 +-- maps_dashboards/public/model/mapLayerType.ts | 4 +-- .../public/utils/getIntialConfig.ts | 2 +- 4 files changed, 20 insertions(+), 20 deletions(-) diff --git a/maps_dashboards/public/components/layer_config/custom_map_config/custom_map_source.tsx b/maps_dashboards/public/components/layer_config/custom_map_config/custom_map_source.tsx index e7f89808..2a66b298 100644 --- a/maps_dashboards/public/components/layer_config/custom_map_config/custom_map_source.tsx +++ b/maps_dashboards/public/components/layer_config/custom_map_config/custom_map_source.tsx @@ -29,14 +29,14 @@ export const CustomMapSource = ({ setSelectedLayerConfig, setIsUpdateDisabled, }: Props) => { - const customMapProtocolOptions = [ + const customMapTypeOptions = [ { value: 'tms', text: 'Tile Map Service (TMS)' }, { value: 'wms', text: 'Web Map Service (WMS)' }, ]; const [customMapURL, setCustomMapURL] = useState(''); const [customMapAttribution, setCustomMapAttribution] = useState(''); - const [protocol, setProtocol] = useState(customMapProtocolOptions[1].value); + const [customType, setCustomType] = useState(customMapTypeOptions[1].value); const [WMSLayers, setWMSLayers] = useState(''); const [WMSVersion, setWMSVersion] = useState(''); const [WMSFormat, setWMSFormat] = useState(''); @@ -67,13 +67,13 @@ export const CustomMapSource = ({ }); }; - const onChangeProtocol = (e: any) => { - setProtocol(e.target.value); + const onChangeCustomType = (e: any) => { + setCustomType(e.target.value); setSelectedLayerConfig({ ...selectedLayerConfig, source: { ...selectedLayerConfig?.source, - protocol: e.target.value, + customType: e.target.value, }, }); }; @@ -156,9 +156,9 @@ export const CustomMapSource = ({ useEffect(() => { setCustomMapURL(selectedLayerConfig.source.url); - setProtocol(selectedLayerConfig.source.protocol); + setCustomType(selectedLayerConfig.source.customType); setCustomMapAttribution(selectedLayerConfig.source.attribution); - if (selectedLayerConfig.source.protocol === 'wms') { + if (selectedLayerConfig.source.customType === 'wms') { setWMSLayers(selectedLayerConfig.source.layers); setWMSVersion(selectedLayerConfig.source.version); setWMSFormat(selectedLayerConfig.source.format); @@ -173,7 +173,7 @@ export const CustomMapSource = ({ }, [selectedLayerConfig.source.attribution]); useEffect(() => { - if (protocol === 'wms') { + if (customType === 'wms') { setIsUpdateDisabled(isInvalidURL(customMapURL) || WMSLayers === '' || WMSVersion === ''); } else { setIsUpdateDisabled(isInvalidURL(customMapURL)); @@ -186,7 +186,7 @@ export const CustomMapSource = ({ WMSStyles, WMSVersion, customMapURL, - protocol, + customType, setIsUpdateDisabled, ]); @@ -196,16 +196,16 @@ export const CustomMapSource = ({ - Protocol + Custom type - {selectedLayerConfig.source.protocol === 'tms' && ( + {selectedLayerConfig.source.customType === 'tms' && ( <> TMS URL @@ -237,7 +237,7 @@ export const CustomMapSource = ({ )} - {selectedLayerConfig.source.protocol === 'wms' && ( + {selectedLayerConfig.source.customType === 'wms' && ( <> WMS URL diff --git a/maps_dashboards/public/model/customLayerFunctions.ts b/maps_dashboards/public/model/customLayerFunctions.ts index d318ce9f..66647317 100644 --- a/maps_dashboards/public/model/customLayerFunctions.ts +++ b/maps_dashboards/public/model/customLayerFunctions.ts @@ -76,9 +76,9 @@ const addNewLayer = ( const getCustomMapURL = (layerConfig: CustomLayerSpecification) => { const layerSource = layerConfig?.source; - if (layerSource?.protocol === 'tms') { + if (layerSource?.customType === 'tms') { return layerSource?.url; - } else if (layerSource?.protocol === 'wms') { + } else if (layerSource?.customType === 'wms') { const referenceSystemName = layerSource.version === '1.3.0' ? 'crs' : 'srs'; return `${layerSource?.url}?service=WMS&version=${layerSource.version}&request=GetMap&format=${layerSource.format}&transparent=true&layers=${layerSource?.layers}&styles=${layerSource.styles}&${referenceSystemName}=${layerSource.crs}&width=256&height=256&bbox={bbox-epsg-3857}`; } else { diff --git a/maps_dashboards/public/model/mapLayerType.ts b/maps_dashboards/public/model/mapLayerType.ts index 76e72899..e792c2f4 100644 --- a/maps_dashboards/public/model/mapLayerType.ts +++ b/maps_dashboards/public/model/mapLayerType.ts @@ -65,7 +65,7 @@ export type CustomTMSLayerSpecification = { visibility: string; source: { url: string; - protocol: 'tms'; + customType: 'tms'; attribution: string; }; }; @@ -80,7 +80,7 @@ export type CustomWMSLayerSpecification = { visibility: string; source: { url: string; - protocol: 'wms'; + customType: 'wms'; attribution: string; layers: string; styles: string; diff --git a/maps_dashboards/public/utils/getIntialConfig.ts b/maps_dashboards/public/utils/getIntialConfig.ts index 007e3788..6a05c892 100644 --- a/maps_dashboards/public/utils/getIntialConfig.ts +++ b/maps_dashboards/public/utils/getIntialConfig.ts @@ -71,7 +71,7 @@ export const getLayerConfigMap = () => ({ visibility: LAYER_VISIBILITY.VISIBLE, source: { url: '', - protocol: 'wms', + customType: 'wms', attribution: '', layers: '', styles: '', From 341212420387070e1fe5faaf4807b7ea7bc3c43c Mon Sep 17 00:00:00 2001 From: Junqiu Lei Date: Tue, 3 Jan 2023 18:18:25 -0800 Subject: [PATCH 6/6] Update to use Form Signed-off-by: Junqiu Lei --- .../custom_map_config/custom_map_source.tsx | 261 +++++++++--------- 1 file changed, 125 insertions(+), 136 deletions(-) diff --git a/maps_dashboards/public/components/layer_config/custom_map_config/custom_map_source.tsx b/maps_dashboards/public/components/layer_config/custom_map_config/custom_map_source.tsx index 2a66b298..22ec2d71 100644 --- a/maps_dashboards/public/components/layer_config/custom_map_config/custom_map_source.tsx +++ b/maps_dashboards/public/components/layer_config/custom_map_config/custom_map_source.tsx @@ -4,18 +4,7 @@ */ import React, { useEffect, useState } from 'react'; -import { - EuiFlexItem, - EuiFormLabel, - EuiFlexGrid, - EuiSpacer, - EuiPanel, - EuiForm, - EuiFieldText, - EuiFormErrorText, - EuiSelect, -} from '@elastic/eui'; -import { FormattedMessage } from '@osd/i18n/react'; +import { EuiSpacer, EuiPanel, EuiForm, EuiFieldText, EuiSelect, EuiFormRow } from '@elastic/eui'; import { CustomLayerSpecification } from '../../../model/mapLayerType'; interface Props { @@ -42,7 +31,7 @@ export const CustomMapSource = ({ const [WMSFormat, setWMSFormat] = useState(''); const [WMSStyles, setWMSStyles] = useState(''); // CRS: Coordinate reference systems in WMS - const [WMSCRS, setWMSCRS] = useState(''); + const [WMSCoordinateSystem, setWMSCoordinateSystem] = useState(''); const [WMSBbox, setWMSBbox] = useState(''); const onChangeCustomMapURL = (e: any) => { @@ -122,8 +111,8 @@ export const CustomMapSource = ({ }); }; - const onChangeWMSCRS = (e: any) => { - setWMSCRS(e.target.value); + const onChangeWMSCoordinateSystem = (e: any) => { + setWMSCoordinateSystem(e.target.value); setSelectedLayerConfig({ ...selectedLayerConfig, source: { @@ -163,7 +152,7 @@ export const CustomMapSource = ({ setWMSVersion(selectedLayerConfig.source.version); setWMSFormat(selectedLayerConfig.source.format); setWMSStyles(selectedLayerConfig.source.styles); - setWMSCRS(selectedLayerConfig.source.crs); + setWMSCoordinateSystem(selectedLayerConfig.source.crs); setWMSBbox(selectedLayerConfig.source.bbox); } }, [selectedLayerConfig]); @@ -174,134 +163,134 @@ export const CustomMapSource = ({ useEffect(() => { if (customType === 'wms') { - setIsUpdateDisabled(isInvalidURL(customMapURL) || WMSLayers === '' || WMSVersion === ''); + setIsUpdateDisabled( + customMapURL === '' || + WMSLayers === '' || + WMSVersion === '' || + WMSFormat === '' || + isInvalidURL(customMapURL) + ); } else { - setIsUpdateDisabled(isInvalidURL(customMapURL)); + setIsUpdateDisabled(customMapURL === '' || isInvalidURL(customMapURL)); } - }, [ - WMSBbox, - WMSCRS, - WMSFormat, - WMSLayers, - WMSStyles, - WMSVersion, - customMapURL, - customType, - setIsUpdateDisabled, - ]); + }, [WMSFormat, WMSLayers, WMSVersion, customMapURL, customType, setIsUpdateDisabled]); return (
- - - Custom type - - - - {selectedLayerConfig.source.customType === 'tms' && ( - <> - - TMS URL - - - {isInvalidURL(customMapURL) && ( - - - - )} - - - TMS attribution - - - - - )} - {selectedLayerConfig.source.customType === 'wms' && ( - <> - - WMS URL - - - {isInvalidURL(customMapURL) && ( - - - - )} - - - WMS layers - - - - - WMS version - - - - - WMS format - - - - - WMS CRS - - - - - WMS bbox - - - - - WMS attribution - - - - - WMS styles - - - - - )} - + + + - + + {selectedLayerConfig.source.customType === 'tms' && ( + + + + + + + + + + )} + {selectedLayerConfig.source.customType === 'wms' && ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + )} +
);