Add map.colors option for per-user/device colors

docs/config.md

@@ -34,6 +34,7 @@ window.owntracks.config = {};
   - [`attribution`](#mapattribution)
   - [`circle`](#mapcircle)
   - [`circleMarker`](#mapcirclemarker)
+  - [`colors`](#mapcolors)
   - `controls`
     - `scale`
       - [`display`](#mapcontrolsscaledisplay)
@@ -238,6 +239,28 @@ for all possible values.
   }
   ```
 
+### `map.colors`
+
+Per-user or per-device colors for location history lines, location points and
+the accuracy circle of the last known location. Keys are either `"user"` or
+`"user/device"`; a `"user/device"` entry takes precedence. Users and devices
+without an entry use the colors from `map.polyline`, `map.circleMarker` and
+`map.circle` (which default to `primaryColor`).
+
+- Type: [`Object`]
+- Default: `{}`
+- Example:
+  ```js
+  window.owntracks.config = {
+    map: {
+      colors: {
+        alice: "#3b6fd4",
+        "bob/phone": "#e06c4f",
+      },
+    },
+  };
+  ```
+
 ### `map.controls.scale.display`
 
 Whether to show scale control or not.

src/config.js

@@ -32,6 +32,7 @@ const DEFAULT_CONFIG = {
       fillOpacity: 1,
       radius: 4,
     },
+    colors: {},
     controls: {
       scale: {
         display: true,

src/index.d.ts

@@ -23,6 +23,7 @@ interface Config {
           fillOpacity: number;
           radius: number;
         };
+        colors: Record<string, string>;
         controls: {
           scale: {
             display: boolean;

src/store/getters.js

@@ -79,14 +79,14 @@ const filteredLocationHistoryLatLngGroups = (state) => {
             config.map.maxPointDistance
           ) {
             // Distance is too far, start new group of coordinate
-            groups.push(latLngs);
+            groups.push({ user, device, latLngs });
             latLngs = [];
           }
         }
         // Add coordinate to current active group
         latLngs.push(latLng);
       });
-      groups.push(latLngs);
+      groups.push({ user, device, latLngs });
     });
   });
   return groups;

src/views/Map.vue

@@ -29,8 +29,9 @@
       <LPolyline
         v-for="(group, i) in filteredLocationHistoryLatLngGroups"
         :key="i"
-        :lat-lngs="group"
+        :lat-lngs="group.latLngs"
         v-bind="polyline"
+        :color="deviceColor(group.user, group.device, polyline.color)"
       />
     </template>
 
@@ -58,6 +59,7 @@
             :key="`${l.topic}-location-${n}`"
             :lat-lng="[l.lat, l.lon]"
             v-bind="circleMarker"
+            :color="deviceColor(user, device, circleMarker.color)"
           >
             <LDeviceLocationPopup
               :user="user"
@@ -88,6 +90,8 @@
         :lat-lng="[l.lat, l.lon]"
         :radius="l.acc"
         v-bind="circle"
+        :color="deviceColor(l.username, l.device, circle.color)"
+        :fill-color="deviceColor(l.username, l.device, circle.fillColor)"
       />
 
       <LMarker
@@ -222,6 +226,19 @@ export default {
       setMapCenter: types.SET_MAP_CENTER,
       setMapZoom: types.SET_MAP_ZOOM,
     }),
+    /**
+     * Get the configured color for a user/device, falling back to the
+     * given default. Lookup order: "user/device", then "user".
+     *
+     * @param {String} user Username
+     * @param {String} device Device name
+     * @param {String} fallback Color to use if none is configured
+     * @returns {String} Color
+     */
+    deviceColor(user, device, fallback) {
+      const colors = this.$config.map.colors || {};
+      return colors[`${user}/${device}`] || colors[user] || fallback;
+    },
     /**
      * Fit all objects on the map into view.
      */