Fixed dataset loading

esridc · Jul 17, 2023 · a42091e · a42091e
1 parent 8884e09
commit a42091e
Show file tree

Hide file tree

Showing 3 changed files with 84 additions and 15 deletions.
diff --git a/src/components.d.ts b/src/components.d.ts
@@ -23,6 +23,10 @@ export namespace Components {
           * Optional location to calculate service center. Changing this will update the point
          */
         "serviceAreaPoint": any;
+        /**
+          * Option to show layers
+         */
+        "showLayers": boolean;
         /**
           * Option to show search input
          */
@@ -66,6 +70,10 @@ declare namespace LocalJSX {
           * Optional location to calculate service center. Changing this will update the point
          */
         "serviceAreaPoint"?: any;
+        /**
+          * Option to show layers
+         */
+        "showLayers"?: boolean;
         /**
           * Option to show search input
          */

diff --git a/src/components/hub-compass-map/hub-compass-map.tsx b/src/components/hub-compass-map/hub-compass-map.tsx
@@ -10,6 +10,7 @@ import * as serviceArea from "@arcgis/core/rest/serviceArea.js";
 import * as networkService from "@arcgis/core/rest/networkService.js";
 // import TravelMode from "@arcgis/core/rest/support/TravelMode.js";
 import Search from "@arcgis/core/widgets/Search";
+import LayerList from "@arcgis/core/widgets/LayerList";
 
 @Component({
   tag: 'hub-compass-map',
@@ -38,26 +39,43 @@ export class HubCompassMap {
    */
   @Prop() datasetIds: string[] = [];
 
+  /** 
+   * Option to show layers
+   */
+  @Prop() showLayers: boolean = true;
+
   /** 
    * Option to show search input
    */
   @Prop() showSearch: boolean = true;
+
   /**
    * TODO: only add new datasets, likely by diffing with old list
    */
   @Watch('datasetIds')
-  updateDatasets(newDatasetIds) {
-    newDatasetIds.forEach((datasetId) => {
-      const datasetLayer = new FeatureLayer({
-        portalItem: {
-          id: datasetId
-        }
-      });
+  async updateDatasets(newDatasetIds, oldDatasetIds) {
+    console.debug("hub-compass-map: updateDatasets", {newDatasetIds, oldDatasetIds})
+    newDatasetIds.forEach(async (datasetId) => {
+
+      // Don't add duplicate layers
+      if(oldDatasetIds.includes(datasetId)) {
+        console.debug("hub-compass-map: updateDatasets duplicate", {datasetId})
+        return;
+      }
+      console.debug("hub-compass-map: updateDatasets adding", {datasetId})
+      this.addDatasetToMap(datasetId)
+    });
+  }
+
+  async addDatasetToMap(datasetId) {
 
-      console.debug('adding dataset layer', {datasetId, datasetLayer});
-
-      this.webMap.add(datasetLayer);
+    const datasetLayer = await new FeatureLayer({
+      portalItem: {
+        id: datasetId
+      }
     });
+
+    await this.webMap.add(datasetLayer);
   }
 
   /**
@@ -81,7 +99,7 @@ export class HubCompassMap {
   webMap: Map;
   mapView: MapView;
   serviceAreaUrl = "https://route-api.arcgis.com/arcgis/rest/services/World/ServiceAreas/NAServer/ServiceArea_World";
-  componentDidRender() {
+  componentDidLoad() {
     esriConfig.apiKey = "AAPK42ebee6b2e134974bffd492cdf7f365dXxAPfRSdf05kJ3AtuEevSfJqUEZ34Vhy2UfrxPtSXrQAfwL04Zij-GfOEQU9OD_9";
 
     this.webMap = new Map({
@@ -93,7 +111,7 @@ export class HubCompassMap {
       zoom: this.zoom, // Zoom level
       container: this.mapEl // Div element
     });
-
+    // Search
     if(this.showSearch) {
       const searchWidget = new Search({
         view: this.mapView
@@ -104,6 +122,16 @@ export class HubCompassMap {
         position: "top-right"
       });
     }
+    // LayerList
+    if(this.showLayers) {
+      const layerList = new LayerList({
+        view: this.mapView
+      });
+
+      // Add widget to the top right corner of the view
+      this.mapView.ui.add(layerList, "top-right");
+    }
+
     this.mapView.when(() => {
       // this.mapView.ui.components = (["compass", "zoom", "search"]);
 
@@ -118,7 +146,9 @@ export class HubCompassMap {
     });
 
     if(!!this.datasetIds && this.datasetIds.length > 0) {
-      this.updateDatasets(this.datasetIds)
+      this.datasetIds.forEach((datasetId) => {
+        this.addDatasetToMap(datasetId);
+      })
     }
   }
   private createServiceAreas(point) {

diff --git a/src/index.html b/src/index.html
@@ -14,6 +14,8 @@
     type="text/css"
     href="https://js.arcgis.com/calcite-components/1.4.3/calcite.css"
   />
+  <script type="module" src="https://js.arcgis.com/calcite-components/1.4.3/calcite.esm.js"></script>
+
   <link rel="stylesheet" href="https://js.arcgis.com/4.27/esri/themes/light/main.css">
   <!-- <script src="https://js.arcgis.com/4.27/"></script> -->
 
@@ -23,6 +25,20 @@
   <!-- Delayed render so we can get the API key from URL parameters -->
   <!-- <div id="viewDiv"></div> -->
   <div id="placeholder"></div>
+  <div
+    id="addDatasets"
+  >
+    <calcite-button 
+      onclick="addDatasets('f6c3c04113944f23a7993f2e603abaf2')"
+    >
+      Add Trees
+    </calcite-button>
+    <calcite-button 
+      onclick="addDatasets('4ac321b2d409438ebd76a6569ad94034')"
+    >
+      Add Schools
+    </calcite-button>
+  </div>
 
   <style>
     html, body, #viewDiv, #placeholder {
@@ -38,13 +54,22 @@
       width: 100%;
       border: 1px solid purple;
     }
+    #addDatasets {
+      position: absolute;
+      z-index: 100;
+      bottom: 20px;
+      left: 20px;
+      display: flex;
+      flex-direction: row;
+      gap: 10px;
+    }
 
   </style>
 
   <script>
     // Dynamically add the component so we can set URL or object properties
     const componentName = "hub-compass-map";
-
+    const datasets = ["f6c3c04113944f23a7993f2e603abaf2", "4ac321b2d409438ebd76a6569ad94034"]
     const placeholderEl = document.getElementById("placeholder");
     const componentEl = document.createElement( componentName );
 
@@ -54,8 +79,14 @@
     // componentEl.innerHTML = "Slot text";
     componentEl.center = [-77, 38.9];
     componentEl.zoom = 12;
-    componentEl.datasetIds = ["f6c3c04113944f23a7993f2e603abaf2", "4ac321b2d409438ebd76a6569ad94034"];
+    componentEl.datasetIds = ['7c6443b23d364689be9b34324e6c677d'];
+    componentEl.showLayers = true;
+    componentEl.showSearch = true;
 
+    function addDatasets(datasetId) {
+      console.log("addDatasets", componentEl.datasetIds.concat([datasetId]))
+      componentEl.datasetIds = componentEl.datasetIds.concat([datasetId]);
+    }
     placeholderEl.appendChild(componentEl);
   </script>