feat: add resetControlImage prop for testing custom icons (#209)

src/components/my-map/controls.ts

@@ -1,6 +1,9 @@
-import "ol/ol.css";
 import { Control, ScaleLine } from "ol/control";
+import "ol/ol.css";
+import eraseIcon from "./icons/erase.svg";
 import northArrowIcon from "./icons/north-arrow-n.svg";
+import resetIcon from "./icons/reset.svg";
+import trashCanIcon from "./icons/trash-can.svg";
 
 export function scaleControl(useScaleBarStyle: boolean) {
   return new ScaleLine({
@@ -23,3 +26,32 @@ export function northArrowControl() {
 
   return new Control({ element: element });
 }
+
+export function resetControl(listener: any, icon: string) {
+  const button = document.createElement("button");
+  button.title = "Reset map view";
+
+  if (icon === "unicode") {
+    button.innerHTML = "↻";
+  } else {
+    const propToSVGLookup: any = {
+      reset: resetIcon,
+      trash: trashCanIcon,
+      erase: eraseIcon,
+    };
+    const image = document.createElement("img");
+    image.className = "reset-icon";
+    image.src = propToSVGLookup[icon];
+    button.appendChild(image);
+  }
+
+  // this is an internal event listener, so doesn't need to be removed later
+  // ref https://lit.dev/docs/components/lifecycle/#disconnectedcallback
+  button.addEventListener("click", listener, false);
+
+  const element = document.createElement("div");
+  element.className = "reset-control ol-unselectable ol-control";
+  element.appendChild(button);
+
+  return new Control({ element: element });
+}

src/components/my-map/icons/README.md

@@ -1 +1 @@
-Icons are sourced from [Font-GIS](https://viglino.github.io/font-gis/?fg=arrow-o)
+Icons are sourced from [Font-GIS](https://viglino.github.io/font-gis/?fg=arrow-o) and [Carbon Design System](https://carbondesignsystem.com/guidelines/icons/library)

src/components/my-map/index.ts

@@ -1,18 +1,19 @@
 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 { defaults as defaultControls } from "ol/control";
 import { GeoJSON } from "ol/format";
+import { Point } from "ol/geom";
 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 { ProjectionLike, transform, transformExtent } from "ol/proj";
 import { Vector as VectorSource } from "ol/source";
-import { Circle, Fill, Stroke, Style, Icon } from "ol/style";
+import { Circle, Fill, Icon, Stroke, Style } from "ol/style";
 import View from "ol/View";
 import { last } from "rambda";
 
+import { northArrowControl, scaleControl, resetControl } from "./controls";
 import {
   configureDraw,
   configureModify,
@@ -21,24 +22,24 @@ import {
   DrawPointerEnum,
   snap,
 } from "./drawing";
+import pinIcon from "./icons/poi-alt.svg";
 import {
   getFeaturesAtPoint,
   makeFeatureLayer,
   outlineSource,
 } from "./os-features";
 import { makeOsVectorTileBaseMap, makeRasterBaseMap } from "./os-layers";
 import { proj27700, ProjectionEnum } from "./projections";
-import { scaleControl, northArrowControl } from "./controls";
 import {
   getSnapPointsFromVectorTiles,
   pointsLayer,
   pointsSource,
 } from "./snapping";
-import { AreaUnitEnum, fitToData, formatArea, hexToRgba } from "./utils";
 import styles from "./styles.scss";
-import pinIcon from "./icons/poi-alt.svg";
+import { AreaUnitEnum, fitToData, formatArea, hexToRgba } from "./utils";
 
 type MarkerImageEnum = "circle" | "pin";
+type ResetControlImageEnum = "unicode" | "reset" | "trash" | "erase";
 
 @customElement("my-map")
 export class MyMap extends LitElement {
@@ -145,6 +146,9 @@ export class MyMap extends LitElement {
   @property({ type: Boolean })
   hideResetControl = false;
 
+  @property({ type: String })
+  resetControlImage: ResetControlImageEnum = "unicode";
+
   @property({ type: Boolean })
   staticMode = false;
 
@@ -242,11 +246,7 @@ export class MyMap extends LitElement {
       map.addControl(northArrowControl());
     }
 
-    // add a custom 'reset' control below zoom
-    const button = document.createElement("button");
-    button.innerHTML = "↻";
-    button.title = "Reset map view";
-
+    // add a custom 'reset' control to the map
     const handleReset = () => {
       if (this.showFeaturesAtPoint) {
         fitToData(map, outlineSource, this.featureBuffer);
@@ -271,18 +271,8 @@ export class MyMap extends LitElement {
       }
     };
 
-    // this is an internal event listener, so doesn't need to be removed later
-    // ref https://lit.dev/docs/components/lifecycle/#disconnectedcallback
-    button.addEventListener("click", handleReset, false);
-
-    const element = document.createElement("div");
-    element.className = "reset-control ol-unselectable ol-control";
-    element.appendChild(button);
-
-    const ResetControl = new Control({ element: element });
-
     if (!this.hideResetControl) {
-      map.addControl(ResetControl);
+      map.addControl(resetControl(handleReset, this.resetControlImage));
     }
 
     // Apply aria-labels to OL Controls for accessibility

src/components/my-map/styles.scss

@@ -30,6 +30,10 @@
   top: 114px;
   left: 0.5em;
 }
+.reset-control img {
+  width: 30px;
+  height: auto;
+}
 .north-arrow-control img {
   width: 44px;
   height: auto;