🚎 Rome in Transit (GTFS-RT)

Description

This dashboard displays the near real-time position of any bus, tram, or train (ATAC and Roma TPL operators) within the Metropolitan City of Rome Capital. The stream layers automatically updates every 10 seconds through a periodic callback with new data retrieved from the GTFS-RealTime (Overview) feed provided and mantained by Roma Mobilità (website)

Hugging Face: https://huggingface.co/spaces/ivn888/Rome-in-transit

GitHub Pages: https://ivandorte.github.io/Rome-in-transit/gtfs-rt/app.html

Components

Two stream layers (maps):

1. The "Vehicle status" map shows, as the name implies, the current status of the vehicle:

   • $\textcolor{#0077BB}{\rm \textbf{In\ transit}}$
   • $\textcolor{#EE7733}{\rm \textbf{Stopped}}$

2. The "Delays map" displays whether a vehicle is on time (ahead + on time) or behind schedule (late)

3. :

   • $\textcolor{#009988}{\rm \textbf{On\ time}}$
   • $\textcolor{#CC3311}{\rm \textbf{Late}}$

N.B.: The value of the delay field (in minutes) will be zero if the vehicle is on time (A), negative if ahead of schedule (B) or positive if late (C).

Five number indicators showing:

• The number of currently active vehicles (fleet) divided between in transit or stopped;

• The number of vehicles on time or behind schedule;

Data

• Public transport data from Roma Mobilità;

• Administrative boundaries from ISTAT (2022);

ToDo

• Add alerts feed;
• Add routes, stops, etc...;

Known problems:

• If you view a blank page in HF restart the Space;

• The periodic callback may suddenly stop working (I don't know why) and the data will not be updated, simply refresh the application page;

Deployment on GitHub pages

1. Loaded my custom Python modules from GitHub:

Rome-in-transit/docs/gtfs-rt/app.js

Lines 42 to 52 in 52a790c

	const custom_modules = ['https://raw.githubusercontent.com/ivandorte/Rome-in-transit/main/modules_pyodide/colors.py', 'https://raw.githubusercontent.com/ivandorte/Rome-in-transit/main/modules_pyodide/constants.py', 'https://raw.githubusercontent.com/ivandorte/Rome-in-transit/main/modules_pyodide/indicators.py', 'https://raw.githubusercontent.com/ivandorte/Rome-in-transit/main/modules_pyodide/rome_gtfs_rt.py', 'https://raw.githubusercontent.com/ivandorte/Rome-in-transit/main/modules_pyodide/time_utils.py']
	for (const module of custom_modules) {
	let module_name;
	module_name = module.split('/').slice(-1)[0]
	await pyodide.runPythonAsync(`
	from pyodide.http import pyfetch
	module_pyodide = await pyfetch('${module}')
	with open('${module_name}', 'wb') as f:
	f.write(await module_pyodide.bytes())
	`);
	}

2. Loaded protobuf and gtfs-realtime-bindings wheels from a CDN URL:

   • protobuf is available on pypi: https://pypi.org/project/protobuf/#files

   • gtfs-realtime-bindings (https://pypi.org/project/gtfs-realtime-bindings/#files) was compiled via: python setup.py bdist_wheel

3. How I partially solved the CORS problem?

   • Used corsproxy.io to bypass CORS errors on HTTP requests;

   • Used XMLHttpRequest (js) to make HTTP requests of binary data;

Rome-in-transit/modules_pyodide/rome_gtfs_rt.py

Lines 51 to 66 in 52a790c

	def read_feed_xhr(url):
	"""
	HTTP request used to retrieve binary data from
	Roma mobilità GTFS-RT feed (XHR).
	Adapted from: https://bartbroere.eu/2022/04/25/pyodide-requests-binary-works-update/
	"""
	xhr = XMLHttpRequest.new()
	xhr.open("GET", url, False)
	xhr.overrideMimeType("text/plain; charset=x-user-defined")
	xhr.responseIsBinary = True
	xhr.send(None)
	response = xhr.response
	return bytes(ord(byte) & 0xFF for byte in response)

Deployment on HF

Just read this Medium article written by Sophia Yang, Ph.D.

References

• GTFS Realtime Overview

• Loading custom Python code

• How to deploy a Panel app to Hugging Face using Docker

• Converting Panel applications

• corsproxy.io

• Pyodide requests shim: Binary requests are working!

• PyViz Topics Examples

• Panel Sharing Gallery

• Panel Discourse 4825

• Markdown Badges

• Dashboard logo from Material Symbols - Google

Authors

• Ivan D'Ortenzio