This is the next-generation OneBusAway web application, built on top of SvelteKit. It is designed to replace the onebusaway-enterprise-webapp project. This project is under active development!
npm install
cp .env.example .env
# edit .env with your editor of choice
npm run devSee .env.example for an example of the required keys and values.
PUBLIC_ANALYTICS_PROVIDER- enum (optional): which backend to use."none"(default — disabled),"plausible", or"umami".PUBLIC_ANALYTICS_DOMAIN- string (optional): site identifier sent to the backend. For Plausible, this is the site domain registered in the account. For Umami, this is the literal hostname sent aspayload.hostname.PUBLIC_ANALYTICS_API_HOST- string (optional): upstream base URL (Plausible appends/api/event; Umami appends/api/send).PUBLIC_ANALYTICS_WEBSITE_ID- string (optional): required at runtime whenPUBLIC_ANALYTICS_PROVIDER="umami"; ignored otherwise.
PUBLIC_LANGUAGE_SWITCHER_ENABLED- string: (optional) Set to"false"to hide the language switcher in the navigation bar. Defaults to"true".PUBLIC_LANGUAGE_SWITCHER_BUTTON_FORMAT- string: (optional) Format for displaying language in the top menu button. Options:"native"(default),"english","native-english","english-native","code".PUBLIC_LANGUAGE_SWITCHER_MENU_FORMAT- string: (optional) Format for displaying languages in the dropdown menu. Options:"native-english"(default),"native","english","english-native","code".
PUBLIC_OBA_REGION_NAME- string: (required) displayed in the header.PUBLIC_OBA_LOGO_URL- string: (required) The URL of your transit agency's logo.OBA_LOGO_URL_DARK- string: (optional) The URL of your transit agency's logo for dark mode. Falls back toPUBLIC_OBA_LOGO_URLif not specified.SHOW_REGION_NAME_IN_NAV_BAR- boolean: (optional) Set to "false" to hide the region name text in the navigation bar. Defaults to true.PRIVATE_MANIFEST_ICON_192_URL- string: (optional) URL to the 192×192 Android manifest icon (used for Add to Home Screen). Defaults to/android-chrome-192x192.pngif not specified.PRIVATE_MANIFEST_ICON_512_URL- string: (optional) URL to the 512×512 Android manifest icon (used for Add to Home Screen). Defaults to/android-chrome-512x512.pngif not specified.PUBLIC_APPLE_TOUCH_ICON_URL- string: (optional) URL to the Apple touch icon used on iOS home screens. Defaults to/apple-touch-icon.pngif not specified.PUBLIC_FAVICON_URL- string: (optional) URL to the browser tab favicon. Defaults to/favicon.pngif not specified.PUBLIC_NAV_BAR_LINKS- JSON string: (required) A dictionary of the links displayed across the navigation bar.
Customize the application's color scheme via environment variables:
COLOR_BRAND_PRIMARY- string: (optional) Primary brand color for nav bar and buttons. Default: "#78aa36".COLOR_BRAND_PRIMARY_FOREGROUND- string: (optional) Text color on brand-colored surfaces. Default: "#ffffff".COLOR_BRAND_ACCENT- string: (optional) Accent color for links, selected states, focus rings. Default: "#486621".COLOR_SURFACE- string: (optional) Background color for panels and surfaces. Default: "#ffffff".COLOR_SURFACE_FOREGROUND- string: (optional) Text color on surfaces. Default: "#000000".
Note: Color variables (
COLOR_*) are processed at build time by Tailwind CSS. After changing any color values, you must rebuild the application (npm run build) for changes to take effect.
A full 10-shade color palette is automatically generated from COLOR_BRAND_ACCENT for use with Flowbite components:
| Shade | Description |
|---|---|
primary-50 |
Very light (95% white) |
primary-100 |
Light (90% white) |
primary-200 |
Light (75% white) |
primary-300 |
Light-medium (60% white) |
primary-400 |
Slightly lighter than base (30% white) |
primary-500 |
Base color (equals COLOR_BRAND_ACCENT) |
primary-600 |
Slightly darker (15% black) |
primary-700 |
Medium-dark (30% black) |
primary-800 |
Dark (45% black) |
primary-900 |
Very dark (60% black) |
Use these in Tailwind classes: bg-primary-500, text-primary-700, border-primary-300, etc.
PUBLIC_CALENDAR_FIRST_DAY_OF_WEEK- number: (optional) Sets the first day of the week for calendar components. Use 0 for Monday, 1 for Tuesday, 2 for Wednesday, 3 for Thursday, 4 for Friday, 5 for Saturday, 6 for Sunday. Defaults to 0 (Monday).
PUBLIC_OBA_SERVER_URL- string: (required) Your OBA API server's URL.PUBLIC_OBA_REGION_CENTER_LAT- float: (required) The region's center latitude.PUBLIC_OBA_REGION_CENTER_LNG- float: (required) The region's center longitude.PRIVATE_OBA_API_KEY- string: (required) Your OneBusAway REST API server key.PRIVATE_OBACO_API_BASE_URL- string: (optional) Your OneBusAway.co server base URL, including the path prefix `/api/v1.PRIVATE_REGION_ID- string: (required if OBACO_API_BASE_URL provided).PRIVATE_OBACO_SHOW_TEST_ALERTS- boolean: (optional) Show test alerts on the website. Don't set this value in production.PRIVATE_OBA_AGENCY_FILTER- string: (optional) Comma-separated agency IDs to restrict this instance to a subset of agencies. Leave empty to show all agencies (default). Affects search results, stop listings, arrivals, schedules, and alerts.
PUBLIC_OBA_GOOGLE_MAPS_API_KEY- string: (optional) Your Google API key.PUBLIC_OBA_MAP_PROVIDER- string: Use "osm" for OpenStreetMap or "google" for Google Maps.
PRIVATE_OBA_GEOCODER_API_KEY- string: (optional) Your Geocoder service's API key. Ensure that the Geocoder and Places API permissions are enabled.PRIVATE_OBA_GEOCODER_PROVIDER- string: (required) Your Geocoder service. We currently only support the Google Places SDK (value: "google").
PUBLIC_OTP_SERVER_URL- string: (optional) Your OpenTripPlanner 1.x-compatible trip planner server URL.PUBLIC_OBA_TIMEZONE- string: (required) IANA timezone for the transit region (e.g."America/Los_Angeles"). Dates and times in the trip planner are expressed in this timezone so they match the transit agency's schedule, regardless of the user's or server's local timezone.PUBLIC_DISTANCE_UNIT- string: (optional) Default distance unit for the trip planner. Use "metric" for kilometers/meters or "imperial" for miles/feet. If not set, auto-detects from the user's browser locale (US browsers get imperial, others get metric). Users can override this in Trip Options.
You can link directly to a specific location on the map using URL query parameters:
| Parameter | Description | Example |
|---|---|---|
lat |
Latitude of the initial map center | 47.6062 |
lng |
Longitude of the initial map center | -122.3321 |
Example URL:
https://your-wayfinder-instance.com/?lat=47.6062&lng=-122.3321
Validation rules:
- Both
latandlngmust be provided together - Latitude must be between -90 and 90
- Longitude must be between -180 and 180
- Coordinates must be within 200km of the configured region center (
PUBLIC_OBA_REGION_CENTER_LAT/PUBLIC_OBA_REGION_CENTER_LNG)
When valid coordinates are provided, the map will center on that location and place a location marker there. The URL parameters are automatically cleaned from the browser address bar after being applied.
To create a production version of your app:
npm run buildYou can preview the production build with npm run preview.
To deploy your app, you may need to install an adapter for your target environment.
Want to contribute? Check out CONTRIBUTING.md for guidelines on finding issues, opening PRs, and code style.