Add filters.minAccuracy config option

This allows us to ignore location points which do not meet the configured
accuracy requirement.

Closes #35.

docs/config.md

@@ -26,6 +26,8 @@ window.owntracks.config = {};
   - [`baseUrl`](#apibaseurl)
   - [`fetchOptions`](#apifetchoptions)
 - [`endDateTime`](#enddatetime)
+- `filters`
+  - [`minAccuracy`](#filtersminaccuracy)
 - [`ignorePingLocation`](#ignorepinglocation)
 - [`locale`](#locale)
 - `map`
@@ -124,6 +126,26 @@ Initial end date and time (browser timezone) for fetched data.
   };
   ```
 
+### `filters.minAccuracy`
+
+Minimum accuracy in meters for location points to be rendered & included in the travelled distance.
+
+This filter is disabled by default as accuracies can vary across devices an locations, but you're
+encouraged to set it as it can be a simple way to remove outliers and vastly improve the travelled
+distance calculation.
+
+- Type: [`Number`] or `null`
+- Default: `null`
+- Example:
+  ```js
+  // Don't include location points with an accuracy of less than 100 meters
+  window.owntracks.config = {
+    filters: {
+      minAccuracy: 100
+    }
+  };
+  ```
+
 ### `ignorePingLocation`
 
 Remove the `ping/ping` location from the fetched data. This is useful when using the

src/config.js

@@ -13,6 +13,9 @@ const DEFAULT_CONFIG = {
     fetchOptions: {},
   },
   endDateTime,
+  filters: {
+    minAccuracy: null,
+  },
   ignorePingLocation: true,
   locale: "en",
   map: {

src/store/actions.js

@@ -128,8 +128,13 @@ const _getDistanceTravelled = locationHistory => {
   Object.keys(locationHistory).forEach(user => {
     Object.keys(locationHistory[user]).forEach(device => {
       let lastLatLng = null;
-      locationHistory[user][device].forEach(coordinate => {
-        const latLng = L.latLng(coordinate.lat, coordinate.lon);
+      locationHistory[user][device].forEach(location => {
+        if (
+          config.minAccurac !== null &&
+          location.acc > config.filters.minAccuracy
+        )
+          return;
+        const latLng = L.latLng(location.lat, location.lon);
         if (lastLatLng !== null) {
           const distance = distanceBetweenCoordinates(lastLatLng, latLng);
           if (

src/store/getters.js

@@ -4,20 +4,46 @@ import config from "@/config";
 import { distanceBetweenCoordinates } from "@/util";
 
 /**
- * From the selected users' and devices' location histories, create an
- * array of all coordinates.
+ * Apply filters to the selected users' and devices' location histories.
  *
  * @param {State} state
  * @param {LocationHistory} state.locationHistory
  *   Location history of selected users and devices
+ * @returns {LocationHistory} Filtered location history
+ */
+const filteredLocationHistory = state => {
+  const locationHistory = {};
+  Object.keys(state.locationHistory).forEach(user => {
+    locationHistory[user] = {};
+    Object.keys(state.locationHistory[user]).forEach(device => {
+      locationHistory[user][device] = [];
+      state.locationHistory[user][device].forEach(location => {
+        if (
+          config.minAccurac !== null &&
+          location.acc > config.filters.minAccuracy
+        )
+          return;
+        locationHistory[user][device].push(location);
+      });
+    });
+  });
+  return locationHistory;
+};
+
+/**
+ * From the selected users' and devices' location histories, create an
+ * array of all coordinates.
+ *
+ * @param {State} state
  * @returns {L.LatLng[]} All coordinates
  */
-const locationHistoryLatLngs = state => {
+const filteredLocationHistoryLatLngs = state => {
   const latLngs = [];
-  Object.keys(state.locationHistory).forEach(user => {
-    Object.keys(state.locationHistory[user]).forEach(device => {
-      state.locationHistory[user][device].forEach(coordinate => {
-        latLngs.push(L.latLng(coordinate.lat, coordinate.lon));
+  const locationHistory = filteredLocationHistory(state);
+  Object.keys(locationHistory).forEach(user => {
+    Object.keys(locationHistory[user]).forEach(device => {
+      locationHistory[user][device].forEach(location => {
+        latLngs.push(L.latLng(location.lat, location.lon));
       });
     });
   });
@@ -30,17 +56,16 @@ const locationHistoryLatLngs = state => {
  * coordinates does not exceed `config.map.maxPointDistance`.
  *
  * @param {State} state
- * @param {LocationHistory} state.locationHistory
- *   Location history of selected users and devices
  * @returns {L.LatLng[][]} Groups of coherent coordinates
  */
-const locationHistoryLatLngGroups = state => {
+const filteredLocationHistoryLatLngGroups = state => {
   const groups = [];
-  Object.keys(state.locationHistory).forEach(user => {
-    Object.keys(state.locationHistory[user]).forEach(device => {
+  const locationHistory = filteredLocationHistory(state);
+  Object.keys(locationHistory).forEach(user => {
+    Object.keys(locationHistory[user]).forEach(device => {
       let latLngs = [];
-      state.locationHistory[user][device].forEach(coordinate => {
-        const latLng = L.latLng(coordinate.lat, coordinate.lon);
+      locationHistory[user][device].forEach(location => {
+        const latLng = L.latLng(location.lat, location.lon);
         // Skip if group splitting is disabled or this is the first
         // coordinate in the current group
         if (
@@ -68,6 +93,7 @@ const locationHistoryLatLngGroups = state => {
 };
 
 export default {
-  locationHistoryLatLngs,
-  locationHistoryLatLngGroups,
+  filteredLocationHistory,
+  filteredLocationHistoryLatLngs,
+  filteredLocationHistoryLatLngGroups,
 };

src/views/Map.vue

@@ -56,7 +56,7 @@
 
     <template v-if="map.layers.line">
       <LPolyline
-        v-for="(group, i) in locationHistoryLatLngGroups"
+        v-for="(group, i) in filteredLocationHistoryLatLngGroups"
         :key="i"
         :lat-lngs="group"
         v-bind="polyline"
@@ -64,7 +64,7 @@
     </template>
 
     <template v-if="map.layers.points">
-      <template v-for="(userDevices, user) in locationHistory">
+      <template v-for="(userDevices, user) in filteredLocationHistory">
         <template v-for="(deviceLocations, device) in userDevices">
           <LCircleMarker
             v-for="(l, n) in deviceLocationsWithNameAndFace(
@@ -95,8 +95,8 @@
 
     <template v-if="map.layers.heatmap">
       <LHeatmap
-        v-if="locationHistoryLatLngs.length"
-        :lat-lng="locationHistoryLatLngs"
+        v-if="filteredLocationHistoryLatLngs.length"
+        :lat-lng="filteredLocationHistoryLatLngs"
         :max="heatmap.max"
         :radius="heatmap.radius"
         :blur="heatmap.blur"
@@ -171,8 +171,12 @@ export default {
     });
   },
   computed: {
-    ...mapGetters(["locationHistoryLatLngs", "locationHistoryLatLngGroups"]),
-    ...mapState(["lastLocations", "locationHistory", "map"]),
+    ...mapGetters([
+      "filteredLocationHistory",
+      "filteredLocationHistoryLatLngs",
+      "filteredLocationHistoryLatLngGroups",
+    ]),
+    ...mapState(["lastLocations", "map"]),
   },
   methods: {
     ...mapMutations({
@@ -187,10 +191,10 @@ export default {
         (this.map.layers.line ||
           this.map.layers.points ||
           this.map.layers.heatmap) &&
-        this.locationHistoryLatLngs.length > 0
+        this.filteredLocationHistoryLatLngs.length > 0
       ) {
         this.$refs.map.mapObject.fitBounds(
-          new L.LatLngBounds(this.locationHistoryLatLngs)
+          new L.LatLngBounds(this.filteredLocationHistoryLatLngs)
         );
       } else if (this.map.layers.last && this.lastLocations.length > 0) {
         const locations = this.lastLocations.map(l => L.latLng(l.lat, l.lon));
@@ -227,7 +231,7 @@ export default {
     lastLocations() {
       this.fitView();
     },
-    locationHistory() {
+    filteredLocationHistory() {
       this.fitView();
     },
   },