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

@@ -50,6 +50,7 @@ import {
   hexToRgba,
   makeGeoJSON,
 } from "./utils";
+import { GeoJSONFeatureCollection } from "ol/format/GeoJSON";
 
 type MarkerImageEnum = "circle" | "pin";
 type ResetControlImageEnum = "unicode" | "trash";
@@ -130,7 +131,10 @@ export class MyMap extends LitElement {
   featureBuffer = 40;
 
   @property({ type: Boolean })
-  showMarker = false;
+  showGeojsonDataMarkers = false;
+
+  @property({ type: Boolean })
+  showCentreMarker = false;
 
   @property({ type: String })
   markerImage: MarkerImageEnum = "circle";
@@ -587,14 +591,9 @@ export class MyMap extends LitElement {
       }
     };
 
-    // show a marker at a point
-    if (this.showMarker) {
+    const showNewMarker = (lon: number, lat: number) => {
       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 +603,21 @@ export class MyMap extends LitElement {
       });
 
       map.addLayer(markerLayer);
+    };
+
+    // show a marker at a point
+    if (this.showCentreMarker) {
+      showNewMarker(this.markerLongitude, this.markerLatitude);
+    }
+
+    if (this.showGeojsonDataMarkers) {
+      this.geojsonData.features.forEach((feature: GeoJSONFeatureCollection) => {
+        console.log(feature.geometry.coordinates);
+        showNewMarker(
+          feature.geometry.coordinates[0],
+          feature.geometry.coordinates[1],
+        );
+      });
     }
 
     // XXX: force re-render for safari due to it thinking map is 0 height on load