From feecab5d29be1b1e8513078b073735d890fa07fc Mon Sep 17 00:00:00 2001 From: Jessica McInchak Date: Fri, 14 Oct 2022 10:13:34 +0200 Subject: [PATCH] add resetControlImage prop for specifying custom icons --- src/components/my-map/controls.ts | 34 ++++++++++++++++++++++- src/components/my-map/icons/README.md | 2 +- src/components/my-map/icons/erase.svg | 10 +++++++ src/components/my-map/icons/reset.svg | 9 ++++++ src/components/my-map/icons/trash-can.svg | 12 ++++++++ src/components/my-map/index.ts | 34 ++++++++--------------- src/components/my-map/styles.scss | 4 +++ 7 files changed, 81 insertions(+), 24 deletions(-) create mode 100644 src/components/my-map/icons/erase.svg create mode 100644 src/components/my-map/icons/reset.svg create mode 100644 src/components/my-map/icons/trash-can.svg diff --git a/src/components/my-map/controls.ts b/src/components/my-map/controls.ts index 03a853d3..5e4f98d6 100644 --- a/src/components/my-map/controls.ts +++ b/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 }); +} diff --git a/src/components/my-map/icons/README.md b/src/components/my-map/icons/README.md index 16933184..0000fbbd 100644 --- a/src/components/my-map/icons/README.md +++ b/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) diff --git a/src/components/my-map/icons/erase.svg b/src/components/my-map/icons/erase.svg new file mode 100644 index 00000000..4ee69cf5 --- /dev/null +++ b/src/components/my-map/icons/erase.svg @@ -0,0 +1,10 @@ + + + + + erase + + + + \ No newline at end of file diff --git a/src/components/my-map/icons/reset.svg b/src/components/my-map/icons/reset.svg new file mode 100644 index 00000000..e24ca76d --- /dev/null +++ b/src/components/my-map/icons/reset.svg @@ -0,0 +1,9 @@ + + + + + reset + + + diff --git a/src/components/my-map/icons/trash-can.svg b/src/components/my-map/icons/trash-can.svg new file mode 100644 index 00000000..4794e4d7 --- /dev/null +++ b/src/components/my-map/icons/trash-can.svg @@ -0,0 +1,12 @@ + + + + + trash-can + + + + + + \ No newline at end of file diff --git a/src/components/my-map/index.ts b/src/components/my-map/index.ts index 412369df..f2448da3 100644 --- a/src/components/my-map/index.ts +++ b/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,6 +22,7 @@ import { DrawPointerEnum, snap, } from "./drawing"; +import pinIcon from "./icons/poi-alt.svg"; import { getFeaturesAtPoint, makeFeatureLayer, @@ -28,17 +30,16 @@ import { } 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 diff --git a/src/components/my-map/styles.scss b/src/components/my-map/styles.scss index 51022600..12f5e916 100644 --- a/src/components/my-map/styles.scss +++ b/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;