Examples

Simple departure monitor

Show the next departures on a station.

View Example
Departure Monitor with prediction delays.

Show the next departures on a station with real time predictions as delay to the schedule time.

View Example
Departure Monitor with prediction times.

Shows the real time departures prediction time on a station with coloring based on delay. Colors: black (no prediction), green (prediction available with low delay), red (delay bigger than 5 minutes).

View Example
Self updating departure monitor

Show the next departures on a station. In this example we auto-update the HTML-List and append/remove automatically the elements that has to change. This is especially important for accessibility Situations. You do not want to redraw the whole list every time. (Because screen-readers would re-read the whole list.)

View Example
Self updating departure monitor with prediction delays.

Show the next departures on a station with predicted delays. In this example we auto-update the HTML-List and append, update or remove automatically the elements that has to change. The result is a self updating departure monitor that permanently shows you the current departures with delays.

View Example
Show a pearl-string of a trip

Display a simple pearl-string of a trip utilising the trip endpoint. The Pearls visualize if a station is in the future or in the past.

View Example
Find stations nearby the user location

Get the user location and get a list of stations, closeby to the user. Attention: This will not work if not served via https. (Because of current browser privacy restrictions)

View Example
Show all Stations on a Map (Mapbox)

The Mobilitybox provides you a Vector Tile Layer which is able to provide you with all stations. The API is returning you the Stations in Tiles so it automatically loads only the stations the users need to load for its current view. Note: You need a valid Mapbox Access Token, which requires an account on www.mapbox.com

View Example
Show the path a Vehicle takes for a Trip on a Mapbox map

The Mobilitybox provides a MultiLineString GeoJSON for a Trip which describes the path that a vehicle takes on a map. With the help of Mapbox you can visualize it on a map. In this example the path is visualized as simple blue line on the map. Also the stops are shown and colorized based on their status (whether the vehicle has already passed them or not). Note: You need a valid Mapbox Access Token, which requires an account on www.mapbox.com

View Example