From 498a21b2ceb43a562c94755b9eed5f5de7977390 Mon Sep 17 00:00:00 2001 From: Andrew Turner Date: Thu, 19 Sep 2024 17:24:32 -0400 Subject: [PATCH] Added ability for feature layer --- src/components.d.ts | 17 +++++ .../hub-compass-map/hub-compass-map.tsx | 48 +++++++++++++ src/components/hub-compass-map/readme.md | 70 +++++++++++++++++++ src/index.html | 57 +++++++++++++++ 4 files changed, 192 insertions(+) create mode 100644 src/components/hub-compass-map/readme.md diff --git a/src/components.d.ts b/src/components.d.ts index 4e46a9e..6d5dd29 100644 --- a/src/components.d.ts +++ b/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; /** * 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) => 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) => void; /** * Service area distances in kilomenters Default to 1,5,10 minute based on 4.54km/hr speed */ diff --git a/src/components/hub-compass-map/hub-compass-map.tsx b/src/components/hub-compass-map/hub-compass-map.tsx index 8ff132c..3331043 100644 --- a/src/components/hub-compass-map/hub-compass-map.tsx +++ b/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, diff --git a/src/components/hub-compass-map/readme.md b/src/components/hub-compass-map/readme.md new file mode 100644 index 0000000..b6b3706 --- /dev/null +++ b/src/components/hub-compass-map/readme.md @@ -0,0 +1,70 @@ +# hub-compass-map + + + + + + +## 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` | + + +## Methods + +### `addDatasetToMap(datasetId: any) => Promise` + + + +#### Returns + +Type: `Promise` + + + +### `filterTables(geometry: any) => Promise` + + + +#### Returns + +Type: `Promise` + + + +### `saveMap(title?: string, snippet?: string) => Promise<{ id: string; url: string; }>` + + + +#### Returns + +Type: `Promise<{ id: string; url: string; }>` + + + + +---------------------------------------------- + +*Built with [StencilJS](https://stenciljs.com/)* diff --git a/src/index.html b/src/index.html index 96a1b82..e4cddb1 100644 --- a/src/index.html +++ b/src/index.html @@ -28,6 +28,12 @@
+ + Add Features + + @@ -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; + }