The City of London levies a congestion charge to incentivize drivers to steer clear of downtown’s busiest areas. The charge nudges commuters and tourists toward public transit and funds improvements to transportation infrastructure. The program raised $3.6 billion and reduced traffic by 10 percent in its first decade of operation.
London drivers are charged whenever they enter a Congestion Charge Zone (CCZ) – a great example of geofencing. You can use Mapbox GL JS and Turf.js to build a geofence and visualize the CCZ in action.
This application could be used by any city with a congestion charge to calculate earnings, by fleet management companies to track their vehicles and congestion charges paid, or by individual drivers to get mobile notifications when they enter or leave a congestion zone.
To build a geofence with Mapbox, define a polygon (the London CCZ is available here), use turf.within to test many points or turf.inside to see if a single point is within the polygon, and grab the notifications fired by the Turf.js functions to tabulate results or notify users.
In this demo, I used d3.js to create cars along routes generated by the Mapbox Directions API. I then applied a d3 transition with a custom attrTween function and the Turf.js functions described above to check if a car entered or exited the congestion zone along its route. A real world application would use GPS to track the vehicles, feeding their latitudes + longitudes to Turf.js.
Geofencing is used in industries from retail and logistics to insurance and security. Want to build a geofencing application with Mapbox tools? Hit me up @mollymerp.