lacmta / metro-art-bus-tracker

🚌 Bus tracking map that uses real time data

metro-art-bus-tracker

This website was built using our 11ty-web-template repo and it shows the locations of the 3 Metro Art Buses in real time.

Icons will appear on the map if the vehicle_id appears in the VehiclePositions feed AND it has a trip_id assigned to it. Clicking the icon will show a popup with additional information about the trip that vehicle is running.

Buses that satisfy this condition will be in one of two states: stopped (current_status is STOPPED_AT) or moving (current_status is INCOMING_AT or IN_TRANSIT_TO). See the GTFS Realtime Reference for more information.

If the vehicle is stopped, the popup will show the stop name and the timestamp.

If the vehicle is moving, the popup will show the bus' next stop and the predicted arrival time (or departure time if the arrival time is not available).

Technology:

• 11ty
• Leaflet
• Metro basemap via ESRI

Data:

• GTFS-realtime APIs from Swiftly via api.metro.net
  • VehiclePositions endpoint
  • TripUpdates endpoint
• GTFS-static APIs from Metro's gtfs_bus GitLab repo via api.metro.net
  • stop_times endpoint
  • stops endpoint

Quickstart

Use node --version to verify you're running Node 12 or newer.

Download this repository.

Use npm run start to build & serve the site.

❗❗❗ If this is your first time running 11ty, the @11ty/eleventy package will be installed. Type y when prompted to proceed. You might need to run npm install.

View the site locally at http://localhost:8080/.

Config for GitHub Pages

If you plan to run a live version of this site on GitHub Pages:

• Update pathPrefix in .eleventy.js to your repo name.
• Make sure GitHub Pages is set to publish the docs/ folder.

metro-art-bus-tracker's Issues

Cache the Status Data

GH Action that writes status to a file in the repository

Update Documentation

• 11ty build
• GitHub deployment process
• Upptime

Switch to pulling data from api.metro.net

`trip_detail` endpoint - reconfigure objects

In progress

MVP Features

Popups for each bus icon to show:

• line number (not route ID from GTFS, needs route_code from stop_times.txt)
• stop name of predicted next stop
• predicted arrival time at next stop, or minutes until vehicle reaches next stop

References:

• GTFS files:
  • stop_times.txt - contains trip_id, route_code
  • may need to reference other files as well, such as trips.txt or stops.txt
• API:
  • GTFS-rt Trip Updates - contains trip_id, stop_id.
    
  • GTFS-rt Vehicle Positions
  • Reference the official GTFS docs.

Uptime Monitoring

Hi Nina and team, following up on a [Twitter Thread Conversation](https://twitter.com/ninakin9/status/1563550270264528900)

For issue and incident tracking, you mentioned using [Upptime ] (https://demo.upptime.js.org/) to leverage GitHub Actions to get alerts or updates on GTFS feed data issues. Existing Feed https://lacmta.github.io/metro-art-bus-tracker/status/

What other capabilities would support LA Metro use cases?

Use Cases highlighted by Nina

• I'd love to be able to track the "uptime" of these 3 vehicles but I might need a proper server-side setup for that. Our Art Team is getting updates from the divisions on the status of the buses and we'd be able to compare with that.
• If the buses are supposed to be actively running service but they're not showing up in the VehiclePositions feed, that could indicate broken GPS tracking equipment.
• For example, right now planned cancellations are being released in a feed every 5 minutes, with data directly coming from the Operations' scheduling system. Major shoutout to our Ops & IT for making it happen this year!
• However, unplanned cancellations need to be manually entered into the Swiftly system by the Bus Controllers, as they're juggling a million other things to manage service disruptions in real-time.

Motivation

• We have an Open Data Tool for managing Public API feeds and are exploring a PoC we could use to help LACMTA.

Add back in Live Reloading for testing

We commented out the data reloading and now that everything works, we can add it back in to test the load on our API.

UI when no art buses are running

Maybe an overlay with a message?

UI when data is loading

The real time data can take quite a few seconds to load because it's so large. We might want some sort of loading indicator.

Status Reporter - Error: TypeError: Failed to fetch

Metro Art Bus Tracker is empty and status reporter says Error: TypeError: Failed to fetch https://lacmta.github.io/metro-art-bus-tracker/status/