From b1ddef73a11292470eee3e122f057365109be485 Mon Sep 17 00:00:00 2001
From: Jessica McInchak <jessica.mcinchak@gmail.com>
Date: Fri, 1 Oct 2021 11:21:17 +0200
Subject: [PATCH] allow fill colors for features too

---
 src/my-map.ts      | 8 +++++++-
 src/os-features.ts | 9 +++++++--
 2 files changed, 14 insertions(+), 3 deletions(-)

diff --git a/src/my-map.ts b/src/my-map.ts
index 4b0b2a15..aa632469 100644
--- a/src/my-map.ts
+++ b/src/my-map.ts
@@ -81,6 +81,9 @@ export class MyMap extends LitElement {
   @property({ type: String })
   featureColor = "#0000ff";
 
+  @property({ type: Boolean })
+  featureFill = false;
+
   @property({ type: Number })
   featureBuffer = 40;
 
@@ -297,7 +300,10 @@ export class MyMap extends LitElement {
         });
       }
 
-      const outlineLayer = makeFeatureLayer(this.featureColor);
+      const outlineLayer = makeFeatureLayer(
+        this.featureColor,
+        this.featureFill
+      );
       map.addLayer(outlineLayer);
 
       // ensure getFeaturesAtPoint has fetched successfully
diff --git a/src/os-features.ts b/src/os-features.ts
index 823505b9..9a340b0a 100644
--- a/src/os-features.ts
+++ b/src/os-features.ts
@@ -3,7 +3,9 @@ import { GeoJSON } from "ol/format";
 import { Vector as VectorLayer } from "ol/layer";
 import { toLonLat } from "ol/proj";
 import { Vector as VectorSource } from "ol/source";
-import { Stroke, Style } from "ol/style";
+import { Fill, Stroke, Style } from "ol/style";
+
+import { hexToRgba } from "./utils";
 
 const featureServiceUrl = "https://api.os.uk/features/v1/wfs";
 
@@ -11,7 +13,7 @@ const featureSource = new VectorSource();
 
 export const outlineSource = new VectorSource();
 
-export function makeFeatureLayer(color: string) {
+export function makeFeatureLayer(color: string, featureFill: boolean) {
   return new VectorLayer({
     source: outlineSource,
     style: new Style({
@@ -19,6 +21,9 @@ export function makeFeatureLayer(color: string) {
         width: 3,
         color: color,
       }),
+      fill: new Fill({
+        color: featureFill ? hexToRgba(color, 0.2) : hexToRgba(color, 0),
+      }),
     }),
   });
 }