From 6f8b3ada2c74cd298ab6b90feff3851053b4d421 Mon Sep 17 00:00:00 2001
From: "Phyks (Lucas Verney)" <phyks@phyks.me>
Date: Fri, 24 Aug 2018 23:34:37 +0200
Subject: [PATCH] Autorotate mode when clicking the compass icon

Also fix a bug with sharing current position.
---
 package.json           |  24 +++----
 src/App.vue            |   1 +
 src/assets/compass.svg |  81 ++++++++++++++++++++++
 src/components/Map.vue |  75 ++++++++++++++++-----
 src/i18n/en.json       |   3 +
 src/i18n/fr.json       |   5 +-
 src/i18n/oc.json       |   5 +-
 src/main.js            |   2 +-
 src/store/mutations.js |   3 +
 src/views/Map.vue      |   5 +-
 src/views/Settings.vue |  29 +++++++-
 yarn.lock              | 149 +++++++++++++++++++----------------------
 12 files changed, 268 insertions(+), 114 deletions(-)
 create mode 100644 src/assets/compass.svg

diff --git a/package.json b/package.json
index b12a455..17a7bce 100644
--- a/package.json
+++ b/package.json
@@ -17,7 +17,7 @@
         "babel-polyfill": "^6.26.0",
         "file-saver": "^1.3.8",
         "gps-to-gpx": "^1.4.0",
-        "howler": "^2.0.14",
+        "howler": "^2.0.15",
         "material-icons": "^0.2.3",
         "moment": "^2.22.2",
         "nosleep.js": "^0.7.0",
@@ -27,13 +27,13 @@
         "vue-i18n": "^8.0.0",
         "vue-router": "^3.0.1",
         "vuelayers": "^0.10.13",
-        "vuetify": "^1.1.11",
+        "vuetify": "^1.1.14",
         "vuex": "^3.0.1",
         "whatwg-fetch": "^2.0.4"
     },
     "devDependencies": {
         "app-manifest-webpack-plugin": "^1.1.3",
-        "autoprefixer": "^9.1.1",
+        "autoprefixer": "^9.1.3",
         "babel-core": "^6.22.1",
         "babel-eslint": "^8.2.6",
         "babel-loader": "^7.1.1",
@@ -41,20 +41,20 @@
         "babel-preset-stage-2": "^6.22.0",
         "copy-webpack-plugin": "^4.0.1",
         "css-loader": "^1.0.0",
-        "eslint": "^5.3.0",
+        "eslint": "^5.4.0",
         "eslint-config-airbnb-base": "^13.1.0",
         "eslint-friendly-formatter": "^4.0.1",
         "eslint-import-resolver-webpack": "^0.10.1",
         "eslint-loader": "^2.1.0",
         "eslint-plugin-html": "^4.0.5",
         "eslint-plugin-import": "^2.14.0",
-        "file-loader": "^1.1.4",
+        "file-loader": "^2.0.0",
         "friendly-errors-webpack-plugin": "^1.6.1",
         "html-webpack-plugin": "^3.2.0",
         "image-webpack-loader": "^4.3.1",
-        "mini-css-extract-plugin": "^0.4.1",
+        "mini-css-extract-plugin": "^0.4.2",
         "optimize-css-assets-webpack-plugin": "^5.0.0",
-        "portfinder": "^1.0.16",
+        "portfinder": "^1.0.17",
         "postcss-import": "^12.0.0",
         "postcss-loader": "^3.0.0",
         "postcss-url": "^8.0.0",
@@ -62,12 +62,12 @@
         "stylus-loader": "^3.0.2",
         "svg-url-loader": "^2.3.2",
         "svg2png": "^4.1.1",
-        "uglifyjs-webpack-plugin": "^1.1.1",
-        "url-loader": "^1.0.1",
-        "vue-loader": "^15.3.0",
-        "vue-style-loader": "^4.1.1",
+        "uglifyjs-webpack-plugin": "^1.3.0",
+        "url-loader": "^1.1.1",
+        "vue-loader": "^15.4.0",
+        "vue-style-loader": "^4.1.2",
         "vue-template-compiler": "^2.5.2",
-        "webpack": "^4.16.5",
+        "webpack": "^4.17.1",
         "webpack-bundle-analyzer": "^2.13.1",
         "webpack-cli": "^3.1.0",
         "webpack-dev-server": "^3.1.5",
diff --git a/src/App.vue b/src/App.vue
index 51b923d..dd9d54a 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -192,6 +192,7 @@ body, html, .application {
 
 .application--wrap {
     min-height: 100% !important;
+    overflow: auto;
 }
 
 .bottom-sheet.dialog {
diff --git a/src/assets/compass.svg b/src/assets/compass.svg
new file mode 100644
index 0000000..ee398b1
--- /dev/null
+++ b/src/assets/compass.svg
@@ -0,0 +1,81 @@
+<?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"
+   width="56"
+   height="56"
+   version="1.1"
+   id="svg183"
+   sodipodi:docname="compass.svg"
+   style="fill:none;stroke:#332211"
+   inkscape:version="0.92.2 2405546, 2018-03-11">
+  <metadata
+     id="metadata189">
+    <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="defs187">
+    <clipPath
+       clipPathUnits="userSpaceOnUse"
+       id="clipPath203">
+      <rect
+         style="fill:#0000ff;fill-opacity:1;stroke:none;stroke-width:2.5468204;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
+         id="rect205"
+         width="10.324674"
+         height="12.671466"
+         x="35.65247"
+         y="-0.29820207"
+         transform="rotate(45)" />
+    </clipPath>
+  </defs>
+  <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="namedview185"
+     showgrid="false"
+     inkscape:zoom="11.313709"
+     inkscape:cx="29.722586"
+     inkscape:cy="30.946467"
+     inkscape:window-x="0"
+     inkscape:window-y="37"
+     inkscape:window-maximized="0"
+     inkscape:current-layer="g193" />
+  <g
+     id="g193"
+     transform="matrix(1.5300768,-1.5300768,1.5300768,1.5300768,-59.979416,1.223656)">
+    <path
+       d="m 18,35.5 9,-5 -5,9 -9,5 z"
+       id="path201"
+       inkscape:connector-curvature="0"
+       clip-path="url(#clipPath203)"
+       style="fill:#0000ff;stroke:#0000ff;stroke-opacity:1" />
+    <path
+       style="fill:none;stroke:#231f20;stroke-opacity:1"
+       clip-path="url(#clipPath203)"
+       inkscape:connector-curvature="0"
+       id="path4734"
+       d="m 18,35.5 9,-5 -5,9 -9,5 z"
+       transform="matrix(0,1,1,0,-17.5,17.5)" />
+  </g>
+</svg>
diff --git a/src/components/Map.vue b/src/components/Map.vue
index 17cfe71..86d6792 100644
--- a/src/components/Map.vue
+++ b/src/components/Map.vue
@@ -22,8 +22,6 @@
 </template>
 
 <script>
-// TODO: Rotate the map according to user heading.
-import 'ol/ol.css';
 import Feature from 'ol/Feature';
 import Map from 'ol/Map';
 import LineString from 'ol/geom/LineString';
@@ -33,12 +31,13 @@ import VectorLayer from 'ol/layer/Vector';
 import VectorSource from 'ol/source/Vector';
 import XYZ from 'ol/source/XYZ';
 import View from 'ol/View';
-import { defaults as defaultControls } from 'ol/control';
+import { defaults as defaultControls, Rotate } from 'ol/control';
 import { fromLonLat, toLonLat } from 'ol/proj';
 import {
     Circle as CircleStyle, Fill, Icon, Stroke, Style, Text,
 } from 'ol/style';
 
+import compassIcon from '@/assets/compass.svg';
 import compassNorthIcon from '@/assets/compassNorth.svg';
 import unknownMarkerIcon from '@/assets/unknownMarker.svg';
 import * as constants from '@/constants';
@@ -56,6 +55,9 @@ export default {
             }
             return null;
         },
+        isInAutorotateMap() {
+            return this.isRecenterButtonShown ? false : this.hasUserAutorotateMap;
+        },
         olCenter() {
             // Compute center in OL coordinates system
             return fromLonLat([this.center[1], this.center[0]]);
@@ -106,6 +108,7 @@ export default {
         const $t = this.$t.bind(this);
         return {
             attribution: $t('map.attribution'),
+            hasUserAutorotateMap: this.$store.state.settings.shouldAutorotateMap,
             isProgrammaticMove: true,
             map: null,
             maxZoom: constants.MAX_ZOOM,
@@ -123,11 +126,22 @@ export default {
     },
     methods: {
         setPositionFeatureStyle() {
+            if (!this.map || !this.positionFeature) {
+                return;
+            }
+
             const positionFeatureStyle = this.positionFeature.getStyle();
-            const rotation = this.headingInRadiansFromNorth - Math.PI / 2;
 
             // If heading is specified
             if (this.headingInRadiansFromNorth !== null) {
+                const rotation = (this.isInAutorotateMap
+                    ? -Math.PI / 2
+                    : (
+                        this.headingInRadiansFromNorth
+                        + this.map.getView().getRotation()
+                        - Math.PI / 2
+                    )
+                );
                 // Check current style and update rotation if an arrow is already drawn
                 if (positionFeatureStyle) {
                     const TextStyle = positionFeatureStyle.getText();
@@ -256,7 +270,11 @@ export default {
 
             const view = this.map.getView();
             view.setCenter(this.olCenter);
-            view.setRotation(0);
+            if (this.isInAutorotateMap) {
+                view.setRotation(-this.headingInRadiansFromNorth);
+            } else {
+                view.setRotation(0);
+            }
             view.setZoom(this.zoom);
         },
         showRecenterButton() {
@@ -308,7 +326,10 @@ export default {
         this.markers.forEach(marker => this.drawReportMarker(marker, null));
         // Create the rotate label
         const rotateLabel = document.createElement('img');
-        rotateLabel.src = compassNorthIcon;
+        rotateLabel.src = (this.isInAutorotateMap
+            ? compassIcon
+            : compassNorthIcon
+        );
         rotateLabel.style.width = '100%';
         rotateLabel.style.height = '100%';
         // Create the map object
@@ -320,6 +341,10 @@ export default {
                 rotateOptions: {
                     autoHide: false,
                     label: rotateLabel,
+                    resetNorth: () => {
+                        // Switch autorotate mode
+                        this.hasUserAutorotateMap = !this.hasUserAutorotateMap;
+                    },
                 },
                 zoom: false,
             }),
@@ -362,6 +387,9 @@ export default {
         // Show recenter button on dragging the map
         this.map.on('pointerdrag', () => {
             this.isProgrammaticMove = false;
+            // Ensure correct orientation of position arrow
+            // TODO: Orientation should be correct while rotating as well
+            this.setPositionFeatureStyle();
             this.showRecenterButton();
         });
         this.map.on('moveend', this.onMoveEnd);
@@ -398,15 +426,14 @@ export default {
         },
     },
     watch: {
-        reportDetailsID(newID, oldID) {
-            [oldID, newID].forEach((id) => {
-                // We actually have to delete and recreate the feature,
-                // OpenLayer won't refresh the view if we only change the
-                // size. :/
-                this.deleteReportMarker(id);
-                const marker = this.markers.find(item => item.id === id);
-                if (marker) {
-                    this.drawReportMarker(marker, null);
+        isInAutorotateMap(newValue) {
+            this.map.getControls().forEach((control) => {
+                const controlItem = control;
+                if (controlItem instanceof Rotate) {
+                    controlItem.label_.src = (newValue
+                        ? compassIcon
+                        : compassNorthIcon
+                    );
                 }
             });
         },
@@ -464,7 +491,11 @@ export default {
 
                 // Update view
                 view.setCenter(newOlCenter);
-                view.setRotation(0);
+                if (this.isInAutorotateMap) {
+                    view.setRotation(-this.headingInRadiansFromNorth);
+                } else {
+                    view.setRotation(0);
+                }
                 view.setZoom(this.zoom);
             }
         },
@@ -490,6 +521,18 @@ export default {
                 this.accuracyFeature.getStyle().getImage().setRadius(this.radiusFromAccuracy);
             }
         },
+        reportDetailsID(newID, oldID) {
+            [oldID, newID].forEach((id) => {
+                // We actually have to delete and recreate the feature,
+                // OpenLayer won't refresh the view if we only change the
+                // size. :/
+                this.deleteReportMarker(id);
+                const marker = this.markers.find(item => item.id === id);
+                if (marker) {
+                    this.drawReportMarker(marker, null);
+                }
+            });
+        },
         reportLatLng(newReportLatLng) {
             // Eventually remove old marker
             if (this.reportLatLngFeature && this.mainVectorSource) {
diff --git a/src/i18n/en.json b/src/i18n/en.json
index 359ba32..2ad6771 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -90,9 +90,12 @@
         "potholeDescription": "A pothole in the ground."
     },
     "settings": {
+        "autorotate": "Autorotate (current direction up)",
         "customTileServer": "Custom tile server",
         "customTileServerURL": "Custom tile server URL",
         "customTileServerURLHint": "For example: http://tile.thunderforest.com/cycle/{z}/{x}/{y}.png",
+        "defaultOrientationMode": "Default orientation mode",
+        "fixedNorth": "Fixed (North up)",
         "locale": "Language",
         "skipOnboarding": "Skip onboarding",
         "tileServer": "Map tiles server"
diff --git a/src/i18n/fr.json b/src/i18n/fr.json
index 363cb67..4d3a2a9 100644
--- a/src/i18n/fr.json
+++ b/src/i18n/fr.json
@@ -3,7 +3,7 @@
         "availableReportsTitle": "Les signalements disponibles pour l'instant sont :",
         "lastReportAdded": "Dernier signalement ajout\u00e9 {fromNow}.",
         "license": "Licence",
-        "licenseDescription": "Le code source est sous <a href=\"https://opensource.org/licenses/MIT\">licence MIT</a> (<a href=\"https://framagit.org/phyks/cyclassist\">code source</a>). Les ic\u00f4nes sont bas\u00e9es sur des travaux de Wikimedia, Vecteezy, Pixabay ou Flaticon. Les sons sont bas\u00e9s sur des \u0153uvres sous CC0 de <a href=\"https://freesound.org/\">freesound.org</a>. Les tuiles de fond de carte proviennent de chez <a href=\"https://carto.com/location-data-services/basemaps/\">Carto.com</a> ou <a href=\"http://thunderforest.com/\">Thunderforest</a>, gr\u00e2ce aux <a href=\"https://www.openstreetmap.org/copyright\">contributeurs OpenStreetMap</a> et \u00e0 <a href=\"http://leafletjs.com/\">Leaflet</a>. Les signalements sont disponibles sous <a href=\"https://opendatacommons.org/licenses/odbl/\">licence ODbL</a>. La saisie manuelle de la position utilise l'excellente API de <a href=\"https://adresse.data.gouv.fr\">adresse.data.gouv.fr</a>.",
+        "licenseDescription": "Le code source est sous <a href=\"https://opensource.org/licenses/MIT\">licence MIT</a> (<a href=\"https://framagit.org/phyks/cyclassist\">code source</a>). Les ic\u00f4nes sont bas\u00e9es sur des travaux de Wikimedia, Vecteezy, Pixabay ou Flaticon. Les sons sont bas\u00e9s sur des \u0153uvres sous CC0 de <a href=\"https://freesound.org/\">freesound.org</a>. Les tuiles de fond de carte proviennent de chez <a href=\"https://carto.com/location-data-services/basemaps/\">Carto.com</a> ou <a href=\"http://thunderforest.com/\">Thunderforest</a>, gr\u00e2ce aux <a href=\"https://www.openstreetmap.org/copyright\">contributeurs OpenStreetMap</a> et \u00e0 <a href=\"http://openlayers.org/\">OpenLayers</a>. Les signalements sont disponibles sous <a href=\"https://opendatacommons.org/licenses/odbl/\">licence ODbL</a>. La saisie manuelle de la position utilise l'excellente API de <a href=\"https://adresse.data.gouv.fr\">adresse.data.gouv.fr</a>.",
         "nbActiveReports": "Aucun signalement actif. | Un signalement actif. | {nbActiveReports} signalements actifs.",
         "nbReports": "Aucun signalement. | Un signalement. | {nbReports} signalements.",
         "stats": "Statistiques",
@@ -90,9 +90,12 @@
         "potholeDescription": "Un nid de poule dans la route."
     },
     "settings": {
+        "autorotate": "Rotation automatique (en face en haut)",
         "customTileServer": "Serveur de tuiles personnalis\u00e9",
         "customTileServerURL": "URL du serveur de tuiles personnalis\u00e9",
         "customTileServerURLHint": "Par exemple : http://tile.thunderforest.com/cycle/{z}/{x}/{y}.png",
+        "defaultOrientationMode": "Mode d'orientation de la carte par d\u00e9faut",
+        "fixedNorth": "Fixe (Nord toujours en haut)",
         "locale": "Langue",
         "skipOnboarding": "Sauter l'introduction",
         "tileServer": "Serveur de tuiles pour la carte"
diff --git a/src/i18n/oc.json b/src/i18n/oc.json
index 8ee233f..415958e 100644
--- a/src/i18n/oc.json
+++ b/src/i18n/oc.json
@@ -3,7 +3,7 @@
         "availableReportsTitle": "Los senhalaments disponibles pel moment son :",
         "lastReportAdded": "Darri\u00e8ra senhalament ajustat {fromNow}.",
         "license": "Lic\u00e9ncia",
-        "licenseDescription": "Lo c\u00f2di font es jos <a href=\"https://opensource.org/licenses/MIT\">lic\u00e9ncia MIT</a> (<a href=\"https://framagit.org/phyks/cyclassist\">c\u00f2di font</a>). Las ic\u00f2nas son basadas sus d'\u00f2bras de Wikimedia, Vecteezy, Pixabay o Flaticon. Las teulas de fons venon <a href=\"https://carto.com/location-data-services/basemaps/\">Carto.com</a> o <a href=\"http://thunderforest.com/\">Thunderforest</a>, gr\u00e0cia als <a href=\"https://www.openstreetmap.org/copyright\">contributors OpenStreetMap</a> e a <a href=\"http://leafletjs.com/\">Leaflet</a>. Los senhalaments son disponibles jos <a href=\"https://opendatacommons.org/licenses/odbl/\">lic\u00e9ncia ODbL</a>. La sasida manuala de la posicion utiliza l'excellenta API de <a href=\"https://adresse.data.gouv.fr\">adresse.data.gouv.fr</a>.",
+        "licenseDescription": "It is released under an <a href=\"https://opensource.org/licenses/MIT\">MIT license</a> (<a href=\"https://framagit.org/phyks/cyclassist\">source code</a>). Icons are based on creations from Wikimedia, Vecteezy, Pixabay or Flaticon. Sounds are based on CC0 works from <a href=\"https://freesound.org/\">freesound.org</a>. The map background is using tiles from <a href=\"https://carto.com/location-data-services/basemaps/\">Carto.com</a> or <a href=\"http://thunderforest.com/\">Thunderforest</a>, thanks to <a href=\"https://www.openstreetmap.org/copyright\">OpenStreetMap contributors</a> and <a href=\"http://leafletjs.com/\">Leaflet</a>. Collected reports are available under <a href=\"https://opendatacommons.org/licenses/odbl/\">ODbL license</a>. Manual location picking uses the awesome API from <a href=\"https://adresse.data.gouv.fr\">adresse.data.gouv.fr</a>.",
         "nbActiveReports": "Cap de senhalament actiu. |\u00a0Un senhalament actiu. | {nbActiveReports} senhalaments actius.",
         "nbReports": "Cap de senhalament. | Un senhalament. | {nbReports} senhalaments.",
         "stats": "Estatisticas",
@@ -90,9 +90,12 @@
         "potholeDescription": "Un trauc per la rota."
     },
     "settings": {
+        "autorotate": "",
         "customTileServer": "Servidor de teulas personalizat",
         "customTileServerURL": "URL del servidor de teulas personalizat",
         "customTileServerURLHint": "Per exemple\u00a0: http://tile.thunderforest.com/cycle/{z}/{x}/{y}.png",
+        "defaultOrientationMode": "",
+        "fixedNorth": "",
         "locale": "Lenga",
         "skipOnboarding": "Passar l'introduccion",
         "tileServer": "Servidor de teulas per la mapa"
diff --git a/src/main.js b/src/main.js
index 101b2fa..48d6c3c 100644
--- a/src/main.js
+++ b/src/main.js
@@ -6,7 +6,7 @@ import Vue from 'vue';
 
 import '@/css/vendor/roboto-fontface.css';
 import '@/css/vendor/material-icons.css';
-import 'leaflet/dist/leaflet.css'; // eslint-disable-line import/first
+import 'ol/ol.css';
 import 'vuetify/src/stylus/app.styl';
 
 import App from '@/App.vue';
diff --git a/src/store/mutations.js b/src/store/mutations.js
index 7de4b9d..c948e2a 100644
--- a/src/store/mutations.js
+++ b/src/store/mutations.js
@@ -48,6 +48,7 @@ let hasGeolocationPermission = null;
 let hasPlaySoundPermission = null;
 let hasPreventSuspendPermission = null;
 let hasVibratePermission = null;
+let shouldAutorotateMap = null;
 let skipOnboarding = null;
 let tileServer = null;
 if (storageAvailable('localStorage')) {
@@ -57,6 +58,7 @@ if (storageAvailable('localStorage')) {
     hasPlaySoundPermission = loadDataFromStorage('hasPlaySoundPermission');
     hasPreventSuspendPermission = loadDataFromStorage('hasPreventSuspendPermission');
     hasVibratePermission = loadDataFromStorage('hasVibratePermission');
+    shouldAutorotateMap = loadDataFromStorage('shouldAutorotateMap');
     skipOnboarding = loadDataFromStorage('skipOnboarding');
 
     tileServer = loadDataFromStorage('tileServer');
@@ -116,6 +118,7 @@ export const initialState = {
         hasVibratePermission: (
             hasVibratePermission !== null ? hasVibratePermission : true
         ),
+        shouldAutorotateMap: shouldAutorotateMap !== null ? shouldAutorotateMap : false,
         skipOnboarding: skipOnboarding || false,
         tileServer: tileServer || DEFAULT_TILE_SERVER,
     },
diff --git a/src/views/Map.vue b/src/views/Map.vue
index b8d712e..66c2989 100644
--- a/src/views/Map.vue
+++ b/src/views/Map.vue
@@ -126,7 +126,10 @@ export default {
         },
         mapCenter() {
             if (this.hasCenterProvidedByRoute) {
-                return [this.$route.params.lat, this.$route.params.lng];
+                return [
+                    parseFloat(this.$route.params.lat),
+                    parseFloat(this.$route.params.lng),
+                ];
             }
             return this.currentLatLng;
         },
diff --git a/src/views/Settings.vue b/src/views/Settings.vue
index 38c7f9b..b1c2012 100644
--- a/src/views/Settings.vue
+++ b/src/views/Settings.vue
@@ -20,8 +20,14 @@
                         required
                         ></v-select>
 
+                    <v-select
+                        :items="orientationModes"
+                        v-model="defaultOrientationMode"
+                        :label="$t('settings.defaultOrientationMode')"
+                        required
+                        ></v-select>
+
                     <v-text-field
-                        ref="shareLinkRef"
                         :hint="$t('settings.customTileServerURLHint')"
                         :label="$t('settings.customTileServerURL')"
                         v-model="customTileServerURL"
@@ -66,6 +72,16 @@ export default {
                 this.$store.dispatch('setSetting', { setting: 'tileServer', value: `custom:${URL}` });
             },
         },
+        defaultOrientationMode: {
+            get() {
+                return this.$store.state.settings.shouldAutorotateMap;
+            },
+            set(newDefaultOrientationMode) {
+                this.$store.dispatch('setSetting',
+                    { setting: 'shouldAutorotateMap', value: newDefaultOrientationMode },
+                );
+            },
+        },
         locale: {
             get() {
                 return this.$store.state.settings.locale;
@@ -107,8 +123,19 @@ export default {
         },
     },
     data() {
+        const $t = this.$t.bind(this);
         return {
             i18nItems: AVAILABLE_LOCALES,
+            orientationModes: [
+                {
+                    text: $t('settings.fixedNorth'),
+                    value: false,
+                },
+                {
+                    text: $t('settings.autorotate'),
+                    value: true,
+                },
+            ],
         };
     },
 };
diff --git a/yarn.lock b/yarn.lock
index 2a35e8d..d7ef0c1 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -311,17 +311,6 @@
     "@webassemblyjs/wast-parser" "1.5.13"
     long "^3.2.0"
 
-"@webpack-contrib/schema-utils@^1.0.0-beta.0":
-  version "1.0.0-beta.0"
-  resolved "https://registry.yarnpkg.com/@webpack-contrib/schema-utils/-/schema-utils-1.0.0-beta.0.tgz#bf9638c9464d177b48209e84209e23bee2eb4f65"
-  dependencies:
-    ajv "^6.1.0"
-    ajv-keywords "^3.1.0"
-    chalk "^2.3.2"
-    strip-ansi "^4.0.0"
-    text-table "^0.2.0"
-    webpack-log "^1.1.2"
-
 abbrev@1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/abbrev/-/abbrev-1.1.1.tgz#f8f2c887ad10bf67f634f005b6987fed3179aac8"
@@ -618,12 +607,12 @@ atob@^2.1.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/atob/-/atob-2.1.1.tgz#ae2d5a729477f289d60dd7f96a6314a22dd6c22a"
 
-autoprefixer@^9.1.1:
-  version "9.1.1"
-  resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-9.1.1.tgz#e4ffa96c71270b8a1967d1542abc5f8453920a77"
+autoprefixer@^9.1.3:
+  version "9.1.3"
+  resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-9.1.3.tgz#bd5940ccb9d1bfa3508308659915f0a14394c8d5"
   dependencies:
     browserslist "^4.0.2"
-    caniuse-lite "^1.0.30000876"
+    caniuse-lite "^1.0.30000878"
     normalize-range "^0.1.2"
     num2fraction "^1.2.2"
     postcss "^7.0.2"
@@ -1725,6 +1714,10 @@ caniuse-lite@^1.0.30000876:
   version "1.0.30000876"
   resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30000876.tgz#69fc1b696a35fd91089061aa916f677ee7057ada"
 
+caniuse-lite@^1.0.30000878:
+  version "1.0.30000878"
+  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30000878.tgz#c644c39588dd42d3498e952234c372e5a40a4123"
+
 capture-stack-trace@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/capture-stack-trace/-/capture-stack-trace-1.0.0.tgz#4a6fa07399c26bba47f0b2496b4d0fb408c5550d"
@@ -1780,7 +1773,7 @@ chalk@^1.0.0, chalk@^1.1.3:
     strip-ansi "^3.0.0"
     supports-color "^2.0.0"
 
-chalk@^2.0.0, chalk@^2.0.1, chalk@^2.1.0, chalk@^2.3.0, chalk@^2.3.2, chalk@^2.4.1:
+chalk@^2.0.0, chalk@^2.0.1, chalk@^2.1.0, chalk@^2.3.0, chalk@^2.4.1:
   version "2.4.1"
   resolved "https://registry.yarnpkg.com/chalk/-/chalk-2.4.1.tgz#18c49ab16a037b6eb0152cc83e3471338215b66e"
   dependencies:
@@ -3088,7 +3081,7 @@ error-stack-parser@^2.0.0:
   dependencies:
     stackframe "^1.0.4"
 
-es-abstract@^1.10.0, es-abstract@^1.5.1, es-abstract@^1.6.1, es-abstract@^1.7.0:
+es-abstract@^1.5.1, es-abstract@^1.6.1, es-abstract@^1.7.0:
   version "1.12.0"
   resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.12.0.tgz#9dbbdd27c6856f0001421ca18782d786bf8a6165"
   dependencies:
@@ -3250,9 +3243,9 @@ eslint-visitor-keys@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-1.0.0.tgz#3f3180fb2e291017716acb4c9d6d5b5c34a6a81d"
 
-eslint@^5.3.0:
-  version "5.3.0"
-  resolved "https://registry.yarnpkg.com/eslint/-/eslint-5.3.0.tgz#53695aca5213968aacdf970ccb231e42a2b285f8"
+eslint@^5.4.0:
+  version "5.4.0"
+  resolved "https://registry.yarnpkg.com/eslint/-/eslint-5.4.0.tgz#d068ec03006bb9e06b429dc85f7e46c1b69fac62"
   dependencies:
     ajv "^6.5.0"
     babel-code-frame "^6.26.0"
@@ -3288,7 +3281,6 @@ eslint@^5.3.0:
     regexpp "^2.0.0"
     require-uncached "^1.0.3"
     semver "^5.5.0"
-    string.prototype.matchall "^2.0.0"
     strip-ansi "^4.0.0"
     strip-json-comments "^2.0.1"
     table "^4.0.3"
@@ -3441,7 +3433,7 @@ expand-range@^1.8.1:
   dependencies:
     fill-range "^2.1.0"
 
-express@^4.13.4, express@^4.16.2:
+express@^4.16.2:
   version "4.16.3"
   resolved "https://registry.yarnpkg.com/express/-/express-4.16.3.tgz#6af8a502350db3246ecc4becf6b5a34d22f7ed53"
   dependencies:
@@ -3654,13 +3646,20 @@ file-entry-cache@^2.0.0:
     flat-cache "^1.2.1"
     object-assign "^4.0.1"
 
-file-loader@1.1.11, file-loader@^1.1.4:
+file-loader@1.1.11:
   version "1.1.11"
   resolved "https://registry.yarnpkg.com/file-loader/-/file-loader-1.1.11.tgz#6fe886449b0f2a936e43cabaac0cdbfb369506f8"
   dependencies:
     loader-utils "^1.0.2"
     schema-utils "^0.4.5"
 
+file-loader@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/file-loader/-/file-loader-2.0.0.tgz#39749c82f020b9e85901dcff98e8004e6401cfde"
+  dependencies:
+    loader-utils "^1.0.2"
+    schema-utils "^1.0.0"
+
 file-saver@^1.3.8:
   version "1.3.8"
   resolved "https://registry.yarnpkg.com/file-saver/-/file-saver-1.3.8.tgz#e68a30c7cb044e2fb362b428469feb291c2e09d8"
@@ -4470,9 +4469,9 @@ hosted-git-info@^2.1.4:
   version "2.7.1"
   resolved "https://registry.yarnpkg.com/hosted-git-info/-/hosted-git-info-2.7.1.tgz#97f236977bd6e125408930ff6de3eec6281ec047"
 
-howler@^2.0.14:
-  version "2.0.14"
-  resolved "https://registry.yarnpkg.com/howler/-/howler-2.0.14.tgz#28e37800fea002fea147a3ca033660c4f1288a99"
+howler@^2.0.15:
+  version "2.0.15"
+  resolved "https://registry.yarnpkg.com/howler/-/howler-2.0.15.tgz#8f26d6548d29b257441fc190644b4392ce99ad32"
 
 hpack.js@^2.1.6:
   version "2.1.6"
@@ -5472,16 +5471,6 @@ lcid@^1.0.0:
   dependencies:
     invert-kv "^1.0.0"
 
-leaflet-tracksymbol@^1.0.8:
-  version "1.0.8"
-  resolved "https://registry.yarnpkg.com/leaflet-tracksymbol/-/leaflet-tracksymbol-1.0.8.tgz#ae90451c4d4b1730467db7484b35216d3208b837"
-  dependencies:
-    express "^4.13.4"
-
-leaflet@^1.3.1:
-  version "1.3.3"
-  resolved "https://registry.yarnpkg.com/leaflet/-/leaflet-1.3.3.tgz#5c8f2fd50e4a41ead93ab850dcd9e058811da9b9"
-
 levn@^0.3.0, levn@~0.3.0:
   version "0.3.0"
   resolved "https://registry.yarnpkg.com/levn/-/levn-0.3.0.tgz#3b09924edf9f083c0490fdd4c0bc4421e04764ee"
@@ -5968,12 +5957,12 @@ min-document@^2.19.0:
   dependencies:
     dom-walk "^0.1.0"
 
-mini-css-extract-plugin@^0.4.1:
-  version "0.4.1"
-  resolved "https://registry.yarnpkg.com/mini-css-extract-plugin/-/mini-css-extract-plugin-0.4.1.tgz#d2bcf77bb2596b8e4bd9257e43d3f9164c2e86cb"
+mini-css-extract-plugin@^0.4.2:
+  version "0.4.2"
+  resolved "https://registry.yarnpkg.com/mini-css-extract-plugin/-/mini-css-extract-plugin-0.4.2.tgz#b3ecc0d6b1bbe5ff14add42b946a7b200cf78651"
   dependencies:
-    "@webpack-contrib/schema-utils" "^1.0.0-beta.0"
     loader-utils "^1.1.0"
+    schema-utils "^1.0.0"
     webpack-sources "^1.1.0"
 
 minimalistic-assert@^1.0.0:
@@ -6915,9 +6904,9 @@ pngquant-bin@^4.0.0:
     execa "^0.10.0"
     logalot "^2.0.0"
 
-portfinder@^1.0.16:
-  version "1.0.16"
-  resolved "https://registry.yarnpkg.com/portfinder/-/portfinder-1.0.16.tgz#a6a68be9c352bc66c1a4c17a261f661f3facaf52"
+portfinder@^1.0.17:
+  version "1.0.17"
+  resolved "https://registry.yarnpkg.com/portfinder/-/portfinder-1.0.17.tgz#a8a1691143e46c4735edefcf4fbcccedad26456a"
   dependencies:
     async "^1.5.2"
     debug "^2.2.0"
@@ -7608,12 +7597,6 @@ regex-not@^1.0.0, regex-not@^1.0.2:
     extend-shallow "^3.0.2"
     safe-regex "^1.1.0"
 
-regexp.prototype.flags@^1.2.0:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/regexp.prototype.flags/-/regexp.prototype.flags-1.2.0.tgz#6b30724e306a27833eeb171b66ac8890ba37e41c"
-  dependencies:
-    define-properties "^1.1.2"
-
 regexpp@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/regexpp/-/regexpp-2.0.0.tgz#b2a7534a85ca1b033bcf5ce9ff8e56d4e0755365"
@@ -7955,7 +7938,7 @@ sax@>=0.6.0, sax@^1.2.4, sax@~1.2.4:
   version "1.2.4"
   resolved "https://registry.yarnpkg.com/sax/-/sax-1.2.4.tgz#2816234e2378bddc4e5354fab5caa895df7100d9"
 
-schema-utils@^0.4.3, schema-utils@^0.4.4, schema-utils@^0.4.5:
+schema-utils@^0.4.4, schema-utils@^0.4.5:
   version "0.4.5"
   resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-0.4.5.tgz#21836f0608aac17b78f9e3e24daff14a5ca13a3e"
   dependencies:
@@ -8467,16 +8450,6 @@ string-width@^1.0.1, string-width@^1.0.2:
     is-fullwidth-code-point "^2.0.0"
     strip-ansi "^4.0.0"
 
-string.prototype.matchall@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/string.prototype.matchall/-/string.prototype.matchall-2.0.0.tgz#2af8fe3d2d6dc53ca2a59bd376b089c3c152b3c8"
-  dependencies:
-    define-properties "^1.1.2"
-    es-abstract "^1.10.0"
-    function-bind "^1.1.1"
-    has-symbols "^1.0.0"
-    regexp.prototype.flags "^1.2.0"
-
 string_decoder@^1.0.0, string_decoder@~1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/string_decoder/-/string_decoder-1.1.1.tgz#9cf1611ba62685d7030ae9e4ba34149c3af03fc8"
@@ -8973,7 +8946,7 @@ uglify-to-browserify@~1.0.0:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/uglify-to-browserify/-/uglify-to-browserify-1.0.2.tgz#6e0924d6bda6b5afe349e39a6d632850a0f882b7"
 
-uglifyjs-webpack-plugin@^1.1.1, uglifyjs-webpack-plugin@^1.2.4:
+uglifyjs-webpack-plugin@^1.2.4:
   version "1.2.7"
   resolved "https://registry.yarnpkg.com/uglifyjs-webpack-plugin/-/uglifyjs-webpack-plugin-1.2.7.tgz#57638dd99c853a1ebfe9d97b42160a8a507f9d00"
   dependencies:
@@ -8986,6 +8959,19 @@ uglifyjs-webpack-plugin@^1.1.1, uglifyjs-webpack-plugin@^1.2.4:
     webpack-sources "^1.1.0"
     worker-farm "^1.5.2"
 
+uglifyjs-webpack-plugin@^1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/uglifyjs-webpack-plugin/-/uglifyjs-webpack-plugin-1.3.0.tgz#75f548160858163a08643e086d5fefe18a5d67de"
+  dependencies:
+    cacache "^10.0.4"
+    find-cache-dir "^1.0.0"
+    schema-utils "^0.4.5"
+    serialize-javascript "^1.4.0"
+    source-map "^0.6.1"
+    uglify-es "^3.3.4"
+    webpack-sources "^1.1.0"
+    worker-farm "^1.5.2"
+
 ultron@~1.1.0:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/ultron/-/ultron-1.1.1.tgz#9fe1536a10a664a65266a1e3ccf85fd36302bc9c"
@@ -9092,13 +9078,13 @@ url-join@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/url-join/-/url-join-4.0.0.tgz#4d3340e807d3773bda9991f8305acdcc2a665d2a"
 
-url-loader@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/url-loader/-/url-loader-1.0.1.tgz#61bc53f1f184d7343da2728a1289ef8722ea45ee"
+url-loader@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/url-loader/-/url-loader-1.1.1.tgz#4d1f3b4f90dde89f02c008e662d604d7511167c1"
   dependencies:
     loader-utils "^1.1.0"
     mime "^2.0.3"
-    schema-utils "^0.4.3"
+    schema-utils "^1.0.0"
 
 url-parse-lax@^1.0.0:
   version "1.0.0"
@@ -9299,9 +9285,9 @@ vue-i18n@^8.0.0:
   version "8.0.0"
   resolved "https://registry.yarnpkg.com/vue-i18n/-/vue-i18n-8.0.0.tgz#ae0c6e05ec8e36151bcf5f47c7b538c8af6d0282"
 
-vue-loader@^15.3.0:
-  version "15.3.0"
-  resolved "https://registry.yarnpkg.com/vue-loader/-/vue-loader-15.3.0.tgz#b474d10a4e93d934a78c147fc3e314b370e9fc54"
+vue-loader@^15.4.0:
+  version "15.4.0"
+  resolved "https://registry.yarnpkg.com/vue-loader/-/vue-loader-15.4.0.tgz#8c90f94ece61c6b4707e87b4a58617f97faa125b"
   dependencies:
     "@vue/component-compiler-utils" "^2.0.0"
     hash-sum "^1.0.2"
@@ -9313,13 +9299,20 @@ vue-router@^3.0.1:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/vue-router/-/vue-router-3.0.1.tgz#d9b05ad9c7420ba0f626d6500d693e60092cc1e9"
 
-vue-style-loader@^4.1.0, vue-style-loader@^4.1.1:
+vue-style-loader@^4.1.0:
   version "4.1.1"
   resolved "https://registry.yarnpkg.com/vue-style-loader/-/vue-style-loader-4.1.1.tgz#7c1d051b24f60b1707602b549ed50b4c8111d316"
   dependencies:
     hash-sum "^1.0.2"
     loader-utils "^1.0.2"
 
+vue-style-loader@^4.1.2:
+  version "4.1.2"
+  resolved "https://registry.yarnpkg.com/vue-style-loader/-/vue-style-loader-4.1.2.tgz#dedf349806f25ceb4e64f3ad7c0a44fba735fcf8"
+  dependencies:
+    hash-sum "^1.0.2"
+    loader-utils "^1.0.2"
+
 vue-template-compiler@^2.5.2:
   version "2.5.17"
   resolved "https://registry.yarnpkg.com/vue-template-compiler/-/vue-template-compiler-2.5.17.tgz#52a4a078c327deb937482a509ae85c06f346c3cb"
@@ -9331,12 +9324,6 @@ vue-template-es2015-compiler@^1.6.0:
   version "1.6.0"
   resolved "https://registry.yarnpkg.com/vue-template-es2015-compiler/-/vue-template-es2015-compiler-1.6.0.tgz#dc42697133302ce3017524356a6c61b7b69b4a18"
 
-vue2-leaflet@^1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/vue2-leaflet/-/vue2-leaflet-1.0.2.tgz#73e0c09a30015db9a8dc0e9256443afb180d1fd5"
-  dependencies:
-    leaflet "^1.3.1"
-
 vue@^2.5.2:
   version "2.5.17"
   resolved "https://registry.yarnpkg.com/vue/-/vue-2.5.17.tgz#0f8789ad718be68ca1872629832ed533589c6ada"
@@ -9355,9 +9342,9 @@ vuelayers@^0.10.13:
     rxjs "^5.5.7"
     uuid "^3.2.1"
 
-vuetify@^1.1.11:
-  version "1.1.11"
-  resolved "https://registry.yarnpkg.com/vuetify/-/vuetify-1.1.11.tgz#3b2ec09344231ddf872524346c2efa20e8aa30d4"
+vuetify@^1.1.14:
+  version "1.1.14"
+  resolved "https://registry.yarnpkg.com/vuetify/-/vuetify-1.1.14.tgz#a45b6cd659e31edc8ca8dd2094562f1763f1f223"
 
 vuex@^3.0.1:
   version "3.0.1"
@@ -9489,9 +9476,9 @@ webpack-sources@^1.0.1, webpack-sources@^1.1.0:
     source-list-map "^2.0.0"
     source-map "~0.6.1"
 
-webpack@^4.16.5:
-  version "4.16.5"
-  resolved "https://registry.yarnpkg.com/webpack/-/webpack-4.16.5.tgz#29fb39462823d7eb8aefcab8b45f7f241db0d092"
+webpack@^4.17.1:
+  version "4.17.1"
+  resolved "https://registry.yarnpkg.com/webpack/-/webpack-4.17.1.tgz#0f026e3d823f3fc604f811ed3ea8f0d9b267fb1e"
   dependencies:
     "@webassemblyjs/ast" "1.5.13"
     "@webassemblyjs/helper-module-context" "1.5.13"