feat: set default extent to randomly selected major city

Ref: #212
agrc · Dec 17, 2018 · 0287bb2 · 0287bb2
1 parent 686617f
commit 0287bb2
Show file tree

Hide file tree

Showing 2 changed files with 151 additions and 9 deletions.
diff --git a/src/components/esrijs/MapView.js b/src/components/esrijs/MapView.js
@@ -2,6 +2,7 @@ import React, { Component } from 'react';
 import ReactDOM from 'react-dom';
 import { loadModules, loadCss } from 'esri-loader';
 import { LayerSelectorContainer, LayerSelector } from '../../components/LayerSelector/LayerSelector';
+import cityExtents from './data/cityExtents.json';
 
 
 export default class ReactMapView extends Component {
@@ -28,7 +29,8 @@ export default class ReactMapView extends Component {
     const mapRequires = [
       'esri/Map',
       'esri/views/MapView',
-      'esri/layers/FeatureLayer'
+      'esri/layers/FeatureLayer',
+      'esri/geometry/Polygon'
     ];
     const selectorRequires = [
       'esri/layers/support/LOD',
@@ -37,20 +39,18 @@ export default class ReactMapView extends Component {
       'esri/Basemap'
     ];
 
-    const [Map, MapView, FeatureLayer, LOD, TileInfo, WebTileLayer, Basemap] = await loadModules(mapRequires.concat(selectorRequires));
+    const [Map, MapView, FeatureLayer, Polygon, LOD, TileInfo, WebTileLayer, Basemap] = await loadModules(mapRequires.concat(selectorRequires));
 
     this.map = new Map();
 
+    // get random city extent
+    const randomExtent = cityExtents[Math.round(Math.random() * (cityExtents.length - 1))];
+    const extent = new Polygon(randomExtent.geometry).extent;
+
     this.view = new MapView({
       container: this.mapViewDiv,
       map: this.map,
-      extent: {
-        xmax: -11762120.612131765,
-        xmin: -13074391.513731329,
-        ymax: 5225035.106177688,
-        ymin: 4373832.359194187,
-        spatialReference: 3857
-      },
+      extent,
       ui: {
         components: ['zoom']
       }

diff --git a/src/components/esrijs/data/cityExtents.json b/src/components/esrijs/data/cityExtents.json
@@ -0,0 +1,142 @@
+[
+    {
+        "geometry": {
+            "rings": [
+                [
+                    [
+                        -12461805.132967064,
+                        5005205.468515454
+                    ],
+                    [
+                        -12461907.813910948,
+                        5014715.783387344
+                    ],
+                    [
+                        -12453711.883246688,
+                        5014801.585572581
+                    ],
+                    [
+                        -12453617.180867197,
+                        5005290.993449546
+                    ],
+                    [
+                        -12461805.132967064,
+                        5005205.468515454
+                    ]
+                ]
+            ],
+            "type": "polygon",
+            "spatialReference": {
+                "wkid": 3857
+            }
+        },
+        "attributes": {
+            "name": "Farmington"
+        }
+    },
+    {
+        "geometry": {
+            "rings": [
+                [
+                    [
+                        -12470555.590815067,
+                        5035858.557792448
+                    ],
+                    [
+                        -12470775.548279485,
+                        5054569.233934496
+                    ],
+                    [
+                        -12459092.848639812,
+                        5054700.840891288
+                    ],
+                    [
+                        -12458895.362660747,
+                        5035989.330964599
+                    ],
+                    [
+                        -12470555.590815067,
+                        5035858.557792448
+                    ]
+                ]
+            ],
+            "type": "polygon",
+            "spatialReference": {
+                "wkid": 3857
+            }
+        },
+        "attributes": {
+            "name": "Ogden"
+        }
+    },
+    {
+        "geometry": {
+            "rings": [
+                [
+                    [
+                        -12478918.593358466,
+                        4967887.390972386
+                    ],
+                    [
+                        -12479199.048907503,
+                        4990312.741537825
+                    ],
+                    [
+                        -12438926.245701784,
+                        4990738.164404009
+                    ],
+                    [
+                        -12438737.789638512,
+                        4968309.5738843605
+                    ],
+                    [
+                        -12478918.593358466,
+                        4967887.390972386
+                    ]
+                ]
+            ],
+            "type": "polygon",
+            "spatialReference": {
+                "wkid": 3857
+            }
+        },
+        "attributes": {
+            "name": "Salt Lake City"
+        }
+    },
+    {
+        "geometry": {
+            "rings": [
+                [
+                    [
+                        -12438884.260753626,
+                        4892870.901914193
+                    ],
+                    [
+                        -12439058.10798771,
+                        4913747.9445956815
+                    ],
+                    [
+                        -12416273.558522524,
+                        4913913.208215975
+                    ],
+                    [
+                        -12416147.66210252,
+                        4893034.988520113
+                    ],
+                    [
+                        -12438884.260753626,
+                        4892870.901914193
+                    ]
+                ]
+            ],
+            "type": "polygon",
+            "spatialReference": {
+                "wkid": 3857
+            }
+        },
+        "attributes": {
+            "name": "Provo"
+        }
+    }
+]