Gallery
The challenge
A live map tells a fleet team where a vehicle is right now. It does not tell them whether that matters. The questions that actually drive a dispatcher's day are narrower: has this vehicle arrived at the site it was sent to, has it stopped somewhere it should not, and did someone start the engine outside working hours?
Architecture
We built ProGPS for a client: a Laravel web app and a Flutter app for Android and iOS on Traccar's standard tracking APIs. This case study looks at one web operations slice — the geofence list, geofence boundaries on the live map and a notification feed for geofence entry, device stopped and ignition on or off — so a fleet team can define a zone, see a vehicle against it and be told when something changes, in one product.
Solution
A geofence list beside the map. In the ProGPS web app, a Geofences panel lists the fleet's zones with an Add New button, a search box, each zone's description and shape type, and a Remove action — so zones are managed as product data, not remembered. Geofence boundaries on the live map. A geofence is drawn on the live map as a boundary — shown here as a circle — with the tracked vehicle visible inside it, so the operator sees the vehicle and the zone together rather than reading coordinates. Geofence status on the device card. The device card that sits beside the map carries Live and Geofence status chips alongside the usual ignition, speed and signal details, so the zone context travels with the vehicle the operator is looking at. A notification feed for the events that matter. A Notifications panel lists events such as Geofence Enter, Device Stopped, Ignition Off and Ignition On, each with how long ago it happened, plus an event search — so a dispatcher can scan the latest zone and ignition changes without opening a report. One web product, standard tracking APIs. All of this lives in the same Laravel web app as the live map, trips and reports, and reads from Traccar's standard tracking APIs. We did not change the Traccar server, its APIs or any device protocols; the work went into the ProGPS product on top. The companion Flutter app for Android and iOS lists geofences on its dashboard as well, but the web slice is the focus here.
Results
The client's fleet team can keep its zones in one list, see a vehicle against its geofence on the live map, and follow geofence entry, stops and ignition changes in a notification feed inside the same ProGPS web app — instead of watching the map and relying on phone calls. What the feature covers: - Geofence list (Add New, search, description, type, Remove) - Geofence boundary on the live map - Vehicle shown inside the zone - Live and Geofence status chips on the device card - Notification feed (Geofence Enter, Device Stopped, Ignition Off, Ignition On) - Relative event times - Event search - Laravel web app - Flutter Android + iOS companion app - Traccar standard tracking APIs (unmodified) Next step Building a branded fleet product on a tracking engine and need geofences and ignition / geofence notifications beside the live map? See ProGPS at https://techmania.solutions/portfolio/progps or talk to us at https://techmania.solutions
Related project
ProGPS
ProGPS: Laravel web and Flutter iOS/Android apps we built for a client on Traccar's standard APIs: live tracking, geofences, trips, fuel reports.
View project in portfolio