Simulated live navigation

This map shows only the waypoints you gathered by tapping the buttons on 007-eleven-location — in seq order, from your DB session node first, or browser localStorage if no DB session is found. No demo route is loaded by default. If those gathered marks are exactly the 5 marks from “Simulate a full route”, the TomTom snapped route for exactly those marks is used; otherwise the route is the waypoint polyline joining your marks.

Privileged view (admin)

Privileged view — visualize a dataset from another browser

Off by default. When on, the admin can choose any dataset below, even with no datasets of their own — the default view would otherwise be empty. Turning it off restores your own waypoints. You can also start in privileged view with ?privileged=true in the URL.

The dropdown offers one choice per device, not one per data node and not one per waypoint: each choice is a device (labelled from its browser header, e.g. iPhone, Linux, Android — with #2, #3… for a second, third device of the same kind), showing that device's latest mappable set (at least 2 waypoints, in seq order). A device with several mappable sets appears once, not once per set. When privileged view is on and nothing is selected, it still shows the first device, instead of an empty map. Devices created before device labels were stored show as "Unknown device" — their labels cannot be recovered from a hash.

Base map tiles: OpenStreetMap in this preview. TomTom map tiles in a browser need a domain-restricted public key (a different kind of key from the secure server-side key — it is meant to be visible in page source, locked to glgalot.com in the TomTom dashboard). The code has a one-line swap ready: set the TomTom key in MapView to a domain-restricted key and the tile layer switches to TomTom. The secure key is never embedded here.

Honest scope note: TomTom’s built-in simulated-location provider lives in the native Navigation SDK for iOS/Android, not in the web free tier. On the web this page reproduces the same behaviour with free-tier Routing API data plus its own simulation loop: interpolation along the route, heading rotation, road-snapping of a noisy raw position, and off-route detection with recalculation.

Navigation status

Loading route…

Next turn: —
Distance to next turn: —
Distance travelled / remaining: —
Heading (vector): — Snapping error (raw → snapped): —
Position (snapped): —

Speed (route points per tick): 5 Add GPS noise (raw vs snapped)

You can also drag the vehicle arrow off the road: if it lands more than 50 m from the route, off-route detection fires, the simulation pauses, and Recalculate becomes available.

Map controls

Map stays focused on the waypoints by default — it does not auto-pan to the blue dot, because that would pull focus away from the route. If the dot moves off-screen while you are actually on location, a message flashes right on the map telling you so, and Center on me follows it. Outcomes (and reasons a tap did nothing) also flash right on the map, so you do not have to go back and forth between a button and the map to see whether a click did anything.

Blue dot off. Tap the button to show your real current position as a blue dot on the map (with its accuracy circle). This is distinct from the simulated vehicle arrow, which shows the simulated navigation position. The browser will ask for location permission; if you decline, the dot cannot be shown.

While navigating, tap Add to record a waypoint where you are now. It uses the blue dot if shown, otherwise the simulated vehicle position, and appends it in seq order to your own session dataset (same endpoint the main page's buttons use). The route is then reloaded from its start. Adding is available for your own current route only — in privileged view it is disabled, because adding would go to your own session dataset, not to the dataset on screen. If Add does nothing, the reason flashes on the map: most commonly, no current position yet — show the blue dot or start navigation first.

Waypoints in this map — turn-by-turn, as MapQuest lists them

Waypoints, in seq order

Tap Remove next to a waypoint (then click again to confirm) to remove that waypoint from the dataset on screen. On your own route this uses the user-scoped removal, which refuses any mark that is not yours. In privileged view, removing a waypoint from another browser's dataset uses the admin removal. Removing renumbers the remaining marks in seq order (the next mark becomes the new start if you remove the start), keeps the node even if it becomes empty, and audits the removal.

(no waypoints yet)

Waypoint-to-waypoint distances are straight-line distances between marks. Road distances are the offsets in the TomTom turn-by-turn list, when one is present. For a plain waypoint route, the turn-by-turn list is the waypoint list itself: proceed to each mark in order.

How each feature works here

Road-snapping: the simulated raw GPS position (grey dot, with noise when enabled) is snapped to the nearest point on the route, within a window around the current position. The vehicle arrow always sits on the snapped position, so it never cuts corners across fields.
Heading vector rotation: heading is the bearing from the previous route point to the next one (0° = north, clockwise). The arrow rotates with that bearing, and a short heading line extends ahead of the vehicle in the same direction.
Off-route detection: if the distance from the raw position to the nearest route point exceeds 50 m, status becomes OFF ROUTE, the route turns red, and the simulation pauses. Recalculate loads the TomTom alternative route for the demo marks, or a return-to-route path for arbitrary gathered marks, and resumes.
Turn-by-turn: the next instruction is chosen by route offset: the first guidance instruction whose offset is ahead of the distance already travelled. For arbitrary gathered marks, instructions are “Proceed to turning mark N”.

← 007-eleven-location | Admin dashboard

JavaScript is segregated into vanilla JS classes under ../js/: GeoMath, RouteModel, MapView, NavigationSimulator, MapApp, plus shared ApiClient and WaypointStore.