feat!: add defaultExtent config value

This also controls the extent to which the map zooms when the home button is clicked. Without this change, the home button would zoom to whatever the extent of the map was when the app loaded. Which was an issue when URL params caused the map to load in a non-standard extent.

BREAKING CHANGE: `defaultExtent` needs to be added to your config.

public/config.json

@@ -1,5 +1,10 @@
 {
   "appTitle": "RTP Projects",
+  "defaultExtent": {
+    "x": -12453807,
+    "y": 5014773,
+    "scale": 1155581
+  },
   "filter": {
     "disableAdvanced": false,
     "fieldNames": {

public/config.schema.json

@@ -59,6 +59,7 @@
   },
   "required": [
     "appTitle",
+    "defaultExtent",
     "filter",
     "layerSelector",
     "openOnLoad",
@@ -76,6 +77,24 @@
       "description": "The title of the application",
       "type": "string"
     },
+    "defaultExtent": {
+      "title": "Default Map Extent",
+      "description": "The default extent of the map on load. Also controls the extent for the home button",
+      "type": "object",
+      "required": ["x", "y", "scale"],
+      "additionalProperties": false,
+      "properties": {
+        "x": {
+          "type": "number"
+        },
+        "y": {
+          "type": "number"
+        },
+        "scale": {
+          "type": "number"
+        }
+      }
+    },
     "filter": {
       "title": "Filter Widget Configuration",
       "description": "Configuration options for the filter widget",

src/App.jsx

@@ -1,5 +1,6 @@
 import * as reactiveUtils from '@arcgis/core/core/reactiveUtils';
 import Graphic from '@arcgis/core/Graphic';
+import Viewpoint from '@arcgis/core/Viewpoint';
 import MapView from '@arcgis/core/views/MapView';
 import WebMap from '@arcgis/core/WebMap';
 import Home from '@arcgis/core/widgets/Home';
@@ -45,11 +46,28 @@ function App() {
     if (urlState.x && urlState.y && urlState.scale) {
       mapOptions.center = { x: urlState.x, y: urlState.y, spatialReference: 3857 };
       mapOptions.scale = urlState.scale;
+    } else {
+      mapOptions.center = { x: config.defaultExtent.x, y: config.defaultExtent.y, spatialReference: 3857 };
+      mapOptions.scale = config.defaultExtent.scale;
     }
 
     const view = new MapView(mapOptions);
     view.popup = null;
-    view.ui.add(new Home({ view }), 'top-left');
+    view.ui.add(
+      new Home({
+        view,
+        viewpoint: new Viewpoint({
+          targetGeometry: {
+            type: 'point',
+            x: config.defaultExtent.x,
+            y: config.defaultExtent.y,
+            spatialReference: 3857,
+          },
+          scale: config.defaultExtent.scale,
+        }),
+      }),
+      'top-left'
+    );
 
     setLayerSelectorOptions({
       view,