Skip to content

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

Closed
taarraas wants to merge 1 commit into
owntracks:mainfrom
taarraas:map-colors
Closed

taarraas wants to merge 1 commit into
owntracks:mainfrom
taarraas:map-colors

Conversation

@taarraas

@taarraas taarraas commented Nov 4, 2026 •

Copy link
Copy Markdown

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

When several users or devices are shown on the map at once, all location history lines, location points and accuracy circles use the same color, which makes it hard to tell whose track is whose. This adds a map.colors config option that assigns a color per user or per user/device.

Usage

window.owntracks.config = {
  map: {
    colors: {
      alice: "#3b6fd4",
      "bob/phone": "#e06c4f",
    },
  },
};
  • Keys are either "user" or "user/device"; a "user/device" entry takes precedence over a "user" entry.
  • Applies to location history lines, location points, and the accuracy circle of the last known location.
  • Users/devices without an entry fall back to the existing map.polyline, map.circleMarker and map.circle colors (which default to primaryColor), so existing setups look exactly the same.
  • Default is {}.

Changes

  • src/store/getters.js: filteredLocationHistoryLatLngGroups now returns { user, device, latLngs } objects instead of bare arrays, so each line segment knows which device it belongs to. Map.vue is the only consumer.
  • src/views/Map.vue: new deviceColor(user, device, fallback) method, used for the polyline, location point and accuracy circle colors.
  • src/config.js: default map.colors: {}.
  • src/index.d.ts: colors: Record<string, string> added to the config type.
  • docs/config.md: documented map.colors with an example.

The pin marker for the last location is unchanged (it is an icon, not a colored vector layer).

Testing

  • npm run lint:js, npm run lint:md, npm run lint:scss, npm test and npm run build all pass.
  • Built the Docker image from docker/Dockerfile and ran it against an existing Recorder with two users (iOS and Android devices). With colors set, each user's tracks and accuracy circle render in their own color; without it, the map looks unchanged.
  • Two users with colors: { alice: "#3b6fd4", bob: "#e06c4f" }. The screenshot uses synthetic tracks (generated .rec files served by an HTTP-only Recorder) rather than real location data.
Screenshot 2026-11-04 at 11 47 40 AM

I didn't add a CHANGELOG.md entry since entries there are grouped by release; happy to add one if you'd prefer.

🤖 Generated with Claude Code

Allows assigning a distinct color to each user or user/device for
location history lines, location points and the last-location accuracy
circle, so multiple people's tracks can be told apart on the map.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_011d6FepEJGvpCwcrNRQ2gr6
@linusg linusg closed this Nov 4, 2026
@owntracks owntracks locked as spam and limited conversation to collaborators Nov 4, 2026
@taarraas
taarraas deleted the map-colors branch November 4, 2026 20:08
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants