feat: implement layer selector

waiting on new release of @ugrc/layer-selector

Closes #63
Closes #64

.env

@@ -0,0 +1 @@
+VITE_DISCOVER=chance-source-liquid-nelson

.env.stage

@@ -0,0 +1 @@
+VITE_DISCOVER=opera-event-little-pinball

.vscode/settings.json

@@ -16,7 +16,8 @@
     "sherlock",
     "softprops",
     "tanstack",
-    "TSQL"
+    "TSQL",
+    "ugrc"
   ],
   "cSpell.language": "en,es-ES"
 }

package.json

@@ -62,6 +62,7 @@
     "@fortawesome/free-solid-svg-icons": "^6.1.2",
     "@fortawesome/react-fontawesome": "^0.2.0",
     "@tanstack/react-query": "^4.2.1",
+    "@ugrc/layer-selector": "^6.1.0",
     "bootstrap": "^5.2.0",
     "clsx": "^1.2.1",
     "downshift": "^6.1.9",

public/config.json

@@ -156,6 +156,17 @@
       }
     }
   },
+  "layerSelector": {
+    "baseLayers": ["Lite", "Terrain", "Imagery"],
+    "overlays": [
+      {
+        "id": "Cities",
+        "Factory": "FeatureLayer",
+        "url": "https://gis.wfrc.org/arcgis/rest/services/General/ZoomToPlaceNames/FeatureServer/2",
+        "opacity": 1
+      }
+    ]
+  },
   "openOnLoad": {
     "filter": true,
     "projectInfo": true

public/config.schema.json

@@ -60,6 +60,7 @@
   "required": [
     "appTitle",
     "filter",
+    "layerSelector",
     "openOnLoad",
     "outFields",
     "projectInformation",
@@ -304,6 +305,74 @@
         }
       }
     },
+    "layerSelector": {
+      "description": "Configuration options for the base map selector widget",
+      "type": "object",
+      "additionalProperties": false,
+      "properties": {
+        "baseLayers": {
+          "type": "array",
+          "items": {
+            "anyOf": [
+              {
+                "type": "string"
+              },
+              {
+                "type": "object",
+                "additionalProperties": false,
+                "properties": {
+                  "id": {
+                    "description": "The name of the layer",
+                    "type": "string"
+                  },
+                  "Factory": {
+                    "description": "The name of the esrijs module associated with the layer type",
+                    "type": "string"
+                  },
+                  "urlTemplate": {
+                    "description": "The urlTemplate for the layer. \"{quadWord}\" will be automatically replaced with the appropriate value at runtime.",
+                    "type": "string"
+                  }
+                },
+                "required": ["id", "Factory", "urlTemplate"]
+              }
+            ]
+          }
+        },
+        "overlays": {
+          "type": "array",
+          "items": {
+            "anyOf": [
+              {
+                "type": "string"
+              },
+              {
+                "type": "object",
+                "additionalProperties": false,
+                "properties": {
+                  "id": {
+                    "description": "The name of the layer",
+                    "type": "string"
+                  },
+                  "Factory": {
+                    "description": "The name of the esrijs module associated with the layer type",
+                    "type": "string"
+                  },
+                  "url": {
+                    "description": "The url for the layer",
+                    "type": "string"
+                  },
+                  "opacity": {
+                    "type": "number"
+                  }
+                },
+                "required": ["id", "Factory", "url"]
+              }
+            ]
+          }
+        }
+      }
+    },
     "openOnLoad": {
       "title": "Open On Load",
       "description": "Controls whether specific map widgets default to be open on page load",

src/App.jsx

@@ -5,6 +5,7 @@ import WebMap from '@arcgis/core/WebMap';
 import Home from '@arcgis/core/widgets/Home';
 import { faFilter, faHandPointer } from '@fortawesome/free-solid-svg-icons';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import LayerSelector from '@ugrc/layer-selector';
 import { useCallback, useEffect, useState } from 'react';
 import 'typeface-montserrat';
 import './App.scss';
@@ -24,9 +25,11 @@ const queryClient = new QueryClient();
 function App() {
   const [mapView, setMapView] = useState(null);
   const [zoomToGraphic, setZoomToGraphic] = useState(null);
+  const [layerSelectorOptions, setLayerSelectorOptions] = useState(null);
 
   const t = useSpecialTranslation();
 
+  // init map
   useEffect(() => {
     const map = new WebMap({
       portalItem: { id: config.webMapId },
@@ -35,6 +38,14 @@ function App() {
     view.popup = null;
     view.ui.add(new Home({ view }), 'top-left');
 
+    setLayerSelectorOptions({
+      view,
+      quadWord: import.meta.env.VITE_DISCOVER,
+      position: 'top-left',
+      showOpacitySlider: true,
+      ...config.layerSelector,
+    });
+
     setMapView(view);
   }, []);
 
@@ -194,6 +205,7 @@ function App() {
             </MapWidget>
           </MapWidgetContainer>
           <Sherlock {...sherlockConfig}></Sherlock>
+          {layerSelectorOptions && <LayerSelector {...layerSelectorOptions} />}
         </div>
       </div>
       <SplashScreen />

src/App.scss

@@ -1,6 +1,7 @@
 @import 'bootstrap';
 
 @import './variables.scss';
+@import '../node_modules/@ugrc/layer-selector/src/LayerSelector.css';
 
 .title {
   font-family: Montserrat, Arial, sans-serif;