From 37d7758d706102d2119ffa568d25ddf2362d3821 Mon Sep 17 00:00:00 2001 From: James Lyne Date: Sat, 12 Dec 2020 21:38:09 +0000 Subject: [PATCH] Layers button SVG icon --- src/assets/icons/layers.svg | 71 ++++++++++++++++++++++ src/assets/images/layers.png | Bin 3344 -> 0 bytes src/leaflet/control/DynmapLayerControl.ts | 25 ++++++++ src/leaflet/layer/LayerManager.ts | 5 +- src/scss/_placeholders.scss | 3 + src/scss/leaflet/_controls.scss | 3 +- 6 files changed, 103 insertions(+), 4 deletions(-) create mode 100644 src/assets/icons/layers.svg delete mode 100644 src/assets/images/layers.png create mode 100644 src/leaflet/control/DynmapLayerControl.ts diff --git a/src/assets/icons/layers.svg b/src/assets/icons/layers.svg new file mode 100644 index 0000000..ee70a94 --- /dev/null +++ b/src/assets/icons/layers.svg @@ -0,0 +1,71 @@ + + + + + +Created by potrace 1.10, written by Peter Selinger 2001-2011 + + + image/svg+xml + + + + + + + + + + diff --git a/src/assets/images/layers.png b/src/assets/images/layers.png deleted file mode 100644 index b7b3c59ce4c701699ff6fbe4a45376be4e4fd9ae..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 3344 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 diff --git a/src/leaflet/control/DynmapLayerControl.ts b/src/leaflet/control/DynmapLayerControl.ts new file mode 100644 index 0000000..6d8e328 --- /dev/null +++ b/src/leaflet/control/DynmapLayerControl.ts @@ -0,0 +1,25 @@ +import L, {Control, ControlOptions} from 'leaflet'; +import {useStore} from "@/store"; +import layers from '@/assets/icons/layers.svg'; +import LayersObject = Control.LayersObject; +import LayersOptions = Control.LayersOptions; + +export class DynmapLayerControl extends L.Control.Layers { + private _layersLink?: HTMLElement; + + constructor(baseLayers?: LayersObject, overlays?: LayersObject, options?: LayersOptions) { + super(baseLayers, overlays, options); + } + + onAdd(map: L.Map) { + // @ts-ignore + const element = super.onAdd(map); + + this._layersLink!.innerHTML = ` + + + `; + + return element; + } +} diff --git a/src/leaflet/layer/LayerManager.ts b/src/leaflet/layer/LayerManager.ts index 8892278..d20ec9c 100644 --- a/src/leaflet/layer/LayerManager.ts +++ b/src/leaflet/layer/LayerManager.ts @@ -1,14 +1,15 @@ import L from 'leaflet'; +import {DynmapLayerControl} from "@/leaflet/control/DynmapLayerControl"; export default class LayerManager { private showControl: boolean = false; - private readonly layerControl: L.Control.Layers; + private readonly layerControl: DynmapLayerControl; private readonly map: L.Map; constructor(map: L.Map, showControl?: boolean) { this.showControl = showControl || this.showControl; this.map = map; - this.layerControl = new L.Control.Layers({}, {},{ + this.layerControl = new DynmapLayerControl({}, {},{ position: 'topleft', }); diff --git a/src/scss/_placeholders.scss b/src/scss/_placeholders.scss index 2eee5db..71a3927 100644 --- a/src/scss/_placeholders.scss +++ b/src/scss/_placeholders.scss @@ -7,6 +7,9 @@ border-radius: $global-border-radius; cursor: pointer; display: block; + text-align: center; + position: relative; + transition: color 0.2s ease-in, background-color 0.2s ease-in; &:hover, &.active { background-color: #cccccc; diff --git a/src/scss/leaflet/_controls.scss b/src/scss/leaflet/_controls.scss index 28b1e0a..85769b5 100644 --- a/src/scss/leaflet/_controls.scss +++ b/src/scss/leaflet/_controls.scss @@ -28,10 +28,9 @@ } .leaflet-control-layers-toggle { + background-image: none; width: 5rem; height: 5rem; - background-image: url(../assets/images/layers.png); - background-size: 3.2rem; } .leaflet-top {