From 31241226823a7eadf39ce6e1fd5f29b305720c3f Mon Sep 17 00:00:00 2001
From: Jessica McInchak <jessica.mcinchak@gmail.com>
Date: Tue, 5 Jul 2022 13:02:54 +0200
Subject: [PATCH 1/2] add prop to highlight feature without using border

---
 src/components/my-map/index.ts       |  6 +++++-
 src/components/my-map/os-features.ts | 16 +++++++++++-----
 2 files changed, 16 insertions(+), 6 deletions(-)

diff --git a/src/components/my-map/index.ts b/src/components/my-map/index.ts
index 88112e25..fd0e3556 100644
--- a/src/components/my-map/index.ts
+++ b/src/components/my-map/index.ts
@@ -85,6 +85,9 @@ export class MyMap extends LitElement {
   @property({ type: Boolean })
   featureFill = false;
 
+  @property({ type: Boolean })
+  featureBorderNone = false;
+
   @property({ type: Number })
   featureBuffer = 40;
 
@@ -397,7 +400,8 @@ export class MyMap extends LitElement {
 
       const outlineLayer = makeFeatureLayer(
         this.featureColor,
-        this.featureFill
+        this.featureFill,
+        this.featureBorderNone
       );
       map.addLayer(outlineLayer);
 
diff --git a/src/components/my-map/os-features.ts b/src/components/my-map/os-features.ts
index cb81be3f..c49e1a46 100644
--- a/src/components/my-map/os-features.ts
+++ b/src/components/my-map/os-features.ts
@@ -13,14 +13,20 @@ const featureSource = new VectorSource();
 
 export const outlineSource = new VectorSource();
 
-export function makeFeatureLayer(color: string, featureFill: boolean) {
+export function makeFeatureLayer(
+  color: string,
+  featureFill: boolean,
+  borderNone: boolean
+) {
   return new VectorLayer({
     source: outlineSource,
     style: new Style({
-      stroke: new Stroke({
-        width: 3,
-        color: color,
-      }),
+      stroke: borderNone
+        ? undefined
+        : new Stroke({
+            width: 3,
+            color: color,
+          }),
       fill: new Fill({
         color: featureFill ? hexToRgba(color, 0.2) : hexToRgba(color, 0),
       }),

From fa32965da5729ae5adf7c464b6a841b918e352c2 Mon Sep 17 00:00:00 2001
From: Jessica McInchak <jessica.mcinchak@gmail.com>
Date: Tue, 5 Jul 2022 14:00:51 +0200
Subject: [PATCH 2/2] add showMarker properties

---
 src/components/my-map/index.ts | 36 +++++++++++++++++++++++++++++++++-
 1 file changed, 35 insertions(+), 1 deletion(-)

diff --git a/src/components/my-map/index.ts b/src/components/my-map/index.ts
index fd0e3556..1639de2c 100644
--- a/src/components/my-map/index.ts
+++ b/src/components/my-map/index.ts
@@ -1,13 +1,15 @@
 import { html, LitElement, unsafeCSS } from "lit";
 import { customElement, property } from "lit/decorators.js";
 import { Control, defaults as defaultControls } from "ol/control";
+import { Point } from "ol/geom";
 import { GeoJSON } from "ol/format";
+import { Feature } from "ol/index";
 import { defaults as defaultInteractions } from "ol/interaction";
 import { Vector as VectorLayer } from "ol/layer";
 import Map from "ol/Map";
 import { fromLonLat, transformExtent } from "ol/proj";
 import { Vector as VectorSource } from "ol/source";
-import { Fill, Stroke, Style } from "ol/style";
+import { Circle, Fill, Stroke, Style } from "ol/style";
 import View from "ol/View";
 import { last } from "rambda";
 
@@ -91,6 +93,18 @@ export class MyMap extends LitElement {
   @property({ type: Number })
   featureBuffer = 40;
 
+  @property({ type: Boolean })
+  showMarker = false;
+
+  @property({ type: Number })
+  markerLatitude = this.latitude;
+
+  @property({ type: Number })
+  markerLongitude = this.longitude;
+
+  @property({ type: String })
+  markerColor = "#000000";
+
   @property({ type: Object })
   geojsonData = {
     type: "FeatureCollection",
@@ -434,6 +448,26 @@ export class MyMap extends LitElement {
       });
     }
 
+    // show a marker at a point
+    if (this.showMarker) {
+      const markerPoint = new Point(
+        fromLonLat([this.markerLongitude, this.markerLatitude])
+      );
+      const markerLayer = new VectorLayer({
+        source: new VectorSource({
+          features: [new Feature(markerPoint)],
+        }),
+        style: new Style({
+          image: new Circle({
+            radius: 9,
+            fill: new Fill({ color: this.markerColor }),
+          }),
+        }),
+      });
+
+      map.addLayer(markerLayer);
+    }
+
     // XXX: force re-render for safari due to it thinking map is 0 height on load
     setTimeout(() => {
       window.dispatchEvent(new Event("resize"));