Add services

.github/workflows/node.yml

@@ -16,12 +16,12 @@ jobs:
 
     steps:
     - uses: actions/checkout@v4
-    - name: Install Dependencies
-      working-directory: ./web-apps/urban-sun-safe
-      run: npm install
     - name: Audit Dependencies
       working-directory: ./web-apps/urban-sun-safe
       run: npm audit
+    - name: Install Dependencies
+      working-directory: ./web-apps/urban-sun-safe
+      run: npm install
     - name: Build
       working-directory: ./web-apps/urban-sun-safe
       run: npm run build

web-apps/urban-sun-safe/configs/_authconfig.json

@@ -0,0 +1,3 @@
+{
+    "apikey": "your_api_key"
+}

web-apps/urban-sun-safe/configs/config.json

@@ -0,0 +1,11 @@
+{
+    "title": "Urban Sun Safe",   
+    "services": {
+        "basemap": "arcgis/topographic",
+        "elevation": "world-elevation",
+        "osmBuildingsSceneLayerUrl": "https://basemaps3d.arcgis.com/arcgis/rest/services/OpenStreetMap3D_Buildings_v1/SceneServer",
+        "osmTreesSceneLayerUrl": "https://basemaps3d.arcgis.com/arcgis/rest/services/OpenStreetMap3D_Trees_Realistic_v1/SceneServer",
+        "hriVectorTileServiceUrl": "https://tiles.arcgis.com/tiles/L3oChwD1l1qISUDT/arcgis/rest/services/HRI_Bonn/VectorTileServer",
+        "hriFeatureServiceUrl": "https://services2.arcgis.com/L3oChwD1l1qISUDT/arcgis/rest/services/HRI_Bonn/FeatureServer/0"
+    }
+}

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

@@ -14,6 +14,7 @@ import "@esri/calcite-components/dist/components/calcite-menu-item";
 import "@esri/calcite-components/dist/components/calcite-navigation";
 import "@esri/calcite-components/dist/components/calcite-navigation-logo";
 import "@esri/calcite-components/dist/components/calcite-navigation-user";
+import * as Config from '../../configs/config.json'
 
 type HeaderProperties = Pick<Header, "store">;
 
@@ -65,7 +66,8 @@ class Header extends Widget<HeaderProperties> {
         <calcite-navigation slot="header">
           <calcite-navigation-logo
             slot="logo"
-            heading={this.store.map.portalItem.title}
+            // heading={this.store.map.portalItem.title}
+            heading={Config.title}
             description="ArcGIS Maps SDK for JavaScript"
             thumbnail="./icon-64.svg"
             onclick={() => {

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

@@ -1,31 +1,65 @@
-import WebScene from "@arcgis/core/WebScene";
 import * as kernel from "@arcgis/core/kernel";
+import Map from "@arcgis/core/Map";
 import SceneView from "@arcgis/core/views/SceneView";
+import SceneLayer from "@arcgis/core/layers/SceneLayer";
+import VectorTileLayer from "@arcgis/core/layers/VectorTileLayer";
+import FeatureLayer from "@arcgis/core/layers/FeatureLayer";
+import esriConfig from "@arcgis/core/config";
 import "@esri/calcite-components/dist/calcite/calcite.css";
+import * as AuthConfig from '../configs/authconfig.json';
+import * as Config from '../configs/config.json'
 import App from "./compontents/App";
 import AppStore from "./stores/AppStore";
+import WebScene from "@arcgis/core/WebScene";
 
 console.log(`Using ArcGIS Maps SDK for JavaScript v${kernel.fullVersion}`);
 
 // setAssetPath("https://js.arcgis.com/calcite-components/1.0.0-beta.77/assets");
 
-const params = new URLSearchParams(document.location.search.slice(1));
+esriConfig.apiKey = AuthConfig.apikey;
 
-const webSceneId = params.get("webscene") || "91b46c2b162c48dba264b2190e1dbcff";
+const hriVtLayer = new VectorTileLayer({
+  url: Config.services.hriVectorTileServiceUrl,
+  title: "hriVtLayer"
+})
 
-const map = new WebScene({
-  portalItem: {
-    id: webSceneId,
-    // portal: {
-    //   url: portalUrl,
-    // },
+const osmBuildingsSceneLayer = new SceneLayer({  
+    url: Config.services.osmBuildingsSceneLayerUrl,
+    popupEnabled: false
   },
+);
+
+const osmTreesSceneLayer = new SceneLayer({
+  url: Config.services.osmTreesSceneLayerUrl,
+  popupEnabled: false
+});
+
+const hriFLayer = new FeatureLayer({
+  url: Config.services.hriFeatureServiceUrl,
+  definitionExpression: "hri >= 9",
+  // opacity: 0.3,
+  title: "hriFLayer"
+});
+
+
+const map = new WebScene({
+  basemap: Config.services.basemap, // basemap styles service
+  ground: Config.services.elevation, //Elevation service
+  layers: [hriVtLayer, osmBuildingsSceneLayer, osmTreesSceneLayer, hriFLayer],
 });
 
 const view = new SceneView({
   container: "viewDiv",
-  map,
-});
+  map: map,
+  camera: {
+    position: {
+      x: 7.100000, //Longitude
+      y: 50.733334, //Latitude
+      z: 2000 //Meters
+    },
+    tilt: 75
+  }
+  });
 
 (window as any)["view"] = view;
 

web-apps/urban-sun-safe/src/stores/AppStore.ts

@@ -32,7 +32,7 @@ class AppStore extends Accessor {
 
     whenOnce(() => this.map).then(async (map) => {
       await map.load();
-      document.title = map.portalItem.title;
+      // document.title = map.portalItem.title;
 
       await map.loadAll();