call addTable when the layer is ready

esridc · Nov 15, 2024 · f221f54 · f221f54
1 parent 6c408d6
commit f221f54
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 24 deletions.
diff --git a/src/components.d.ts b/src/components.d.ts
@@ -7,7 +7,7 @@
 import { HTMLStencilElement, JSXBase } from "@stencil/core/internal";
 export namespace Components {
     interface HubCompassMap {
-        "addDatasetToMap": (datasetId: any) => Promise<void>;
+        "addDatasetToMap": (datasetId: any) => Promise<boolean>;
         /**
           * Basemap string Options: https://developers.arcgis.com/javascript/latest/api-reference/esri-WebMap.html#basemap
          */

diff --git a/src/components/hub-compass-map/hub-compass-map.tsx b/src/components/hub-compass-map/hub-compass-map.tsx
@@ -17,6 +17,7 @@ import Expand from "@arcgis/core/widgets/Expand";
 import BasemapGallery from "@arcgis/core/widgets/BasemapGallery";
 import * as projection from "@arcgis/core/geometry/projection.js";
 import SpatialReference from "@arcgis/core/geometry/SpatialReference.js";
+import * as reactiveUtils from "@arcgis/core/core/reactiveUtils.js";
 
 // import PortalItem from "@arcgis/core/portal/PortalItem";
 // import reactiveUtils from "@arcgis/core/reactiveUtils";
@@ -154,7 +155,7 @@ export class HubCompassMap {
   @Watch('datasetIds')
   async updateDatasets(newDatasetIds, oldDatasetIds) {
     console.debug("hub-compass-map: updateDatasets", {newDatasetIds, oldDatasetIds})
-    newDatasetIds.forEach(async (datasetId) => {
+    newDatasetIds.forEach((datasetId) => {
 
       // Don't add duplicate layers
       if(oldDatasetIds.includes(datasetId)) {
@@ -225,18 +226,24 @@ export class HubCompassMap {
   @Method()
   public async addDatasetToMap(datasetId) {
 
-    const datasetLayer = await new FeatureLayer({
+    const datasetLayer = new FeatureLayer({
       portalItem: {
         id: datasetId
       }
     });
+    this.webMap.add(datasetLayer);
 
-    datasetLayer.popupEnabled = true;
+    // wait for the layer to load:
+    await reactiveUtils.once(() => datasetLayer.loadStatus === "loaded")
 
-    this.webMap.add(datasetLayer);
+    // after the layer loads, add it to this.datasetEls:
+    datasetLayer.popupEnabled = true;
     this.datasetEls[datasetId] ||= {}
     this.datasetEls[datasetId].layer = datasetLayer;
 
+    this.addTable(datasetId, datasetLayer);
+
+    return true;
   }
 
   /**
@@ -246,24 +253,8 @@ export class HubCompassMap {
     if(!!this.session) {
       IdentityManager.registerToken(this.session);
     }
-  } 
-
-  /**
-   * Render tables after the elements are there
-   */
-  async componentDidRender() {
-    console.debug("hub-compass-map: componentDidRender", this.datasetEls)
-    if(this.showTable) {
-      Object.keys(this.datasetEls).forEach((datasetId) => {
-        if(!this.datasetEls[datasetId].table) {
-          this.addTable(datasetId, this.datasetEls[datasetId].layer)
-        }
-      })
-    }
-
   }
 
-
   mapEl: HTMLDivElement;
   tableEl: HTMLDivElement;
   webMap: WebMap;
@@ -385,10 +376,9 @@ export class HubCompassMap {
     //   }
     // );
 
+    // If there are incoming datasets, add it to the map
     if(!!this.datasetIds && this.datasetIds.length > 0) {
-      this.datasetIds.forEach((datasetId) => {
-        this.addDatasetToMap(datasetId);
-      })
+      this.datasetIds.forEach(ds => this.addDatasetToMap(ds));
     }
   }