New Search UI (#55)

Fixes #56 

* Display the full region name in the header bar
* New search experience
* feat: Add stops-for-route api
* refactor: MapContainer component to export mapProvider and mapSource variables
* refactor: OpenStreetMapProvider to separate arrow decoration logic
* chore: Update eslint.config.js to include 'google' as a readonly global variable
* feat: Add StopItem component
* refactor:  Add handling for search for route state
* refactor: Separate stop marker logic into a reusable function
* feat: RouteModal Component
* feat: SearchPane implementation
* refactor: Separate stop marker logic into a reusable function
* refactor: Add all search management (zoom, pan, poly lines) functionality into Google and OSM map providers

---------

Co-authored-by: Ahmedhossamdev <[email protected]>

.env.example

@@ -1,10 +1,11 @@
 PUBLIC_OBA_REGION_NAME="Puget Sound"
-PUBLIC_OBA_SEARCH_ENABLED=true
 PUBLIC_OBA_SERVER_URL="https://api.pugetsound.onebusaway.org/"
 PUBLIC_OBA_REGION_CENTER_LAT=47.60728155903877
 PUBLIC_OBA_REGION_CENTER_LNG=-122.3339240843084
 PUBLIC_OBA_GOOGLE_MAPS_API_KEY=""
 PRIVATE_OBA_API_KEY="test"
+PRIVATE_OBA_GEOCODER_API_KEY=""
+PRIVATE_OBA_GEOCODER_PROVIDER="google"
 PUBLIC_OBA_LOGO_URL="https://onebusaway.org/wp-content/uploads/oba_logo-1.png"
 PUBLIC_OBA_MAP_PROVIDER="osm"
 PUBLIC_NAV_BAR_LINKS={"Home": "/","About": "/about","Contact": "/contact","Fares & Tolls": "/fares-and-tolls"}

README.md

@@ -15,16 +15,28 @@ npm run dev
 
 See `.env.example` for an example of the required keys and values.
 
+### Visuals
+
 - `PUBLIC_OBA_REGION_NAME` - string: displayed in the header.
 - `PUBLIC_OBA_LOGO_URL` - string: The URL of your transit agency's logo.
-- `PUBLIC_OBA_SEARCH_ENABLED` - boolean: whether the search APIs in newer OBA REST API versions are supported.
+- `PUBLIC_NAV_BAR_LINKS` - JSON string: A dictionary of the links displayed across the navigation bar.
+
+### OBA Server
+
 - `PUBLIC_OBA_SERVER_URL` - string: Your OBA API server's URL.
 - `PUBLIC_OBA_REGION_CENTER_LAT` - float: The region's center latitude.
 - `PUBLIC_OBA_REGION_CENTER_LNG` - float: The region's center longitude.
-- `PUBLIC_OBA_GOOGLE_MAPS_API_KEY` - string: Your Google API key. Leave this blank if you don't have one.
 - `PRIVATE_OBA_API_KEY` - string: Your OneBusAway REST API server key.
+
+### Maps
+
+- `PUBLIC_OBA_GOOGLE_MAPS_API_KEY` - string: Your Google API key. Leave this blank if you don't have one.
 - `PUBLIC_OBA_MAP_PROVIDER` - string: Use "osm" for OpenStreetMap or "google" for Google Maps.
-- `PUBLIC_NAV_BAR_LINKS` - JSON string: A dictionary of the links displayed across the navigation bar.
+
+### Geocoding
+
+- `PRIVATE_OBA_GEOCODER_API_KEY` - string: Your Geocoder service's API key. Leave this blank if you don't have one.
+- `PRIVATE_OBA_GEOCODER_PROVIDER` - string: Your Geocoder service. We currently only support the Google Places SDK (value: "google").
 
 ## Building
 

eslint.config.js

@@ -14,7 +14,8 @@ export default [
 			globals: {
 				...globals.browser,
 				...globals.node,
-				L: 'readonly'
+				L: 'readonly',
+				google: 'readonly'
 			}
 		}
 	},