Update WMS

Signed-off-by: Junqiu Lei <[email protected]>
opensearch-project · Dec 31, 2022 · 921263c · 921263c
1 parent d19c7d1
commit 921263c
Show file tree

Hide file tree

Showing 4 changed files with 66 additions and 8 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
@@ -36,15 +36,17 @@ export const CustomMapSource = ({
 
   const [customMapURL, setCustomMapURL] = useState<string>('');
   const [customMapAttribution, setCustomMapAttribution] = useState<string>('');
-  const [protocol, setProtocol] = useState(customMapProtocolOptions[0].value);
+  const [protocol, setProtocol] = useState(customMapProtocolOptions[1].value);
   const [WMSLayers, setWMSLayers] = useState<string>('');
   const [WMSVersion, setWMSVersion] = useState<string>('');
   const [WMSFormat, setWMSFormat] = useState<string>('');
   const [WMSStyles, setWMSStyles] = useState<string>('');
+  // CRS: Coordinate reference systems in WMS
+  const [WMSCRS, setWMSCRS] = useState<string>('');
+  const [WMSBbox, setWMSBbox] = useState<string>('');
 
   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 (
     <div>
@@ -234,6 +273,16 @@ export const CustomMapSource = ({
                   <EuiSpacer size="xs" />
                   <EuiFieldText value={WMSFormat} onChange={onChangeWMSFormat} fullWidth={true} />
                 </EuiFlexItem>
+                <EuiFlexItem>
+                  <EuiFormLabel>WMS CRS</EuiFormLabel>
+                  <EuiSpacer size="xs" />
+                  <EuiFieldText value={WMSCRS} onChange={onChangeWMSCRS} fullWidth={true} />
+                </EuiFlexItem>
+                <EuiFlexItem>
+                  <EuiFormLabel>WMS bbox</EuiFormLabel>
+                  <EuiSpacer size="xs" />
+                  <EuiFieldText value={WMSBbox} onChange={onChangeWMSBbox} fullWidth={true} />
+                </EuiFlexItem>
                 <EuiFlexItem>
                   <EuiFormLabel>WMS attribution</EuiFormLabel>
                   <EuiSpacer size="xs" />

diff --git 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
@@ -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
@@ -71,8 +71,14 @@ export const getLayerConfigMap = () => ({
     visibility: LAYER_VISIBILITY.VISIBLE,
     source: {
       url: '',
-      protocol: 'tms',
+      protocol: 'wms',
       attribution: '',
+      layers: '',
+      styles: '',
+      version: '',
+      format: '',
+      crs: '',
+      bbox: '',
     },
   },
 });