feat: add property to show fill color for features

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

src/os-features.ts

@@ -3,22 +3,27 @@ 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";
 
 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({
       stroke: new Stroke({
         width: 3,
         color: color,
       }),
+      fill: new Fill({
+        color: featureFill ? hexToRgba(color, 0.2) : hexToRgba(color, 0),
+      }),
     }),
   });
 }