Merge pull request #335 from RENCI/issue206

Issue206 - Adding a tray to select external layers.

src/components/map/external-layers.js

@@ -0,0 +1,48 @@
+import React, { Fragment } from 'react';
+import { WMSTileLayer } from 'react-leaflet';
+import { useLayers } from '@context/map-context';
+
+// external layers are other types of related map layers
+// that are provided by external map services other than MetGet
+// the map service details are defined in ...
+// external layer can be features or coverages (i.e. rasters)
+// the last layer selected, to be displayed, from list of
+// external layers will be moved to the top of the external
+// layers list and displayed immediately
+
+export const ExternalLayers = () => {
+    // storage from state for rendering external layers
+    const {
+        externalLayers
+    } = useLayers();
+
+    //const sst_url = "https://coastwatch.noaa.gov/erddap/wms/noaacwBLENDEDsstDNDaily/request";
+    //const sst_layer = "noaacwBLENDEDsstDNDaily:analysed_sst";
+
+    //const sst_url = "https://coastwatch.noaa.gov/erddap/wms/noaacwecnAVHRRmultisatsstEastCoastMonthly/request";
+    //const sst_layer = "noaacwecnAVHRRmultisatsstEastCoastMonthly:sst";
+
+    //const sst_url = "https://coastwatch.noaa.gov/erddap/wms/noaacwecnAVHRRmultisatsstEastCoast3Day/request";
+    //const sst_layer = "noaacwecnAVHRRmultisatsstEastCoast3Day:sst";
+
+    if (externalLayers != null) {
+        return (
+            <Fragment>
+                {
+                    externalLayers
+                    .filter(item => item.state.visible === true)
+                    .map(
+                        (layer) => (
+                            <WMSTileLayer
+                                key={layer.name}
+                                url={layer.url}
+                                layers={layer.layer}
+                                params={layer.params}
+                            />
+                        )
+                    )
+                }
+            </Fragment>
+        );
+    }
+};

src/components/map/map.js

@@ -2,6 +2,7 @@ import React from 'react';
 import { MapContainer } from 'react-leaflet';
 import { DefaultLayers } from './default-layers';
 import { StormLayers } from './storm-layers';
+import { ExternalLayers } from './external-layers';
 import { BaseMap } from './base-map';
 import {
   useLayers,
@@ -27,6 +28,7 @@ export const Map = () => {
           <BaseMap />
           <DefaultLayers/>
           <StormLayers/>
+          <ExternalLayers/>
       </MapContainer>
     );
   };

src/components/trays/additional-layers/additional-layers.js

@@ -0,0 +1,90 @@
+import React, { Fragment } from 'react';
+import { useQuery } from '@tanstack/react-query';
+import axios from 'axios';
+import { Stack } from '@mui/joy';
+import { getNamespacedEnvParam } from "@utils/map-utils";
+import ExternalLayerItems from "@additional-layers/externalLayerItems.js";
+import { useLayers } from "@context";
+
+/**
+ * Select MaraCoos external layers
+ *
+ * @returns React.ReactElement
+ * @constructor
+ */
+export const AdditionalLayers = () => {
+    // init the data urls
+    const rootUrl = getNamespacedEnvParam('REACT_APP_UI_DATA_URL');
+    const baseDataUrl = `get_external_layers`;
+    const finalDataUrl = rootUrl + baseDataUrl;
+
+    // storage from state for rendering external layers
+    const {
+        externalLayers, setExternalLayers
+    } = useLayers();
+
+    /**
+     * Retrieves and returns the dropdown data in JSON format
+     *
+     * @param url
+     * @returns { json }
+     */
+    // return the data to the caller
+    useQuery( {
+        // specify the data key and url to use
+        queryKey: ['apsviz-maracoos-data', finalDataUrl],
+
+        // create the function to call for data
+        queryFn: async () => {
+            // create the authorization header
+            const requestOptions = {
+                method: 'GET',
+                headers: { Authorization: `Bearer ${ getNamespacedEnvParam('REACT_APP_UI_DATA_TOKEN') }`}
+            };
+
+            // make the call to get the data
+            const { data } = await axios.get(finalDataUrl, requestOptions);
+
+            // add the default visibility state if data was returned
+            if (data !== null) {
+                // for each layer
+                data.forEach(r => {
+                    // set the default visibility
+                    r.state = newLayerDefaultState();
+                });
+
+                // save the external layers data in state
+                setExternalLayers(data);
+            }
+
+            // return something
+            return true;
+        },
+
+        // do not reload this again
+        refetchOnWindowFocus: false
+    });
+
+    /**
+     * method to return the layer state properties
+     *
+     * @returns {{visible: boolean, opacity: number}}
+     */
+    const newLayerDefaultState = () => {
+        // return the default state of not visible
+        return ({ visible: false, opacity: 1.0 });
+    };
+
+    /**
+     * return the rendered component if there is data
+     */
+    if (externalLayers != null) {
+        return (
+            <Fragment>
+                <Stack spacing={ 1 } >
+                    <ExternalLayerItems data={ externalLayers }/>
+                </Stack>
+            </Fragment>
+        );
+    }
+};