From 422e47bf7044707f66512060d74288d61c65863d Mon Sep 17 00:00:00 2001 From: James Lyne Date: Sat, 12 Dec 2020 21:37:40 +0000 Subject: [PATCH] Link button SVG icon --- src/assets/icons/link.svg | 63 +++++++++++++++++++++ src/assets/images/link.png | Bin 4159 -> 0 bytes src/components/map/control/LinkControl.vue | 29 +++------- src/leaflet/control/LinkControl.ts | 6 ++ src/scss/leaflet/_controls.scss | 1 - 5 files changed, 77 insertions(+), 22 deletions(-) create mode 100644 src/assets/icons/link.svg delete mode 100644 src/assets/images/link.png diff --git a/src/assets/icons/link.svg b/src/assets/icons/link.svg new file mode 100644 index 0000000..ce487f1 --- /dev/null +++ b/src/assets/icons/link.svg @@ -0,0 +1,63 @@ + + + + + +Created by potrace 1.10, written by Peter Selinger 2001-2011 + + + image/svg+xml + + + + + + + + diff --git a/src/assets/images/link.png b/src/assets/images/link.png deleted file mode 100644 index b7a7a1f894ac5e50aaa076fbda9df71b1f6190a5..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 4159 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 JPDHLkV1k77=~n;% diff --git a/src/components/map/control/LinkControl.vue b/src/components/map/control/LinkControl.vue index 700d747..8015827 100644 --- a/src/components/map/control/LinkControl.vue +++ b/src/components/map/control/LinkControl.vue @@ -1,32 +1,23 @@ - - \ No newline at end of file diff --git a/src/leaflet/control/LinkControl.ts b/src/leaflet/control/LinkControl.ts index 5dbb432..a36ace9 100644 --- a/src/leaflet/control/LinkControl.ts +++ b/src/leaflet/control/LinkControl.ts @@ -1,5 +1,6 @@ import L, {ControlOptions} from 'leaflet'; import {useStore} from "@/store"; +import linkIcon from '@/assets/icons/link.svg'; export class LinkControl extends L.Control { // @ts-ignore @@ -16,6 +17,11 @@ export class LinkControl extends L.Control { linkButton.type = 'button'; linkButton.title = 'Link'; + linkButton.innerHTML = ` + + + `; + linkButton.addEventListener('click', () => { const projection = useStore().state.currentProjection; console.log(projection.latLngToLocation(this._map!.getCenter(), 64)); diff --git a/src/scss/leaflet/_controls.scss b/src/scss/leaflet/_controls.scss index a2b9af9..28b1e0a 100644 --- a/src/scss/leaflet/_controls.scss +++ b/src/scss/leaflet/_controls.scss @@ -57,7 +57,6 @@ @extend %button; width: 5rem; height: 5rem; - background: $global-background url('../assets/images/link.png') no-repeat center; background-size: 3.2rem 3.2rem; }