Widgets in one panel, change layout view.ui, remove unused code

EsriDE · Nov 20, 2024 · 9f226d1 · 9f226d1
1 parent 4ec9871
commit 9f226d1
Show file tree

Hide file tree

Showing 9 changed files with 101 additions and 635 deletions.
diff --git a/web-apps/urban-sun-safe/configs/_config.json b/web-apps/urban-sun-safe/configs/_config.json
@@ -15,5 +15,10 @@
         "hriVectorTileServiceTitle": "Heat Risk Index Vector",
         "hriFeatureServicePortalItem": "5969b96bfb0340b0abe1ad78dbe8150c",
         "hriFeatureServiceTitle": "Heat Risk Index Feature"
+    },
+    "shadowPanel" : {
+        "labelSearch": "1. Search location",
+        "labelShadow": "2. Display shadow at this location",
+        "labelDraw": "3. Test impact of parasols by drawing in the map"
     }
 }
diff --git a/web-apps/urban-sun-safe/index.html b/web-apps/urban-sun-safe/index.html
@@ -6,7 +6,7 @@
       name="viewport"
       content="initial-scale=1,maximum-scale=1,user-scalable=no"
     />
-    <title>ArcGIS Maps SDK for JavaScript</title>
+    <title>Urban Sun Safe Demo</title>
 
     <link
       rel="icon"

diff --git a/web-apps/urban-sun-safe/package.json b/web-apps/urban-sun-safe/package.json
@@ -17,8 +17,10 @@
     "lint:prettier": "prettier --write 'src/**/*.{js,jsx,ts,tsx,css,scss}'"
   },
   "dependencies": {
-    "@arcgis/core": "^4.30.9",
-    "@esri/calcite-components": "^2.13.2"
+    "@arcgis/core": "^4.31.4",
+    "@arcgis/map-components-react": "^4.31.6",
+    "@esri/calcite-components": "^2.13.2",
+    "arcgis-core-template": "file:"
   },
   "devDependencies": {
     "@types/sortablejs": "*",

diff --git a/web-apps/urban-sun-safe/src/compontents/App.tsx b/web-apps/urban-sun-safe/src/compontents/App.tsx
@@ -29,44 +29,27 @@ class App extends Widget<AppProperties> {
 
   postInitialize(): void {
     const view = this.store.view;
-
-    // Legend
-    const heatLayer = view.map.allLayers.find(function(layer) {
-      return layer.title === Config.services.hriFeatureServiceTitle
-     });
-    const legend = new Legend({ 
-      view: view, 
-      layerInfos: [
-        {
-          layer: heatLayer,
-          title: ""
-        }] 
-    })
-    const expandLegend = new Expand({
-      expandIcon: "color-coded-map", 
-      expandTooltip: "Legend Heat Risk Layer",
-      view: view,
-      content: legend
-    })
-    view.ui.add({component: expandLegend, position: "top-left", index: 0})
-
-    // Layer List
-    const layerList = new LayerList({
-      view: view
-    })
-    const expandLayerList = new Expand({
-      expandIcon: "map-contents", 
-      expandTooltip: "Layer List",
-      view: view,
-      content: layerList
-    })
-    view.ui.add({component: expandLayerList, position: "top-left", index: 1})
 
+    // Shadow Cast Panel
+    const container = document.createElement('div')
+    container.classList.add('shadowPanel')
     // Search
-    const search = new Search({view: view})
-    view.ui.add({component: search, position: "top-right", index: 0})
-
+    const searchContainer = this.createShadowPanelElement(container, Config.shadowPanel.labelSearch)
+    new Search({view: view, container: searchContainer})
+    // Shadow Cast
+    const shadowContainer = this.createShadowPanelElement(container, Config.shadowPanel.labelShadow)
+    const shadow = new ShadowCast({
+      view: view,
+      visibleElements: {
+        'visualizationOptions': false
+      },
+      container: shadowContainer
+    })
+    shadow.viewModel.date = new Date("June 21, 2024");
+    shadow.viewModel.visualizationType = "duration";
+    shadow.visible = false
     // Sketch
+    const sketchContainer = this.createShadowPanelElement(container, Config.shadowPanel.labelDraw)
     const graphicsLayer = view.map.allLayers.find(function(layer) {
       return layer.title === 'Sketched geometries'
      });
@@ -116,7 +99,7 @@ class App extends Widget<AppProperties> {
         hasZ: true
       }
     })
-     const sketch = new Sketch({
+    new Sketch({
       layer: graphicsLayer,
       view: view,
       visibleElements: {
@@ -126,32 +109,70 @@ class App extends Widget<AppProperties> {
           point:false
         }
       },
-      viewModel: sketchViewModel
+      viewModel: sketchViewModel,
+      container: sketchContainer
     });
-    const expandSketch = new Expand({
-      expandIcon: "pencil",
-      expandTooltip: "Draw",
+    // Expand
+    const expandShadow = new Expand({
+      expandIcon: "brightness",
+      expandTooltip: "Shadow Cast",
       view: view,
-      content: sketch
+      content: container
     })
-    view.ui.add(expandSketch, 'top-right')
+    view.ui.add(expandShadow, 'top-left')
+    // Hide Shadow when panel closed
+    expandShadow.watch('expanded', (expanded) =>{
+      if (expanded) {
+        shadow.visible = true
+      } else {
+        shadow.visible = false
+      }
+    });
 
-    // Shadow Cast
-    const shadow = new ShadowCast({
+    // Map Tools
+    view.ui.move([ "zoom", "compass", "navigation-toggle" ], "top-right");
+    // Legend
+    const heatLayer = view.map.allLayers.find(function(layer) {
+      return layer.title === Config.services.hriFeatureServiceTitle
+     });
+    const legend = new Legend({ 
+      view: view, 
+      layerInfos: [
+        {
+          layer: heatLayer,
+          title: ""
+        }] 
+    })
+    const expandLegend = new Expand({
+      expandIcon: "color-coded-map", 
+      expandTooltip: "Legend Heat Risk Layer",
       view: view,
-      visibleElements: {
-        'visualizationOptions': false
-      }
+      content: legend
     })
-    shadow.viewModel.date = new Date("June 21, 2024");
-    shadow.viewModel.visualizationType = "duration";
-    const expandShadow = new Expand({
-      expandIcon: "measure-building-height-shadow",
-      expandTooltip: "Shadow Cast",
+    view.ui.add({component: expandLegend, position: "top-right", index: 0})
+
+    // Layer List
+    const layerList = new LayerList({
+      view: view
+    })
+    const expandLayerList = new Expand({
+      expandIcon: "map-contents", 
+      expandTooltip: "Layer List",
       view: view,
-      content: shadow
+      content: layerList
     })
-    view.ui.add(expandShadow, 'top-right')
+    view.ui.add({component: expandLayerList, position: "top-right", index: 1})
+  }
+
+  createShadowPanelElement(parentContainer: HTMLDivElement, header: string): HTMLDivElement {
+    const container = document.createElement('div')
+    container.classList.add('shadowPanelElement')
+    const label = document.createElement('div')
+    label.classList.add('shadowPanelElementLabel')
+    label.innerHTML = header
+    container.appendChild(label)
+    parentContainer.appendChild(container)
+    return container
   }
 
   render() {