WAVE Live Check-In Heatmap Front-End
Overview
The web front-end for “WAVE”, a live check-in / location-sharing feature that rendered user-shared locations in real time on a Google Map heatmap with accompanying time-series charts. The folder hosts the Angular front end (heatmap.wave.ro) plus PHP endpoints, built on the same ngBoilerplate pattern as the SOCKAM web client.
The Challenge
Show, in real time, where users of the WAVE platform were checking in, combining a live map heatmap with a readable activity timeline, in a lightweight, embeddable page.
What We Built
An AngularJS application (ng-app="ngBoilerplate") presenting a fixed top navbar with a live “time ago” timestamp, a Google Maps canvas heatmap, and Highstock/Highcharts time-series visualisations. The page polled a backend (getHeat() / reloadHeat()) for location data and exposed PHP endpoints (live.php, place.php) plus localised Romanian Open Graph/social metadata. It pairs with the heatmap Silex backend in this archive.
Technologies & Approach
AngularJS with angular-moment for relative timestamps, Google Maps JS API for the heatmap layer, Highcharts/Highstock for charts, jQuery and Bootstrap for the shell; PHP for the data endpoints. Google Analytics was wired in for usage tracking.
Outcome / Impact
A functioning real-time geospatial dashboard that turned raw check-in data into an at-a-glance heatmap and timeline, an early demonstration of live data visualisation on the web.
Capabilities Demonstrated
- Real-time geospatial visualisation with Google Maps heatmaps
- Combining live maps with time-series charting (Highcharts)
- AngularJS front ends backed by lightweight PHP data endpoints
- Localised, social-shareable single-page web apps