feat!: add support for black and white imagery base map

BREAKING CHANGE: Added the following config props under `layerSelector`: - `BWName` - `BWOpacity` Closes #110
agrc · Dec 16, 2022 · 0543008 · 0543008
1 parent 7e7b7ce
commit 0543008
Show file tree

Hide file tree

Showing 7 changed files with 80 additions and 8 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -23,7 +23,8 @@
     "tanstack",
     "TSQL",
     "udot",
-    "ugrc"
+    "ugrc",
+    "utah"
   ],
   "cSpell.language": "en,es-ES",
   "editor.defaultFormatter": "esbenp.prettier-vscode"

diff --git a/docs/config-properties-layerselector-properties-bwname.md b/docs/config-properties-layerselector-properties-bwname.md
@@ -0,0 +1,3 @@
+## BWName Type
+
+`string`
diff --git a/docs/config-properties-layerselector-properties-bwopacity.md b/docs/config-properties-layerselector-properties-bwopacity.md
@@ -0,0 +1,3 @@
+## BWOpacity Type
+
+`string`
diff --git a/docs/config-properties-layerselector.md b/docs/config-properties-layerselector.md
@@ -4,14 +4,16 @@
 
 # layerSelector Properties
 
-| Property                  | Type    | Required | Nullable       | Defined by                                                                                                                                                                                       |
-| :------------------------ | :------ | :------- | :------------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| [baseLayers](#baselayers) | `array` | Optional | cannot be null | [WFRC RTP Projects Application Configuration](config-properties-layerselector-properties-baselayers.md "https://wfrc.org/??/config.schema.json#/properties/layerSelector/properties/baseLayers") |
-| [overlays](#overlays)     | `array` | Optional | cannot be null | [WFRC RTP Projects Application Configuration](config-properties-layerselector-properties-overlays.md "https://wfrc.org/??/config.schema.json#/properties/layerSelector/properties/overlays")     |
+| Property                  | Type     | Required | Nullable       | Defined by                                                                                                                                                                                       |
+| :------------------------ | :------- | :------- | :------------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| [baseLayers](#baselayers) | `array`  | Optional | cannot be null | [WFRC RTP Projects Application Configuration](config-properties-layerselector-properties-baselayers.md "https://wfrc.org/??/config.schema.json#/properties/layerSelector/properties/baseLayers") |
+| [overlays](#overlays)     | `array`  | Optional | cannot be null | [WFRC RTP Projects Application Configuration](config-properties-layerselector-properties-overlays.md "https://wfrc.org/??/config.schema.json#/properties/layerSelector/properties/overlays")     |
+| [BWName](#bwname)         | `string` | Optional | cannot be null | [WFRC RTP Projects Application Configuration](config-properties-layerselector-properties-bwname.md "https://wfrc.org/??/config.schema.json#/properties/layerSelector/properties/BWName")         |
+| [BWOpacity](#bwopacity)   | `string` | Optional | cannot be null | [WFRC RTP Projects Application Configuration](config-properties-layerselector-properties-bwopacity.md "https://wfrc.org/??/config.schema.json#/properties/layerSelector/properties/BWOpacity")   |
 
 ## baseLayers
 
-
+The base layers to be displayed in the widget. Use a string value that matches the `BWName` value to create a black and white imagery layer.
 
 `baseLayers`
 
@@ -44,3 +46,39 @@ an array of merged types ([Details](config-properties-layerselector-properties-b
 ### overlays Type
 
 an array of merged types ([Details](config-properties-layerselector-properties-overlays-items.md))
+
+## BWName
+
+The name of the black and white imagery layer token in the baseLayers array
+
+`BWName`
+
+*   is optional
+
+*   Type: `string`
+
+*   cannot be null
+
+*   defined in: [WFRC RTP Projects Application Configuration](config-properties-layerselector-properties-bwname.md "https://wfrc.org/??/config.schema.json#/properties/layerSelector/properties/BWName")
+
+### BWName Type
+
+`string`
+
+## BWOpacity
+
+The opacity of the black and white imagery layer expressed as a percentage (e.g. 75%)
+
+`BWOpacity`
+
+*   is optional
+
+*   Type: `string`
+
+*   cannot be null
+
+*   defined in: [WFRC RTP Projects Application Configuration](config-properties-layerselector-properties-bwopacity.md "https://wfrc.org/??/config.schema.json#/properties/layerSelector/properties/BWOpacity")
+
+### BWOpacity Type
+
+`string`
diff --git a/public/config.json b/public/config.json
@@ -156,15 +156,17 @@
     }
   },
   "layerSelector": {
-    "baseLayers": ["Lite", "Terrain", "Hybrid"],
+    "baseLayers": ["Lite", "Terrain", "Hybrid", "B/W Imagery"],
     "overlays": [
       {
         "id": "Cities",
         "Factory": "FeatureLayer",
         "url": "https://gis.wfrc.org/arcgis/rest/services/General/ZoomToPlaceNames/FeatureServer/2",
         "opacity": 1
       }
-    ]
+    ],
+    "BWName": "B/W Imagery",
+    "BWOpacity": "75%"
   },
   "openOnLoad": {
     "filter": true,

diff --git a/public/config.schema.json b/public/config.schema.json
@@ -360,6 +360,7 @@
       "additionalProperties": false,
       "properties": {
         "baseLayers": {
+          "description": "The base layers to be displayed in the widget. Use a string value that matches the `BWName` value to create a black and white imagery layer.",
           "type": "array",
           "items": {
             "anyOf": [
@@ -419,6 +420,14 @@
               }
             ]
           }
+        },
+        "BWName": {
+          "description": "The name of the black and white imagery layer token in the baseLayers array",
+          "type": "string"
+        },
+        "BWOpacity": {
+          "description": "The opacity of the black and white imagery layer expressed as a percentage (e.g. 75%)",
+          "type": "string"
         }
       }
     },

diff --git a/src/App.jsx b/src/App.jsx
@@ -1,6 +1,7 @@
 import * as reactiveUtils from '@arcgis/core/core/reactiveUtils';
 import { whenOnce } from '@arcgis/core/core/reactiveUtils';
 import Graphic from '@arcgis/core/Graphic';
+import WebTileLayer from '@arcgis/core/layers/WebTileLayer';
 import Viewpoint from '@arcgis/core/Viewpoint';
 import MapView from '@arcgis/core/views/MapView';
 import WebMap from '@arcgis/core/WebMap';
@@ -78,6 +79,21 @@ function App() {
       'top-left'
     );
 
+    config.layerSelector.baseLayers = config.layerSelector.baseLayers.map((layer) => {
+      if (typeof layer === 'string' && layer === config.layerSelector.BWName) {
+        return {
+          id: config.layerSelector.BWName,
+          Factory: WebTileLayer,
+          urlTemplate: `https://discover.agrc.utah.gov/login/path/${
+            import.meta.env.VITE_DISCOVER
+          }/tiles/utah/{level}/{col}/{row}`,
+          effect: `grayscale(100%) opacity(${config.layerSelector.BWOpacity})`,
+        };
+      }
+
+      return layer;
+    });
+
     setLayerSelectorOptions({
       view,
       quadWord: import.meta.env.VITE_DISCOVER,
-Original file line number
+Diff line change
@@ Expand Up / @@ -23,7 +23,8 @@ @@
         "tanstack",
         "TSQL",
         "udot",
-        "ugrc"
+        "ugrc",
+        "utah"
       ],
       "cSpell.language": "en,es-ES",
       "editor.defaultFormatter": "esbenp.prettier-vscode"
@@ Expand Down @@