This is a simple animation of a segment of the route for Bus 96 in Washington DC. This is a route that I used to take regularly, between the Adams Morgan and Bloomingdale neighborhoods. Data was pulled using the WMATA API and developer tools. Location data was extracted and cleaned up before implementing in the map animation.
Click here to view, or download the files and run index.html in the browser. Click the button to watch the animation of the marker along the route segment.
The code has been updated to pull the bus stop location data fromt the WMATA API, as opposed to the manual data that was hardcode before. I have also added labels when clicking on each stop that show the stop name and the lat/lon info. Coming next is a line that traces the route shown for better visibility. Down the road, I might implement live tracking of the bus locations.
This exercise uses HTML, CSS, and Javascript. Data was gathered using WMATA API.
This open source project is licensed under the MIT License.