Added table display

src/components.d.ts

@@ -27,10 +27,18 @@ export namespace Components {
           * Option to show layers
          */
         "showLayers": boolean;
+        /**
+          * Option to show legend
+         */
+        "showLegend": boolean;
         /**
           * Option to show search input
          */
         "showSearch": boolean;
+        /**
+          * Option to show data table
+         */
+        "showTable": boolean;
         /**
           * Optional travel mode: walking, etc.  TODO fix travel mode type and values
          */
@@ -74,10 +82,18 @@ declare namespace LocalJSX {
           * Option to show layers
          */
         "showLayers"?: boolean;
+        /**
+          * Option to show legend
+         */
+        "showLegend"?: boolean;
         /**
           * Option to show search input
          */
         "showSearch"?: boolean;
+        /**
+          * Option to show data table
+         */
+        "showTable"?: boolean;
         /**
           * Optional travel mode: walking, etc.  TODO fix travel mode type and values
          */

src/components/hub-compass-map/hub-compass-map.css

@@ -7,7 +7,8 @@
 }
 
 #mapWrapper {
-  display: block;
+  display: flex;
+  flex-direction: column;
   height: 100%;
   width: 100%;
 }

src/components/hub-compass-map/hub-compass-map.tsx

@@ -11,6 +11,8 @@ 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";
+import Legend from "@arcgis/core/widgets/Legend";
+import FeatureTable from "@arcgis/core/widgets/FeatureTable";
 
 @Component({
   tag: 'hub-compass-map',
@@ -39,6 +41,16 @@ export class HubCompassMap {
    */
   @Prop() datasetIds: string[] = [];
 
+  /** 
+   * Option to show legend
+   */
+  @Prop() showLegend: boolean = true;
+
+  /**
+   * Option to show data table
+   */
+  @Prop() showTable: boolean = true;
+
   /** 
    * Option to show layers
    */
@@ -91,6 +103,9 @@ export class HubCompassMap {
     });
 
     await this.webMap.add(datasetLayer);
+    if(this.showTable) {
+      await this.addTable(datasetLayer);
+    }
   }
 
   /**
@@ -111,6 +126,7 @@ export class HubCompassMap {
   }
 
   mapEl: HTMLDivElement;
+  tableEl: HTMLDivElement;
   webMap: Map;
   mapView: MapView;
   serviceAreaUrl = "https://route-api.arcgis.com/arcgis/rest/services/World/ServiceAreas/NAServer/ServiceArea_World";
@@ -137,6 +153,15 @@ export class HubCompassMap {
         position: "top-right"
       });
     }
+    if(this.showLegend) {
+      const legend = new Legend({
+        view: this.mapView,
+        layerInfos:[]
+      });
+
+      // Add widget to the bottom right corner of the view
+      this.mapView.ui.add(legend, "bottom-right");      
+    }
     // LayerList
     if(this.showLayers) {
       const layerList = new LayerList({
@@ -166,6 +191,24 @@ export class HubCompassMap {
       })
     }
   }
+  private async addTable(featureLayer) {
+    return new FeatureTable({
+      view: this.mapView,
+      layer: featureLayer,
+      visibleElements: {
+        // Autocast to VisibleElements
+        menuItems: {
+          clearSelection: true,
+          refreshData: true,
+          toggleColumns: true,
+          selectedRecordsShowAllToggle: true,
+          zoomToSelection: true
+        }
+      },
+      container: this.tableEl
+    });
+  }
+
   private createServiceAreas(point) {
     // Remove any existing graphics
     this.mapView.graphics.removeAll();
@@ -225,10 +268,16 @@ export class HubCompassMap {
       <Host>
         <slot></slot>
         <div id="mapWrapper">
-        <div 
-          ref={(el) => this.mapEl = el as HTMLDivElement}
-          id="mapDiv"></div>
+          <div 
+            ref={(el) => this.mapEl = el as HTMLDivElement}
+            id="mapDiv">
           </div>
+          <div
+            ref={(el) => this.tableEl = el}
+            id="tableDiv"
+          ></div>
+        </div>
+
       </Host>
     );
   }

src/index.html

@@ -38,11 +38,17 @@
     >
       Add Schools
     </calcite-button>
+    <calcite-button 
+      onclick="addDatasets('3314d4acaaf84410aba319be81d69041')"
+    >
+      Add Table
+    </calcite-button>
     <calcite-button 
       onclick="moveMap([-75,39], 10)"
     >
       Move Map
-    </calcite-button>    
+    </calcite-button>
+
   </div>
 
   <style>
@@ -87,6 +93,7 @@
     componentEl.datasetIds = ['7c6443b23d364689be9b34324e6c677d'];
     componentEl.showLayers = true;
     componentEl.showSearch = true;
+    componentEl.showTable = true;
 
     function moveMap(center, zoom) {
       componentEl.center = center;