Added ability for feature layer

src/components.d.ts

@@ -16,6 +16,10 @@ export namespace Components {
           * Optional array of datasets to add to map
          */
         "datasetIds": string[];
+        /**
+          * Optional features to display on the map See https://developers.arcgis.com/javascript/latest/sample-code/layers-featurelayer-collection/
+         */
+        "features": any[];
         "filterTables": (geometry: any) => Promise<void>;
         /**
           * Optional Map id to display
@@ -93,11 +97,24 @@ declare namespace LocalJSX {
           * Optional array of datasets to add to map
          */
         "datasetIds"?: string[];
+        /**
+          * Optional features to display on the map See https://developers.arcgis.com/javascript/latest/sample-code/layers-featurelayer-collection/
+         */
+        "features"?: any[];
         /**
           * Optional Map id to display
          */
         "mapId"?: string;
         "onMapSaved"?: (event: HubCompassMapCustomEvent<any>) => void;
+        /**
+          * Event emitted when the map view's extent changes due to panning or zooming.
+          * @event mapViewExtentChanged
+          * @type {CustomEvent<{ extent: __esri.Extent, center: __esri.Point, zoom: number }>}
+          * @property {__esri.Extent} extent - The new extent of the map view.
+          * @property {__esri.Point} center - The new center point of the map view.
+          * @property {number} zoom - The new zoom level of the map view.
+         */
+        "onMapViewExtentChanged"?: (event: HubCompassMapCustomEvent<any>) => void;
         /**
           * Service area distances in kilomenters Default to 1,5,10 minute based on 4.54km/hr speed
          */

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

@@ -15,6 +15,9 @@ import Legend from "@arcgis/core/widgets/Legend";
 import FeatureTable from "@arcgis/core/widgets/FeatureTable";
 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 PortalItem from "@arcgis/core/portal/PortalItem";
 // import reactiveUtils from "@arcgis/core/reactiveUtils";
 
@@ -32,6 +35,30 @@ export class HubCompassMap {
    */
   @Prop() mapId: string = null;
 
+  /**
+   * Optional features to display on the map
+   * See https://developers.arcgis.com/javascript/latest/sample-code/layers-featurelayer-collection/
+   */
+  @Prop() features: any[] = null;
+
+  @Watch('features')
+  public async addFeatures(newFeatures) {
+    if (newFeatures) {
+
+      // Now build feature layer and add to map
+      const featureLayer = await new FeatureLayer({
+        title: newFeatures.title,
+        source: newFeatures.source,
+        fields: newFeatures.fields,
+        objectIdField: newFeatures.objectIdField,
+        geometryType: newFeatures.geometryType,
+        // spatialReference: newFeatures.spatialReference,
+        // renderer: newFeatures.renderer || null
+      });
+
+      this.webMap.add(featureLayer);
+    }
+  }
   /**
    * Optional [longitude, latitude] map center
    */
@@ -150,6 +177,18 @@ export class HubCompassMap {
     });
   }
 
+  /**
+   * Event emitted when the map view's extent changes due to panning or zooming.
+   * 
+   * @event mapViewExtentChanged
+   * @type {CustomEvent<{ extent: __esri.Extent, center: __esri.Point, zoom: number }>}
+   * @property {__esri.Extent} extent - The new extent of the map view.
+   * @property {__esri.Point} center - The new center point of the map view.
+   * @property {number} zoom - The new zoom level of the map view.
+   */
+  @Event() mapViewExtentChanged: EventEmitter;
+
+
   @Event() mapSaved: EventEmitter;
   @Method()
   public async saveMap(title:string = "New webmap", snippet:string = "Created by Hub AI assistant") {
@@ -316,6 +355,15 @@ export class HubCompassMap {
         this.createServiceAreas(event.mapPoint);
       }
     });
+    this.mapView.watch("extent", () => {
+      let outSpatialReference = new SpatialReference({
+        wkid: 4326 
+      });
+      const extent = projection.project(this.mapView.extent, outSpatialReference);
+      const center = projection.project(this.mapView.center, outSpatialReference);
+      const zoom = this.mapView.zoom;
+      this.mapViewExtentChanged.emit({ extent, center, zoom });
+    });
 
     // reactiveUtils.when(
     //   () => this.mapView.stationary === true,

src/components/hub-compass-map/readme.md

@@ -0,0 +1,70 @@
+# hub-compass-map
+
+
+
+<!-- Auto Generated Below -->
+
+
+## Properties
+
+| Property            | Attribute            | Description                                                                                                                               | Type               | Default              |
+| ------------------- | -------------------- | ----------------------------------------------------------------------------------------------------------------------------------------- | ------------------ | -------------------- |
+| `center`            | --                   | Optional [longitude, latitude] map center                                                                                                 | `[number, number]` | `[0,0]`              |
+| `datasetIds`        | --                   | Optional array of datasets to add to map                                                                                                  | `string[]`         | `[]`                 |
+| `mapId`             | `map-id`             | Optional Map id to display                                                                                                                | `string`           | `null`               |
+| `serviceAreaBreaks` | --                   | Service area distances in kilomenters Default to 1,5,10 minute based on 4.54km/hr speed                                                   | `number[]`         | `[0.07, 0.37, 0.75]` |
+| `serviceAreaPoint`  | `service-area-point` | Optional location to calculate service center. Changing this will update the point                                                        | `any`              | `null`               |
+| `session`           | `session`            | OAuth2 session information https://developers.arcgis.com/javascript/latest/api-reference/esri-identity-IdentityManager.html#registerToken | `any`              | `null`               |
+| `showBasemaps`      | `show-basemaps`      | Option to show basemap selection                                                                                                          | `boolean`          | `false`              |
+| `showLayers`        | `show-layers`        | Option to show layers                                                                                                                     | `boolean`          | `false`              |
+| `showLegend`        | `show-legend`        | Option to show legend                                                                                                                     | `boolean`          | `true`               |
+| `showSearch`        | `show-search`        | Option to show search input                                                                                                               | `boolean`          | `true`               |
+| `showServiceAreas`  | `show-service-areas` | Option to show service areas on map click                                                                                                 | `boolean`          | `false`              |
+| `showTable`         | `show-table`         | Option to show data table                                                                                                                 | `boolean`          | `true`               |
+| `travelMode`        | `travel-mode`        | Optional travel mode: walking, etc.  TODO fix travel mode type and values                                                                 | `any`              | `null`               |
+| `zoom`              | `zoom`               | Optional map zoom level                                                                                                                   | `number`           | `10`                 |
+
+
+## Events
+
+| Event      | Description | Type               |
+| ---------- | ----------- | ------------------ |
+| `mapSaved` |             | `CustomEvent<any>` |
+
+
+## Methods
+
+### `addDatasetToMap(datasetId: any) => Promise<void>`
+
+
+
+#### Returns
+
+Type: `Promise<void>`
+
+
+
+### `filterTables(geometry: any) => Promise<void>`
+
+
+
+#### Returns
+
+Type: `Promise<void>`
+
+
+
+### `saveMap(title?: string, snippet?: string) => Promise<{ id: string; url: string; }>`
+
+
+
+#### Returns
+
+Type: `Promise<{ id: string; url: string; }>`
+
+
+
+
+----------------------------------------------
+
+*Built with [StencilJS](https://stenciljs.com/)*

src/index.html

@@ -28,6 +28,12 @@
   <div
     id="addDatasets"
   >
+    <calcite-button 
+    onclick="addFeatures()"
+    >
+    Add Features
+  </calcite-button>
+
   <calcite-button 
       onclick="addDatasets('7c6443b23d364689be9b34324e6c677d')"
     >
@@ -120,6 +126,57 @@
       componentEl.datasetIds = componentEl.datasetIds.concat([datasetId]);
     }
     placeholderEl.appendChild(componentEl);
+
+    componentEl.addEventListener("mapViewExtentChanged", (event) => {
+      console.log("mapViewExtentChanged", event.detail);
+    });
+    function addFeatures() {
+      const features = [];
+      for(let i = 0; i < 10; i++) {
+        let geometry = {
+          type: "point",  
+          x: -77.0 + i,
+          y: 38.9 + i,
+          spatialReference: {
+              "wkid": 4326
+          }
+        };
+
+        let symbol = {
+          type: "simple",  
+          color: [226, 119, 40]
+        };
+
+        let attributes = {
+          OBJECTID: i,
+          url: "TransCanada"
+        };
+
+        let graphic = {
+          geometry,
+          symbol,
+          attributes
+        };
+
+        features.push(graphic);
+      }
+
+      const featureLayer = {
+        title: "Discussions",
+        source: features,
+        fields: [{
+          name: "OBJECTID",
+          type: "oid"
+        }, {
+          name: "url",
+          type: "string"
+        }],
+        objectIdField: "OBJECTID",
+        geometryType: "point"
+        // renderer: newFeatures.renderer
+      }
+      componentEl.features = featureLayer;
+    }
   </script>
 
 </body>