Add a compass icon to indicate north on the map
This commit is contained in:
parent
c15ad9ab56
commit
390d734b9a
74
src/assets/compassNorth.svg
Normal file
74
src/assets/compassNorth.svg
Normal file
@ -0,0 +1,74 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
||||
|
||||
<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.1"
|
||||
id="svg889"
|
||||
width="56"
|
||||
height="56"
|
||||
viewBox="0 0 55.999999 56.000001"
|
||||
sodipodi:docname="compassNorth.svg"
|
||||
inkscape:version="0.92.2 5c3e80d, 2017-08-06">
|
||||
<metadata
|
||||
id="metadata895">
|
||||
<rdf:RDF>
|
||||
<cc:Work
|
||||
rdf:about="">
|
||||
<dc:format>image/svg+xml</dc:format>
|
||||
<dc:type
|
||||
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
|
||||
<dc:title></dc:title>
|
||||
</cc:Work>
|
||||
</rdf:RDF>
|
||||
</metadata>
|
||||
<defs
|
||||
id="defs893" />
|
||||
<sodipodi:namedview
|
||||
pagecolor="#ffffff"
|
||||
bordercolor="#666666"
|
||||
borderopacity="1"
|
||||
objecttolerance="10"
|
||||
gridtolerance="10"
|
||||
guidetolerance="10"
|
||||
inkscape:pageopacity="0"
|
||||
inkscape:pageshadow="2"
|
||||
inkscape:window-width="1596"
|
||||
inkscape:window-height="861"
|
||||
id="namedview891"
|
||||
showgrid="false"
|
||||
fit-margin-top="0"
|
||||
fit-margin-left="0"
|
||||
fit-margin-right="0"
|
||||
fit-margin-bottom="0"
|
||||
inkscape:zoom="6.9642857"
|
||||
inkscape:cx="59.865781"
|
||||
inkscape:cy="44.105609"
|
||||
inkscape:window-x="0"
|
||||
inkscape:window-y="37"
|
||||
inkscape:window-maximized="0"
|
||||
inkscape:current-layer="svg889" />
|
||||
<path
|
||||
id="path906"
|
||||
style="fill:#ff0000;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
|
||||
d="M 27.612612,5.9194935 16.09894,35.46051 27.612612,27.909551 39.88019,35.46051 Z"
|
||||
inkscape:connector-curvature="0"
|
||||
sodipodi:nodetypes="ccccc" />
|
||||
<text
|
||||
xml:space="preserve"
|
||||
style="font-style:normal;font-weight:normal;font-size:40px;line-height:25px;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
|
||||
x="20.250797"
|
||||
y="51.419636"
|
||||
id="text917"><tspan
|
||||
sodipodi:role="line"
|
||||
id="tspan915"
|
||||
x="20.250797"
|
||||
y="51.419636"
|
||||
style="font-size:20px">N</tspan></text>
|
||||
</svg>
|
After Width: | Height: | Size: 2.4 KiB |
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div class="fill-height fill-width">
|
||||
<v-lmap :center="latLng" :zoom="this.zoom" :minZoom="this.minZoom" :maxZoom="this.maxZoom" :options="{ zoomControl: false }" @contextmenu="handleLongPress" @moveend="onMoveEnd" @movestart="onMoveStart">
|
||||
<v-lmap ref="map" :center="latLng" :zoom="this.zoom" :minZoom="this.minZoom" :maxZoom="this.maxZoom" :options="{ zoomControl: false }" @contextmenu="handleLongPress" @moveend="onMoveEnd" @movestart="onMoveStart">
|
||||
<v-ltilelayer :url="tileServer" :attribution="attribution"></v-ltilelayer>
|
||||
|
||||
<v-lts v-if="heading" :lat-lng="positionLatLng" :options="markerOptions"></v-lts>
|
||||
@ -19,6 +19,7 @@ import iconRetinaUrl from 'leaflet/dist/images/marker-icon-2x.png';
|
||||
import iconUrl from 'leaflet/dist/images/marker-icon.png';
|
||||
import shadowUrl from 'leaflet/dist/images/marker-shadow.png';
|
||||
|
||||
import compassNorthIcon from '@/assets/compassNorth.svg';
|
||||
import * as constants from '@/constants';
|
||||
import ReportMarker from './ReportMarker.vue';
|
||||
|
||||
@ -75,6 +76,16 @@ export default {
|
||||
};
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
const map = this.$refs.map.mapObject;
|
||||
const north = L.control({ position: 'topright' });
|
||||
north.onAdd = () => {
|
||||
const div = L.DomUtil.create('div', 'compassIcon legend');
|
||||
div.innerHTML = `<img src="${compassNorthIcon}">`;
|
||||
return div;
|
||||
};
|
||||
north.addTo(map);
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
attribution: 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors',
|
||||
@ -99,6 +110,15 @@ export default {
|
||||
.application .leaflet-bar a {
|
||||
color: black;
|
||||
}
|
||||
|
||||
.compassIcon {
|
||||
background-color: white;
|
||||
border-radius: 50%;
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
box-shadow: 0 3px 5px -1px rgba(0,0,0,.2),0 6px 10px 0 rgba(0,0,0,.14),0 1px 18px 0 rgba(0,0,0,.12);
|
||||
-webkite-box-shadow: 0 3px 5px -1px rgba(0,0,0,.2),0 6px 10px 0 rgba(0,0,0,.14),0 1px 18px 0 rgba(0,0,0,.12);
|
||||
}
|
||||
</style>
|
||||
|
||||
<style scoped>
|
||||
|
Loading…
Reference in New Issue
Block a user