fix: add prop to set unique id on element & clear the featureSource u…

…nless `clickFeatures` is enabled (#110)
theopensystemslab · Jan 14, 2022 · b675c9f · b675c9f
1 parent 43cedcb
commit b675c9f
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 21 deletions.
diff --git a/index.html b/index.html
@@ -14,7 +14,7 @@
     />
   </head>
   <body>
-    <my-map zoom="18" maxZoom="23" drawMode drawPointer="dot" />
+    <my-map zoom="18" maxZoom="23" drawMode drawPointer="dot" id="example-map" />
 
     <script>
       const map = document.querySelector("my-map");

diff --git a/src/my-map.ts b/src/my-map.ts
@@ -43,13 +43,13 @@ export class MyMap extends LitElement {
       height: 800px;
       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);
@@ -326,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);
@@ -406,12 +410,13 @@ export class MyMap extends LitElement {
     if (this.showFeaturesAtPoint && Boolean(this.osFeaturesApiKey)) {
       getFeaturesAtPoint(
         fromLonLat([this.longitude, this.latitude]),
-        this.osFeaturesApiKey
+        this.osFeaturesApiKey,
+        false
       );
 
       if (this.clickFeatures) {
         map.on("singleclick", (e) => {
-          getFeaturesAtPoint(e.coordinate, this.osFeaturesApiKey);
+          getFeaturesAtPoint(e.coordinate, this.osFeaturesApiKey, true);
         });
       }
 
@@ -462,7 +467,7 @@ export class MyMap extends LitElement {
   render() {
     return html`<script src="https://cdn.polyfill.io/v2/polyfill.min.js"></script>
       <link rel="stylesheet" href="https://cdn.skypack.dev/ol@^6.6.1/ol.css" />
-      <div id="map" tabindex="0" />`;
+      <div id="${this.id}" class="map" tabindex="0" />`;
   }
 
   // unmount the map

diff --git a/src/os-features.ts b/src/os-features.ts
@@ -33,8 +33,13 @@ 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<number>, apiKey: any) {
+export function getFeaturesAtPoint(
+  coord: Array<number>,
+  apiKey: any,
+  supportClickFeatures: boolean
+) {
   const xml = `
     <ogc:Filter>
       <ogc:Contains>
@@ -82,17 +87,28 @@ export function getFeaturesAtPoint(coord: Array<number>, apiKey: any) {
         featureProjection: "EPSG:3857",
       });
 
-      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);
-        }
-      });
+        });
+      }
 
       outlineSource.clear();
       outlineSource.addFeature(