Fix a bug with Vue2LeafletTrackSymbol not updating heading

package.json

@@ -28,7 +28,6 @@
         "vue-i18n": "^8.0.0",
         "vue-router": "^3.0.1",
         "vue2-leaflet": "^1.0.2",
-        "vue2-leaflet-tracksymbol": "^1.0.10",
         "vuetify": "^1.1.11",
         "vuex": "^3.0.1",
         "whatwg-fetch": "^2.0.4"

src/components/LeafletTrackSymbol.vue

@@ -0,0 +1,69 @@
+<template>
+    <div>
+        <slot></slot>
+    </div>
+</template>
+
+<script>
+// Adapted from https://github.com/ais-one/vue2-leaflet-tracksymbol
+import L from 'leaflet';
+import 'leaflet-tracksymbol';
+
+export default {
+    props: {
+        heading: Number,
+        latLng: [Object, Array],
+        options: Object,
+        visible: {
+            type: Boolean,
+            default: true,
+        },
+    },
+    watch: {
+        heading(newHeading) {
+            this.mapObject.setHeading(newHeading);
+        },
+        latLng(newLatLng) {
+            this.mapObject.setLatLng(newLatLng);
+        },
+        options(newOptions) {
+            L.setOptions(this.mapObject, newOptions);
+        },
+        visible: 'setVisible',
+    },
+    mounted() {
+        const options = Object.assign({}, this.options, { heading: this.heading });
+        this.mapObject = L.trackSymbol(this.latLng, options);
+        if (this.$parent._isMounted) {
+            this.deferredMountedTo(this.$parent.mapObject);
+        }
+    },
+    beforeDestroy() {
+        this.setVisible(false);
+    },
+    methods: {
+        deferredMountedTo(parent) {
+            this.parent = parent;
+            const that = this.mapObject;
+            for (let i = 0; i < this.$children.length; i += 1) {
+                this.$children[i].deferredMountedTo(that);
+            }
+            if (this.visible) {
+                this.mapObject.addTo(parent);
+            }
+        },
+        setVisible(newVal, oldVal) {
+            if (newVal === oldVal) {
+                return;
+            }
+            if (this.mapObject) {
+                if (newVal) {
+                    this.mapObject.addTo(this.parent);
+                } else {
+                    this.parent.removeLayer(this.mapObject);
+                }
+            }
+        },
+    },
+};
+</script>

src/components/Map.vue

@@ -13,7 +13,7 @@
             <v-ltilelayer :url="tileServer" :attribution="attribution"></v-ltilelayer>
 
             <template v-if="positionLatLng">
-                <v-lts v-if="heading !== null" :lat-lng="positionLatLng" :options="markerOptions"></v-lts>
+                <v-lts v-if="heading !== null" :lat-lng="positionLatLng" :heading="headingInRadiansFromNorth" :options="markerOptions"></v-lts>
                 <v-lcirclemarker
                     v-else
                     :lat-lng="positionLatLng"
@@ -60,12 +60,12 @@ import shadowUrl from 'leaflet/dist/images/marker-shadow.png';
 import {
     LMap, LTileLayer, LMarker, LCircleMarker, LCircle, LPolyline,
 } from 'vue2-leaflet';
-import Vue2LeafletTracksymbol from 'vue2-leaflet-tracksymbol';
 
 import compassNorthIcon from '@/assets/compassNorth.svg';
 import unknownMarkerIcon from '@/assets/unknownMarker.svg';
 import * as constants from '@/constants';
 import { distance } from '@/tools';
+import LeafletTracksymbol from './LeafletTrackSymbol.vue';
 import ReportMarker from './ReportMarker.vue';
 
 // Fix for a bug in Leaflet default icon
@@ -85,17 +85,15 @@ export default {
         'v-lcirclemarker': LCircleMarker,
         'v-lcircle': LCircle,
         'v-lpolyline': LPolyline,
-        'v-lts': Vue2LeafletTracksymbol,
+        'v-lts': LeafletTracksymbol,
         ReportMarker,
     },
     computed: {
-        markerOptions() {
+        headingInRadiansFromNorth() {
-            return {
+            if (this.heading !== null) {
-                fillColor: '#00ff00',
+                return this.heading * (Math.PI / 180); // in radians from North
-                color: '#000000',
+            }
-                heading: this.heading * (Math.PI / 180), // in radians from North
+            return null;
-                weight: 1,
-            };
         },
         radiusFromAccuracy() {
             if (this.accuracy) {
@@ -134,6 +132,14 @@ export default {
             isProgrammaticMove: false,
             isProgrammaticZoom: false,
             map: null,
+            markerOptions: {
+                fill: true,
+                fillColor: '#00ff00',
+                fillOpacity: 1.0,
+                color: '#000000',
+                opacity: 1.0,
+                weight: 1,
+            },
             markerRadius: 10.0,
             maxZoom: constants.MAX_ZOOM,
             minZoom: constants.MIN_ZOOM,

src/constants.js

@@ -112,7 +112,7 @@ export const REPORT_TYPES_ORDER = ['gcum', 'interrupt', 'obstacle', 'pothole', '
 
 export const MIN_DISTANCE_REPORT_DETAILS = 40; // in meters
 
-export const MOCK_LOCATION = false;
+export const MOCK_LOCATION = true;
 export const MOCK_LOCATION_UPDATE_INTERVAL = 5 * 1000; // in milliseconds
 
 export const UPDATE_REPORTS_DISTANCE_THRESHOLD = 500; // in meters

src/tools/index.js

@@ -31,12 +31,16 @@ export function mockLocation() {
     const LAT_MAX = 48.81952;
     const LNG_MAX = 2.32077;
 
+    let heading = null;
+    if (Math.random() > 0.25) {
+        heading = Math.random() * 360;
+    }
     const newLocation = {
         coords: {
             accuracy: 10, // In meters
             latitude: (Math.random() * (LAT_MAX - LAT_MIN)) + LAT_MIN,
             longitude: (Math.random() * (LNG_MAX - LNG_MIN)) + LNG_MIN,
-            heading: null, // 20 * (Math.PI / 180),
+            heading,
         },
         timestamp: new Date().getTime(),
     };

yarn.lock

@@ -4996,10 +4996,6 @@ leaflet-tracksymbol@^1.0.8:
   dependencies:
     express "^4.13.4"
 
-leaflet@^1.2.0:
-  version "1.3.1"
-  resolved "https://registry.yarnpkg.com/leaflet/-/leaflet-1.3.1.tgz#86f336d2fb0e2d0ff446677049a5dc34cf0ea60e"
-
 leaflet@^1.3.1:
   version "1.3.3"
   resolved "https://registry.yarnpkg.com/leaflet/-/leaflet-1.3.3.tgz#5c8f2fd50e4a41ead93ab850dcd9e058811da9b9"
@@ -8418,20 +8414,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-tracksymbol@^1.0.10:
-  version "1.0.10"
-  resolved "https://registry.yarnpkg.com/vue2-leaflet-tracksymbol/-/vue2-leaflet-tracksymbol-1.0.10.tgz#644935cb48baa6b37216d0b525d45ba0387a5f3a"
-  dependencies:
-    leaflet "^1.3.1"
-    leaflet-tracksymbol "^1.0.8"
-    vue2-leaflet "0.0.58"
-
-vue2-leaflet@0.0.58:
-  version "0.0.58"
-  resolved "https://registry.yarnpkg.com/vue2-leaflet/-/vue2-leaflet-0.0.58.tgz#acfd0f7530292c60893a0b5b3cf648f06de530d1"
-  dependencies:
-    leaflet "^1.2.0"
-
 vue2-leaflet@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/vue2-leaflet/-/vue2-leaflet-1.0.2.tgz#73e0c09a30015db9a8dc0e9256443afb180d1fd5"