Skip to content

README.md

Latest commit

 

History

History
134 lines (88 loc) · 2.58 KB

README.md

File metadata and controls

134 lines (88 loc) · 2.58 KB
Raw

FlixBus Routes Map

Interactive map explorer for FlixBus GTFS routes, built with React, TypeScript, Vite, and Leaflet.

Features

  • Browse routes on an interactive dark-themed map
  • Search by city, station, and country
  • Filter routes by selected city, station, or country
  • Click routes/stops to inspect route paths and stop lists
  • Regenerate map data from GTFS feeds

Tech Stack

  • React + TypeScript
  • Vite
  • Leaflet + react-leaflet
  • PapaParse (GTFS CSV parsing)

Prerequisites

  • Node.js 18+
  • npm

Getting Started

npm install
npm run dev

App runs on: http://localhost:5175

Available Scripts

  • npm run dev — start development server
  • npm run build — type-check and build production assets
  • npm run preview — preview production build locally
  • npm run process:gtfs — parse GTFS feeds and regenerate route network JSON

GTFS Data Workflow

The app loads network data from:

  • public/flixbus_network.json

1) Create GTFS input folders

In the project root, create these folders (already gitignored):

  • gtfs_eu/
  • gtfs_us/
  • gtfs_gb/

2) Put required GTFS files into each folder

Each region folder must include:

  • stops.txt
  • routes.txt
  • trips.txt
  • stop_times.txt

3) Regenerate network data

npm run process:gtfs

This writes a new output file to:

  • public/flixbus_network.json

Notes about IDs

GTFS IDs are namespaced during processing to avoid collisions across regions:

  • Stop IDs become EU:<stop_id>, US:<stop_id>, GB:<stop_id>
  • Route IDs become EU:<route_id>, US:<route_id>, GB:<route_id>

This prevents cross-region key/selection conflicts in the UI.

Repository Hygiene

This repo ignores generated and local-only artifacts via .gitignore, including:

  • dist/
  • node_modules/
  • .vite/ / node_modules/.vite/
  • gtfs_eu/, gtfs_us/, gtfs_gb/

Only source code and the generated public network file are tracked.

Troubleshooting

npm run process:gtfs exits with missing file errors

Check that each GTFS folder exists and contains all required .txt files.

Map shows stale data

After regenerating GTFS data:

  1. Restart npm run dev
  2. Hard refresh browser (Ctrl+F5)

Build issues

Run:

npm install
npm run build

Project Structure

src/
  components/
    Map.tsx
    Sidebar.tsx
  App.tsx
  main.tsx
  index.css
public/
  flixbus_network.json
process_gtfs.js

Authors

This was an experiment to see how much Github Copilot improved and how far I could take it. Almost all the code was written by agentic AI. Human author Duncan Harry Whyte.