feat: add property to show fill color for geojson

src/my-map.ts

@@ -7,19 +7,19 @@ 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 { Stroke, Style } from "ol/style";
+import { Fill, Stroke, Style } from "ol/style";
 import View from "ol/View";
 import { last } from "rambda";
 
 import { draw, drawingLayer, drawingSource, modify, snap } from "./draw";
-import { scaleControl } from "./scale-line"
+import { scaleControl } from "./scale-line";
 import {
   makeFeatureLayer,
   outlineSource,
   getFeaturesAtPoint,
 } from "./os-features";
 import { makeOsVectorTileBaseMap, makeRasterBaseMap } from "./os-layers";
-import { AreaUnitEnum, fitToData, formatArea } from "./utils";
+import { AreaUnitEnum, fitToData, formatArea, hexToRgba } from "./utils";
 
 @customElement("my-map")
 export class MyMap extends LitElement {
@@ -93,6 +93,9 @@ export class MyMap extends LitElement {
   @property({ type: String })
   geojsonColor = "#ff0000";
 
+  @property({ type: Boolean })
+  geojsonFill = false;
+
   @property({ type: Number })
   geojsonBuffer = 12;
 
@@ -112,11 +115,11 @@ export class MyMap extends LitElement {
   staticMode = false;
 
   @property({ type: String })
-  areaUnit: AreaUnitEnum = "m2"
+  areaUnit: AreaUnitEnum = "m2";
 
   @property({ type: String })
   ariaLabel = "Interactive map";
-  
+
   @property({ type: Boolean })
   showScale = false;
 
@@ -228,6 +231,11 @@ export class MyMap extends LitElement {
           color: this.geojsonColor,
           width: 3,
         }),
+        fill: new Fill({
+          color: this.geojsonFill
+            ? hexToRgba(this.geojsonColor, 0.2)
+            : hexToRgba(this.geojsonColor, 0),
+        }),
       }),
     });
 
@@ -265,7 +273,10 @@ export class MyMap extends LitElement {
             })
           );
 
-          this.dispatch("areaChange", formatArea(lastSketchGeom, this.areaUnit));
+          this.dispatch(
+            "areaChange",
+            formatArea(lastSketchGeom, this.areaUnit)
+          );
 
           // limit to drawing a single polygon, only allow modifications to existing shape
           map.removeInteraction(draw);
@@ -300,7 +311,10 @@ export class MyMap extends LitElement {
 
           // log total area of feature or merged features
           const data = outlineSource.getFeatures()[0].getGeometry();
-          console.log("feature(s) total area:", formatArea(data, this.areaUnit));
+          console.log(
+            "feature(s) total area:",
+            formatArea(data, this.areaUnit)
+          );
         }
       });
     }
@@ -317,10 +331,7 @@ export class MyMap extends LitElement {
   render() {
     return html`<script src="https://cdn.polyfill.io/v2/polyfill.min.js"></script>
       <link rel="stylesheet" href="https://cdn.skypack.dev/ol@^6.6.1/ol.css" />
-      <div 
-        id="map" 
-        tabindex="0"
-        aria-label=${this.ariaLabel} />`;
+      <div id="map" tabindex="0" aria-label=${this.ariaLabel} />`;
   }
 
   /**

src/utils.ts

@@ -1,10 +1,11 @@
+import { asArray, asString } from "ol/color";
 import { buffer } from "ol/extent";
 import Geometry from "ol/geom/Geometry";
 import Map from "ol/Map";
 import { Vector } from "ol/source";
 import { getArea } from "ol/sphere";
 
-export type AreaUnitEnum =  "m2" | "ha";
+export type AreaUnitEnum = "m2" | "ha";
 
 /**
  * Calculate & format the area of a polygon
@@ -43,3 +44,14 @@ export function fitToData(
   const extent = olSource.getExtent();
   return olMap.getView().fit(buffer(extent, bufferValue));
 }
+
+/**
+ * Translate a hex color to an rgba string with opacity
+ * @param hexColor - a hex color string
+ * @param alpha - a decimal to represent opacity
+ * @returns - a 'rgba(r,g,b,a)' string
+ */
+export function hexToRgba(hexColor: string, alpha: number) {
+  const [r, g, b] = Array.from(asArray(hexColor));
+  return asString([r, g, b, alpha]);
+}