The Real-Time Bus Tracker is a web application that leverages HTML, CSS, and JavaScript to visualize the movement of a bus between MIT and Harvard. Users can interact with the map, and a dynamic bus icon updates its position in real-time along the predefined route. The application enhances the user experience with a user-friendly button, inviting users to effortlessly track the bus's journey between two iconic locations.

Improvements

Updates made to enhance user experience and functionality:

• code was separated into functions for readability
• set the height of the map to be 100% of the viewpoint height
• button styling
• cursor pointer
• button hover animation
• moved script tags to the end of the section
• updated button label
• created a line layer to visually represent the bus route on the map

How to Run

To run the Real-Time Bus Tracker on your machine, follow these steps:

1. Clone the repo: git clone https://github.com/marialee222/real-time-bus-tracker.git
2. Open the project directory: cd real-time-bus-tracker
3. Get a Mapbox Access Token by visiting Mapbox and signing up for an account.
4. Create a new access token in your Mapbox account dashboard.
5. Replace Access Token in mapanimation.js with your new access token.
6. Open index.html in your web browser. Explore the Real-Time Bus Tracker!

Future improvements for the Real-Time Bus Tracker include:

When a user touches a stop, the schedule will appear on the bottom.

On the schedule, user will find the actual day and the coming days with the next departing time.

The schedule will include the stop name, address and time until the next bus. Example: MIT 77 Mass Ave, Cambridge MA Next bus in 3 min

Tech Stack & Tools: