Show neighbouring properties as points on map

Creates a property showNeighbourMark which when switched on creates
a marker for each point passed in on the geojsonData property.

This will be useful in BOPS as it can be difficult to know when drawing
a polygon whether you have selected the neighbouring properties. BOPS
will pass the coordinates of the neighbours via the geojsonData prop.

src/components/my-map/index.ts

@@ -129,6 +129,9 @@ export class MyMap extends LitElement {
   @property({ type: Number })
   featureBuffer = 40;
 
+  @property({ type: Boolean })
+  showNeighbourMarkers = false;
+
   @property({ type: Boolean })
   showMarker = false;
 
@@ -587,14 +590,9 @@ export class MyMap extends LitElement {
       }
     };
 
-    // show a marker at a point
-    if (this.showMarker) {
+    const showNewMarker = (lon, lat) => {
       const markerPoint = new Point(
-        transform(
-          [this.markerLongitude, this.markerLatitude],
-          projection,
-          "EPSG:3857",
-        ),
+        transform([lon, lat], projection, "EPSG:3857"),
       );
       const markerLayer = new VectorLayer({
         source: new VectorSource({
@@ -604,6 +602,20 @@ export class MyMap extends LitElement {
       });
 
       map.addLayer(markerLayer);
+    };
+
+    // show a marker at a point
+    if (this.showMarker) {
+      showNewMarker(this.markerLongitude, this.markerLatitude);
+    }
+
+    if (this.showNeighbourMarkers) {
+      this.geojsonData.features.forEach((feature) => {
+        showNewMarker(
+          feature.geometry.coordinates[1],
+          feature.geometry.coordinates[0],
+        );
+      });
     }
 
     // XXX: force re-render for safari due to it thinking map is 0 height on load