From f9e09606e0dbe338fae561d70e50df6f27d4ab3a Mon Sep 17 00:00:00 2001 From: Jessica McInchak Date: Thu, 13 Jan 2022 11:31:21 +0100 Subject: [PATCH 1/5] add prop to set unique id --- index.html | 13 ++++++++++--- src/my-map.ts | 15 +++++++++------ 2 files changed, 19 insertions(+), 9 deletions(-) diff --git a/index.html b/index.html index 26c0ff43..dd8f0e6b 100644 --- a/index.html +++ b/index.html @@ -14,9 +14,16 @@ /> - +
+
+ +
+
+ +
+
- --> diff --git a/src/my-map.ts b/src/my-map.ts index cfbaa3d2..ace834a5 100644 --- a/src/my-map.ts +++ b/src/my-map.ts @@ -39,17 +39,17 @@ export class MyMap extends LitElement { static styles = css` :host { display: block; - width: 800px; - height: 800px; + width: 500px; + height: 500px; position: relative; } - #map { + .map { height: 100%; opacity: 0; transition: opacity 0.25s; overflow: hidden; } - #map:focus { + .map:focus { outline: #d3d3d3 solid 0.15em; } .ol-control button { @@ -77,6 +77,9 @@ export class MyMap extends LitElement { `; // configurable component properties + @property({ type: String }) + id = "map"; + @property({ type: Number }) latitude = 51.507351; @@ -174,7 +177,7 @@ export class MyMap extends LitElement { // runs after the initial render firstUpdated() { - const target = this.renderRoot.querySelector("#map") as HTMLElement; + const target = this.renderRoot.querySelector(`#${this.id}`) as HTMLElement; const useVectorTiles = !this.disableVectorTiles && Boolean(this.osVectorTilesApiKey); @@ -462,7 +465,7 @@ export class MyMap extends LitElement { render() { return html` -
`; +
`; } // unmount the map From 3467df9402b856232cb3297fd26a4f3e7bb26abf Mon Sep 17 00:00:00 2001 From: Jessica McInchak Date: Thu, 13 Jan 2022 11:53:49 +0100 Subject: [PATCH 2/5] only features are duplicated? color & drawMode arenot synced --- index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.html b/index.html index dd8f0e6b..e8a4aba7 100644 --- a/index.html +++ b/index.html @@ -19,7 +19,7 @@
- +
From bcdf80ead90c9f490d11d3eee6f65db41444009c Mon Sep 17 00:00:00 2001 From: Jessica McInchak Date: Thu, 13 Jan 2022 12:24:12 +0100 Subject: [PATCH 3/5] temp console.logs for debugging --- src/my-map.ts | 3 ++- src/os-features.ts | 14 +++++++++++++- 2 files changed, 15 insertions(+), 2 deletions(-) diff --git a/src/my-map.ts b/src/my-map.ts index ace834a5..048116b6 100644 --- a/src/my-map.ts +++ b/src/my-map.ts @@ -409,7 +409,8 @@ export class MyMap extends LitElement { if (this.showFeaturesAtPoint && Boolean(this.osFeaturesApiKey)) { getFeaturesAtPoint( fromLonLat([this.longitude, this.latitude]), - this.osFeaturesApiKey + this.osFeaturesApiKey, + this.id ); if (this.clickFeatures) { diff --git a/src/os-features.ts b/src/os-features.ts index 9a340b0a..574ee779 100644 --- a/src/os-features.ts +++ b/src/os-features.ts @@ -34,7 +34,11 @@ export function makeFeatureLayer(color: string, featureFill: boolean) { * @param coord - xy coordinate * @param apiKey - Ordnance Survey Features API key, sign up here: https://osdatahub.os.uk/plans */ -export function getFeaturesAtPoint(coord: Array, apiKey: any) { +export function getFeaturesAtPoint( + coord: Array, + apiKey: any, + mapId?: string +) { const xml = ` @@ -68,6 +72,7 @@ export function getFeaturesAtPoint(coord: Array, apiKey: any) { .then((response) => response.json()) .then((data) => { if (!data.features.length) return; + console.log(`fetched features ${mapId}`, data); const properties = data.features[0].properties, validKeys = ["TOID", "DescriptiveGroup"]; @@ -82,6 +87,9 @@ export function getFeaturesAtPoint(coord: Array, apiKey: any) { featureProjection: "EPSG:3857", }); + console.log(`processed features ${mapId}`, features); + + // featureSource.clear(); features.forEach((feature) => { const id = feature.getProperties().TOID; const existingFeature = featureSource.getFeatureById(id); @@ -92,6 +100,8 @@ export function getFeaturesAtPoint(coord: Array, apiKey: any) { feature.setId(id); featureSource.addFeature(feature); } + + console.log(`featureSource ${mapId}`, featureSource.getFeatures()); }); outlineSource.clear(); @@ -104,6 +114,8 @@ export function getFeaturesAtPoint(coord: Array, apiKey: any) { }, null) ) ); + + console.log(`outlineSource ${mapId}`, outlineSource.getFeatures()); }) .catch((error) => console.log(error)); } From 9a08bb022785155c568cc8a3b0a20baecbc72d93 Mon Sep 17 00:00:00 2001 From: Jessica McInchak Date: Thu, 13 Jan 2022 17:57:49 +0100 Subject: [PATCH 4/5] featureSource.clear(), cleanup --- index.html | 13 +++---------- src/my-map.ts | 8 ++++---- src/os-features.ts | 40 ++++++++++++++++++++++------------------ 3 files changed, 29 insertions(+), 32 deletions(-) diff --git a/index.html b/index.html index e8a4aba7..5bf9c22f 100644 --- a/index.html +++ b/index.html @@ -14,16 +14,9 @@ /> -
-
- -
-
- -
-
+ - + diff --git a/src/my-map.ts b/src/my-map.ts index 048116b6..d7d302d1 100644 --- a/src/my-map.ts +++ b/src/my-map.ts @@ -39,8 +39,8 @@ export class MyMap extends LitElement { static styles = css` :host { display: block; - width: 500px; - height: 500px; + width: 800px; + height: 800px; position: relative; } .map { @@ -410,12 +410,12 @@ export class MyMap extends LitElement { getFeaturesAtPoint( fromLonLat([this.longitude, this.latitude]), this.osFeaturesApiKey, - this.id + false ); if (this.clickFeatures) { map.on("singleclick", (e) => { - getFeaturesAtPoint(e.coordinate, this.osFeaturesApiKey); + getFeaturesAtPoint(e.coordinate, this.osFeaturesApiKey, true); }); } diff --git a/src/os-features.ts b/src/os-features.ts index 574ee779..cb81be3f 100644 --- a/src/os-features.ts +++ b/src/os-features.ts @@ -33,11 +33,12 @@ export function makeFeatureLayer(color: string, featureFill: boolean) { * features containing the coordinates of the provided point * @param coord - xy coordinate * @param apiKey - Ordnance Survey Features API key, sign up here: https://osdatahub.os.uk/plans + * @param supportClickFeatures - whether the featureSource should support `clickFeatures` mode or be cleared upfront */ export function getFeaturesAtPoint( coord: Array, apiKey: any, - mapId?: string + supportClickFeatures: boolean ) { const xml = ` @@ -72,7 +73,6 @@ export function getFeaturesAtPoint( .then((response) => response.json()) .then((data) => { if (!data.features.length) return; - console.log(`fetched features ${mapId}`, data); const properties = data.features[0].properties, validKeys = ["TOID", "DescriptiveGroup"]; @@ -87,22 +87,28 @@ export function getFeaturesAtPoint( featureProjection: "EPSG:3857", }); - console.log(`processed features ${mapId}`, features); - - // featureSource.clear(); - features.forEach((feature) => { - const id = feature.getProperties().TOID; - const existingFeature = featureSource.getFeatureById(id); - - if (existingFeature) { - featureSource.removeFeature(existingFeature); - } else { + if (supportClickFeatures) { + // Allows for many features to be selected/deselected when `showFeaturesAtPoint` && `clickFeatures` are enabled + features.forEach((feature) => { + const id = feature.getProperties().TOID; + const existingFeature = featureSource.getFeatureById(id); + + if (existingFeature) { + featureSource.removeFeature(existingFeature); + } else { + feature.setId(id); + featureSource.addFeature(feature); + } + }); + } else { + // Clears the source upfront to prevent previously fetched results from persisting when only `showFeaturesAtPoint` is enabled + featureSource.clear(); + features.forEach((feature) => { + const id = feature.getProperties().TOID; feature.setId(id); featureSource.addFeature(feature); - } - - console.log(`featureSource ${mapId}`, featureSource.getFeatures()); - }); + }); + } outlineSource.clear(); outlineSource.addFeature( @@ -114,8 +120,6 @@ export function getFeaturesAtPoint( }, null) ) ); - - console.log(`outlineSource ${mapId}`, outlineSource.getFeatures()); }) .catch((error) => console.log(error)); } From bc793a2da9b7885009b8ca0a4331a27cb15b8fe8 Mon Sep 17 00:00:00 2001 From: Jessica McInchak Date: Fri, 14 Jan 2022 10:54:22 +0100 Subject: [PATCH 5/5] tweak order of drawingSource.clear() too --- src/my-map.ts | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/src/my-map.ts b/src/my-map.ts index d7d302d1..f2c98791 100644 --- a/src/my-map.ts +++ b/src/my-map.ts @@ -329,18 +329,19 @@ export class MyMap extends LitElement { // draw interactions if (this.drawMode) { - // check if single polygon feature was provided to load as the initial drawing + // make sure drawingSource is cleared upfront, even if drawGeojsonData is provided + drawingSource.clear(); + + // load an initial polygon into the drawing source if provided, or start from an empty drawing source const loadInitialDrawing = Object.keys(this.drawGeojsonData.geometry).length > 0; + if (loadInitialDrawing) { let feature = new GeoJSON().readFeature(this.drawGeojsonData, { featureProjection: "EPSG:3857", }); drawingSource.addFeature(feature); - // fit map to extent of intial feature, overriding zoom & lat/lng center fitToData(map, drawingSource, this.drawGeojsonDataBuffer); - } else { - drawingSource.clear(); } map.addLayer(drawingLayer);