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>
|
<template>
|
||||||
<div class="fill-height fill-width">
|
<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-ltilelayer :url="tileServer" :attribution="attribution"></v-ltilelayer>
|
||||||
|
|
||||||
<v-lts v-if="heading" :lat-lng="positionLatLng" :options="markerOptions"></v-lts>
|
<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 iconUrl from 'leaflet/dist/images/marker-icon.png';
|
||||||
import shadowUrl from 'leaflet/dist/images/marker-shadow.png';
|
import shadowUrl from 'leaflet/dist/images/marker-shadow.png';
|
||||||
|
|
||||||
|
import compassNorthIcon from '@/assets/compassNorth.svg';
|
||||||
import * as constants from '@/constants';
|
import * as constants from '@/constants';
|
||||||
import ReportMarker from './ReportMarker.vue';
|
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() {
|
data() {
|
||||||
return {
|
return {
|
||||||
attribution: 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors',
|
attribution: 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors',
|
||||||
@ -99,6 +110,15 @@ export default {
|
|||||||
.application .leaflet-bar a {
|
.application .leaflet-bar a {
|
||||||
color: black;
|
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>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
|
Loading…
Reference in New Issue
Block a user