ShadowCast and Sketch Widget

web-apps/urban-sun-safe/src/compontents/App.tsx

@@ -5,7 +5,6 @@ import {
 
 import { tsx } from "@arcgis/core/widgets/support/widget";
 
-import Fullscreen from "@arcgis/core/widgets/Fullscreen";
 import AppStore from "../stores/AppStore";
 import Header from "./Header";
 import { Widget } from "./Widget";
@@ -15,6 +14,11 @@ import Search from "@arcgis/core/widgets/Search";
 import * as Config from '../../configs/config.json'
 import FeatureLayer from "@arcgis/core/layers/FeatureLayer";
 import LayerList from "@arcgis/core/widgets/LayerList";
+import ShadowCast from "@arcgis/core/widgets/ShadowCast";
+import Sketch from "@arcgis/core/widgets/Sketch";
+import { PolygonSymbol3D, ExtrudeSymbol3DLayer } from "@arcgis/core/symbols";
+import SolidEdges3D from "@arcgis/core/symbols/edges/SolidEdges3D";
+import SketchViewModel from "@arcgis/core/widgets/Sketch/SketchViewModel";
 
 type AppProperties = Pick<App, "store">;
 
@@ -25,9 +29,8 @@ class App extends Widget<AppProperties> {
 
   postInitialize(): void {
     const view = this.store.view;
-    const fullscreen = new Fullscreen({ view });
-    view.ui.add(fullscreen, "top-right");
 
+    // Legend
     const heatLayer = view.map.allLayers.find(function(layer) {
       return layer.title === Config.services.hriFeatureServiceTitle
      });
@@ -46,6 +49,8 @@ class App extends Widget<AppProperties> {
       content: legend
     })
     view.ui.add({component: expandLegend, position: "top-left", index: 0})
+
+    // Layer List
     const layerList = new LayerList({
       view: view
     })
@@ -56,8 +61,97 @@ class App extends Widget<AppProperties> {
       content: layerList
     })
     view.ui.add({component: expandLayerList, position: "top-left", index: 1})
+
+    // Search
     const search = new Search({view: view})
     view.ui.add({component: search, position: "top-right", index: 0})
+
+    // Sketch
+    const graphicsLayer = view.map.allLayers.find(function(layer) {
+      return layer.title === 'Sketched geometries'
+     });
+     const buildingSymbology = new PolygonSymbol3D({
+      symbolLayers: [
+        new ExtrudeSymbol3DLayer({
+          size: 0.5, // extrude by 3.5m meters
+          material: {
+            color: [255, 255, 255, 0.8]
+          },
+          edges: new SolidEdges3D({
+            size: 1,
+            color: [82, 82, 122, 1]
+          })
+        })
+      ]
+    });
+    const sketchViewModel = new SketchViewModel({
+      layer: graphicsLayer,
+      view: view,
+      polygonSymbol: buildingSymbology,
+      valueOptions: {
+        directionMode: "absolute"
+      },
+      tooltipOptions: {
+        enabled: true,
+        visibleElements: {
+          elevation: true,
+          area: false,
+          coordinates: false,
+          direction: false,
+          distance: true
+        }
+      },
+      labelOptions: {
+        enabled: true
+      },
+      defaultUpdateOptions: {
+        tool: "reshape",
+        reshapeOptions: {
+          edgeOperation: "offset"
+        },
+        enableZ: true
+      },
+      defaultCreateOptions: {
+        defaultZ: 3,
+        hasZ: true
+      }
+    })
+     const sketch = new Sketch({
+      layer: graphicsLayer,
+      view: view,
+      visibleElements: {
+        createTools: {
+          circle: false,
+          polyline: false,
+          point:false
+        }
+      },
+      viewModel: sketchViewModel
+    });
+    const expandSketch = new Expand({
+      expandIcon: "pencil",
+      expandTooltip: "Draw",
+      view: view,
+      content: sketch
+    })
+    view.ui.add(expandSketch, 'top-right')
+
+    // Shadow Cast
+    const shadow = new ShadowCast({
+      view: view,
+      visibleElements: {
+        'visualizationOptions': false
+      }
+    })
+    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: view,
+      content: shadow
+    })
+    view.ui.add(expandShadow, 'top-right')
   }
 
   render() {

web-apps/urban-sun-safe/src/main.ts

@@ -10,6 +10,7 @@ import * as Config from '../configs/config.json'
 import App from "./compontents/App";
 import AppStore from "./stores/AppStore";
 import WebScene from "@arcgis/core/WebScene";
+import GraphicsLayer from "@arcgis/core/layers/GraphicsLayer";
 
 console.log(`Using ArcGIS Maps SDK for JavaScript v${kernel.fullVersion}`);
 
@@ -48,16 +49,24 @@ const hriFLayer = new FeatureLayer({
   title: Config.services.hriFeatureServiceTitle
 });
 
+  const sketchLayer = new GraphicsLayer({
+    elevationInfo: {
+      mode: "relative-to-ground"
+    },
+    title: "Sketched geometries",
+    listMode: 'hide'
+  })
+
 
-const map = new WebScene({
+const webMap = new WebScene({
   basemap: Config.services.basemap, // basemap styles service
   ground: Config.services.elevation, //Elevation service
-  layers: [hriVtLayer, osmBuildingsSceneLayer, osmTreesSceneLayer, hriFLayer]
+  layers: [hriVtLayer, osmBuildingsSceneLayer, osmTreesSceneLayer, hriFLayer, sketchLayer]
 });
 
 const view = new SceneView({
   container: "viewDiv",
-  map: map,
+  map: webMap,
   camera: {
     position: {
       x: 7.10, //Longitude