Link button SVG icon
This commit is contained in:
James Lyne
parent
9a0f7eebc6
commit
422e47bf70
63
src/assets/icons/link.svg
Normal file
63
src/assets/icons/link.svg
Normal file
@ -0,0 +1,63 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<svg
|
||||
xmlns:dc="http://purl.org/dc/elements/1.1/"
|
||||
xmlns:cc="http://creativecommons.org/ns#"
|
||||
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
|
||||
xmlns:svg="http://www.w3.org/2000/svg"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||
version="1.0"
|
||||
width="285.60129pt"
|
||||
height="282pt"
|
||||
viewBox="0 0 285.60129 282"
|
||||
preserveAspectRatio="xMidYMid meet"
|
||||
id="svg8"
|
||||
sodipodi:docname="Link.svg"
|
||||
inkscape:version="1.0 (4035a4fb49, 2020-05-01)">
|
||||
<defs
|
||||
id="defs12" />
|
||||
<sodipodi:namedview
|
||||
inkscape:document-rotation="0"
|
||||
pagecolor="#ffffff"
|
||||
bordercolor="#666666"
|
||||
borderopacity="1"
|
||||
objecttolerance="10"
|
||||
gridtolerance="10"
|
||||
guidetolerance="10"
|
||||
inkscape:pageopacity="0"
|
||||
inkscape:pageshadow="2"
|
||||
inkscape:window-width="2560"
|
||||
inkscape:window-height="1377"
|
||||
id="namedview10"
|
||||
showgrid="false"
|
||||
inkscape:zoom="2.625"
|
||||
inkscape:cx="173.86323"
|
||||
inkscape:cy="189.04846"
|
||||
inkscape:window-x="-8"
|
||||
inkscape:window-y="-8"
|
||||
inkscape:window-maximized="1"
|
||||
inkscape:current-layer="svg8" />
|
||||
<metadata
|
||||
id="metadata2">
|
||||
Created by potrace 1.10, written by Peter Selinger 2001-2011
|
||||
<rdf:RDF>
|
||||
<cc:Work
|
||||
rdf:about="">
|
||||
<dc:format>image/svg+xml</dc:format>
|
||||
<dc:type
|
||||
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
|
||||
</cc:Work>
|
||||
</rdf:RDF>
|
||||
</metadata>
|
||||
<g
|
||||
transform="matrix(0.1,0,0,-0.1,-1.2664294,284)"
|
||||
fill="#000000"
|
||||
stroke="none"
|
||||
id="g6">
|
||||
<path
|
||||
d="m 2268,2793 c -129.3986,-120.4704 -255.0882,-244.2852 -358,-343 -417,-399 -408,-389 -395,-460 8,-41 26,-76 78,-147 20,-29 37,-58 37,-65 0,-12 -96,-106 -451,-445 -87,-83 -109,-95 -138,-69 -41,35 -135,76 -178,76 -44,0 -68,-16 -168,-115 C 684,1214 556,1090 410,951 -7,551 1,560 19,479 40,385 196,196 320,115 428,43 479,20 527,20 c 44,0 68,16 168,115 11,11 139,135 285,275 417,399 408,389 395,460 -8,41 -26,76 -77,147 -21,29 -38,58 -38,65 0,12 96,106 451,446 87,82 109,94 138,68 41,-35 135,-76 178,-76 44,0 68,16 168,115 11,11 133,128 270,260 138,132 283,272 323,312 71.6964,68.4528 78.0389,68.9924 80.6358,139.6662 0.4643,66.1306 -2.7476,64.8883 -21.6358,98.3338 -116,195 -360,395 -484,395 -38,0 -50,-6 -95,-47 z m 203,-162 c 41,-27 97,-73 125,-102 56,-59 124,-152 124,-170 0,-7 -15,-26 -33,-43 -17,-17 -149,-143 -292,-281 -143,-137 -285,-274 -315,-302 -30,-29 -62,-53 -70,-53 -26,0 -80,39 -80,58 0,10 15,33 34,51 19,18 42,51 52,72 22.4241,53.049 -10.0858,98.9814 -27.4286,111.7143 -20.9827,15.4053 -60.0284,30.3762 -94.5714,13.2857 -20,-9 -58,-35 -85,-58 -27,-22 -54,-38 -62,-35 -16,6 -77,92 -77,109 0,6 15,25 33,42 17,17 149,144 292,281 143,138 285,274 315,302 30,29 62,53 71,53 9,0 50,-22 90,-49 z M 919,1166 c 15,-8 33,-22 41,-31 11,-13 9,-20 -12,-43 -68,-73 -77,-130 -30,-175 44,-42 95,-38 156,13 27,23 56,40 64,38 18,-3 80,-86 81,-107 1,-8 -14,-28 -32,-45 C 982.08475,620.14922 811.01466,452.35084 595,247 c -38,-37 -77,-67 -86,-67 -27,0 -160,94 -215,151 -56,59 -124,152 -124,170 0,7 15,26 33,43 211.50606,201.63044 383.23678,373.30695 607,583 60,57 67,60 109,39 z"
|
||||
id="path4"
|
||||
sodipodi:nodetypes="ccccsccsccccsccccsccscccccscccscccsssccccsscccsccccccccccscsccc" />
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 4.1 KiB |
@ -1,32 +1,23 @@
|
||||
<script lang="ts">
|
||||
import {defineComponent} from "@vue/runtime-core";
|
||||
import L from 'leaflet';
|
||||
import {defineComponent, onMounted, onUnmounted} from "@vue/runtime-core";
|
||||
import {LinkControl} from "@/leaflet/control/LinkControl";
|
||||
import DynmapMap from "@/leaflet/DynmapMap";
|
||||
|
||||
export default defineComponent({
|
||||
props: {
|
||||
leaflet: {
|
||||
type: Object as () => L.Map,
|
||||
type: Object as () => DynmapMap,
|
||||
required: true,
|
||||
}
|
||||
},
|
||||
|
||||
setup() {
|
||||
setup(props) {
|
||||
const control = new LinkControl({
|
||||
position: 'bottomleft',
|
||||
});
|
||||
|
||||
return {
|
||||
control,
|
||||
}
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.leaflet.addControl(this.control);
|
||||
},
|
||||
|
||||
unmounted() {
|
||||
this.leaflet.removeControl(this.control);
|
||||
onMounted(() => props.leaflet.addControl(control));
|
||||
onUnmounted(() => props.leaflet.removeControl(control));
|
||||
},
|
||||
|
||||
render() {
|
||||
@ -34,7 +25,3 @@ export default defineComponent({
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@ -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 = `
|
||||
<svg class="svg-icon" viewBox="${linkIcon.viewBox}">
|
||||
<use xlink:href="${linkIcon.url}" />
|
||||
</svg>`;
|
||||
|
||||
linkButton.addEventListener('click', () => {
|
||||
const projection = useStore().state.currentProjection;
|
||||
console.log(projection.latLngToLocation(this._map!.getCenter(), 64));
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user