From 390d734b9a7dde601c4042e13e4fde4248b11a0d Mon Sep 17 00:00:00 2001
From: "Phyks (Lucas Verney)" <phyks@phyks.me>
Date: Sun, 1 Jul 2018 22:27:18 +0200
Subject: [PATCH] Add a compass icon to indicate north on the map

---
 src/assets/compassNorth.svg | 74 +++++++++++++++++++++++++++++++++++++
 src/components/Map.vue      | 22 ++++++++++-
 2 files changed, 95 insertions(+), 1 deletion(-)
 create mode 100644 src/assets/compassNorth.svg

diff --git a/src/assets/compassNorth.svg b/src/assets/compassNorth.svg
new file mode 100644
index 0000000..51cdc2c
--- /dev/null
+++ b/src/assets/compassNorth.svg
@@ -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>
diff --git a/src/components/Map.vue b/src/components/Map.vue
index 973bf60..066ed7b 100644
--- a/src/components/Map.vue
+++ b/src/components/Map.vue
@@ -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>