01
Live fleet overview
Fleet summary (driving / offline / asleep), the list of fleets, and every subscribed vehicle on the HERE map, updated over SignalR.
Case study · 02 / 09
Spillard LIVE
Real-time fleet telematics
A telematics platform for fleets fitted with dash-cams and GPS trackers: every vehicle live on the map, every journey, speeding stretch, stop and driver-assist event one click away.
Partner
Spillard Safety Systems
Industry
Fleet safety & telematics
Platform
Web app — Vue 2, rewritten in React 18
Our role
Frontend engineering
The product
What it does
Spillard LIVE tracks camera-equipped vehicles in real time. Fleet managers see who is driving, offline or asleep, open any vehicle’s journeys, check speeding and stops, review ADAS and driver-monitoring events (fatigue, lane departure, phone use) and — depending on the licence — watch live video or play recordings back remotely.
Our part
What we built
We built the Vue 2 web app on a live SignalR feed and HERE Maps, with our own Vue components for markers, arrowed polylines, circles, info bubbles and clustering. A newer React 18 + TypeScript frontend on Redux Toolkit followed, re-using the same hubs with a clustering strategy tuned for very frequent updates.
Under the hood
The hard parts
- 01
Positions straight from the hub
Vehicle positions arrive over WebSocket from a SignalR LiveTrack hub; the store moves markers in place without reloading the view, and keep-alive holds the connection open.
- 02
A map toolkit of our own
HERE Maps exposed as Vue components — marker, arrowed polyline, circle, info bubble, cluster layer — injected through provide/inject so any view can compose a map.
- 03
Journeys rebuilt from telemetry
Road-matched route or raw GPS, red speeding segments, yellow stops and clustered events — plus a vertical timeline whose drive and stop blocks are sized by how long they lasted.
- 04
Rewrite without losing the live feed
The React 18 + Vite version subscribes to SubscribeStatistics and SubscribeLiveTrack, keeps fleet counters in Redux Toolkit and renders vehicles as DOM markers in a DYNAMICGRID cluster layer built for rapid updates.
The outcome
A live picture of the whole fleet that updates itself — and a full journey story behind every vehicle when something happens.
Inside the product
7 screens, explained
Demo data · click any screen to enlarge
02
Positions and plates
Zoomed in with number plates next to the markers — positions and speeds have moved after the next LiveTrack messages.
03
Journey panel
A route from telemetry with direction arrows, red speeding segments, yellow stops, event markers and clusters, and journey details on the side.
04
ADAS and DSM events
Driver-assist and driver-monitoring events — fatigue, lane departure, phone use — filtered by classification, type and category, and matched to the journey by time.
05
Journey timeline
Drive and stop blocks along the left edge, sized by duration. Hover a stop to see its address and how long it lasted.
06
The React rewrite
React + Vite on @microsoft/signalr: fleet counters in Redux Toolkit and vehicles rendered as DOM markers in a clustering layer.
07
A few messages later
Same view after more LiveTrack messages and a zoom out — clustered points rearrange themselves without re-rendering the page.
Stack
Web app (v1)
- Vue 2
- Vuex
- Vuetify
- axios
- moment
- vue-google-charts
Web app (v2)
- React 18
- TypeScript
- Vite
- Redux Toolkit
Real-time & maps
- SignalR (WebSockets)
- HERE Maps JS 3.1
- Clustering
Video
- dash.js
- video.js
Next case
