From 1f9c0bd623fdc1a88c2d1e469f3f952f6fed8c19 Mon Sep 17 00:00:00 2001
From: "Phyks (Lucas Verney)" <phyks@phyks.me>
Date: Mon, 9 Jul 2018 18:37:55 +0200
Subject: [PATCH] Heading is provided by browser in degrees but consumed by
 Leaflet in radians

---
 src/components/Map.vue | 6 +++---
 src/views/Map.vue      | 5 ++++-
 2 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/src/components/Map.vue b/src/components/Map.vue
index 87dfcbc..e4a71e9 100644
--- a/src/components/Map.vue
+++ b/src/components/Map.vue
@@ -3,7 +3,7 @@
         <v-lmap ref="map" :minZoom="this.minZoom" :maxZoom="this.maxZoom" :options="{ zoomControl: false }" @click="handleClick" @movestart="onMoveStart" @zoomstart="onZoomStart">
             <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 !== null" :lat-lng="positionLatLng" :options="markerOptions"></v-lts>
             <v-lcirclemarker v-else :lat-lng="positionLatLng" :color="markerOptions.color" :fillColor="markerOptions.fillColor" :fillOpacity="1.0" :weight="markerOptions.weight" :radius="markerRadius"></v-lcirclemarker>
 
             <v-lcircle v-if="shouldDisplayAccuracy" :lat-lng="positionLatLng" :radius="radiusFromAccuracy"></v-lcircle>
@@ -56,7 +56,7 @@ export default {
             type: Number,
             default: null,
         },
-        heading: Number,
+        heading: Number,  // in degrees, clockwise wrt north
         markers: Array,
         onPress: Function,
         polyline: Array,
@@ -84,7 +84,7 @@ export default {
             return {
                 fillColor: '#00ff00',
                 color: '#000000',
-                heading: this.heading,
+                heading: this.heading * (Math.PI / 180),
                 weight: 1,
             };
         },
diff --git a/src/views/Map.vue b/src/views/Map.vue
index a1a7d1c..766ce0d 100644
--- a/src/views/Map.vue
+++ b/src/views/Map.vue
@@ -140,7 +140,10 @@ export default {
             }
             this.latLng = [position.coords.latitude, position.coords.longitude];
             this.positionHistory.push(this.latLng);
-            this.heading = Object.prototype.hasOwnProperty.call(position.coords, 'heading') ? position.coords.heading : null;
+            this.heading = null;
+            if (position.coords.heading !== null && !isNaN(position.coords.heading)) {
+                this.heading = position.coords.heading;
+            }
             this.accuracy = position.coords.accuracy ? position.coords.accuracy : null;
         },
         setNoSleep() {