edward/openstreetmap-tools
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Make public transport routes discoverable with shareable search

Browse source 
Add one-click examples and route search by number or metadata, with transport type, location and map-area filters. Preserve search filters and bounds in shareable URLs and restore searches on reload and browser navigation.

Validate with 91 passing tests, including desktop and mobile browser coverage, and strict mypy checks.

Closes #2
This commit is contained in:
Edward Betts 2026-09-30 22:23:45 +01:00
parent 29afb4f115
commit a79b0a7098
7 changed files with 919 additions and 12 deletions
Download patch file Download diff file Expand all files Collapse all files

32
web/templates/api.html
View file

@ -28,9 +28,35 @@
<p>All endpoints are read-only and require no authentication. Data is fetched
live from the <a href="https://wiki.openstreetmap.org/wiki/API_v0.6">OSM API v0.6</a>.
Relation IDs can be found on
<a href="https://www.openstreetmap.org">openstreetmap.org</a> — search for a
route and click through to its relation page.</p>
Route search uses <a href="https://wiki.openstreetmap.org/wiki/Overpass_API">Overpass</a>
to find relation IDs by route metadata.</p>
<h2><span class="badge bg-primary me-2">GET</span><code>/api/search?q=TEXT&amp;mode=TYPE</code></h2>
<p>Search worldwide for public transport <code>route</code> and <code>route_master</code>
relations. Required <code>q</code> is 2–100 characters. Route numbers (<code>ref</code>)
match exactly; names, termini, operators and networks match literal substrings,
case-insensitively. Optional <code>mode</code> filters by a supported transport type.</p>
<p>Optional <code>south</code>, <code>west</code>, <code>north</code> and <code>east</code>
coordinates restrict the search to routes with mapped members within a bounding box,
including their parent route masters. All four coordinates are required together.
Routes may extend outside the box. Bounds must be finite and ordered, span at most
20 degrees in either direction, and must not cross the date line.</p>
<p>Returns <code>{"routes": [...], "truncated": false}</code>. Each result has
<code>id</code>, <code>name</code>, <code>ref</code>, <code>from</code>, <code>to</code>,
<code>operator</code>, <code>network</code>, <code>route</code> (transport type) and
<code>type</code> (relation type). At most 50 results are returned; <code>truncated</code>
indicates more matches. No matches returns an empty list. Invalid input returns
400 <code>invalid_query</code>; upstream failures return 502 <code>osm_error</code>.</p>
<pre>GET /api/search?q=M11&amp;mode=subway</pre>
<pre>GET /api/search?q=24&amp;mode=bus&amp;south=51.39&amp;west=-2.73&amp;north=51.55&amp;east=-2.51</pre>
<h2><span class="badge bg-primary me-2">GET</span><code>/api/locations?q=PLACE</code></h2>
<p>Find up to five candidate places using Nominatim. Required <code>q</code> is 2–100
characters. Returns <code>{"locations": [{"label": "...", "bounds": [south, west, north, east]}]}</code>.
An empty list means no matching location. Invalid input returns 400 <code>invalid_query</code>;
upstream failures return 502 <code>osm_error</code>. Location lookups are submitted explicitly,
cached and limited to one upstream request per second per application process.</p>
<pre>GET /api/locations?q=Bristol%2C+UK</pre>
<p>All error responses return JSON with at least <code>error</code> (machine-readable
code) and <code>message</code> (human-readable description) fields.</p>

84
web/templates/index.html
View file

@ -32,15 +32,90 @@
<!-- Scrollable content area -->
<div id="sidebar-inner">
<form id="route-search-form" class="mb-3">
<label for="route-search" class="form-label fw-semibold small">Find a public transport route</label>
<div class="input-group input-group-sm mb-2">
<input id="route-search" type="search" class="form-control" required
minlength="2" maxlength="100" placeholder="e.g. M11 or Bristol Airport"
aria-describedby="search-help">
<button id="search-button" class="btn btn-primary" type="submit">Search</button>
</div>
<label for="search-mode" class="visually-hidden">Transport type</label>
<select id="search-mode" class="form-select form-select-sm">
<option value="">All transport types</option>
<option value="bus">Bus</option>
<option value="trolleybus">Trolleybus</option>
<option value="tram">Tram</option>
<option value="subway">Subway / metro</option>
<option value="train">Train</option>
<option value="light_rail">Light rail</option>
<option value="monorail">Monorail</option>
<option value="ferry">Ferry</option>
<option value="funicular">Funicular</option>
</select>
<label for="search-location" class="form-label small mt-2 mb-1">Location (optional)</label>
<input id="search-location" class="form-control form-control-sm" type="text"
minlength="2" maxlength="100" placeholder="e.g. Bristol, UK" autocomplete="off"
aria-describedby="search-area-help">
<div class="form-check mt-2">
<input id="search-map-area" class="form-check-input" type="checkbox">
<label for="search-map-area" class="form-check-label small">Search this map area</label>
</div>
<p id="search-help" class="form-text mb-0">Search by route number, name,
destination, operator or network. Route numbers match exactly.</p>
<p id="search-area-help" class="form-text mb-0">Leave location blank to search worldwide,
or limit to a place or the current map view. Routes can extend outside the area.</p>
<p id="search-area-label" class="small mt-2 mb-0"></p>
<p class="form-text mb-0">After searching, copy the page URL to share these filters.</p>
<div id="location-results" class="list-group small mt-2"></div>
<p id="search-status" class="small mt-2 mb-0" role="status" aria-live="polite"></p>
<div id="search-results" class="list-group small mt-2"></div>
</form>
<!-- A first route is one click away; no OSM knowledge required. -->
<details class="mb-3"{% if not relation_id %} open{% endif %}>
<summary class="fw-semibold">Try a public transport route</summary>
<p class="small mt-2 mb-2">View a route on the map and download it as GeoJSON.
Choose an example to get started:</p>
<div class="list-group small mb-2">
<a class="list-group-item list-group-item-action"
href="{{ url_for('route_page', relation_id=18892969) }}">
<span class="fw-semibold d-block">Bristol airport bus A1</span>
<span class="text-muted">Airport → Bus Station · Bus</span>
</a>
<a class="list-group-item list-group-item-action"
href="{{ url_for('route_page', relation_id=15083963) }}">
<span class="fw-semibold d-block">Istanbul Metro M11</span>
<span class="text-muted">One direction · Subway</span>
</a>
<a class="list-group-item list-group-item-action"
href="{{ url_for('route_page', relation_id=15083966) }}">
<span class="fw-semibold d-block">Istanbul M11 — all directions</span>
<span class="text-muted">Compare routes, then choose a direction</span>
</a>
</div>
<details{% if not relation_id %} open{% endif %} class="small">
<summary class="fw-semibold">How to use this tool</summary>
<ol class="ps-3 mt-2 mb-0">
<li>Search and choose a result, try an example, or paste a route URL below.</li>
<li>Download the full route, or select a start stop and then an end stop to preview a segment.</li>
<li>Choose whether to include stops, then download your GeoJSON file.</li>
</ol>
</details>
</details>
<!-- Load form -->
<form method="post" action="{{ url_for('load') }}" class="mb-3">
<label class="form-label fw-semibold small">Relation ID or OSM URL</label>
<label for="relation-input" class="form-label fw-semibold small">Load your own route</label>
<div class="input-group input-group-sm">
<input type="text" name="relation" class="form-control"
placeholder="e.g. 15083963"
<input type="text" name="relation" id="relation-input" class="form-control"
placeholder="Relation ID or OSM URL" aria-describedby="relation-help" required
value="{{ relation_id or '' }}">
<button class="btn btn-primary" type="submit">Load</button>
</div>
<p id="relation-help" class="form-text mb-0">Paste an OpenStreetMap route relation URL
(e.g. https://www.openstreetmap.org/relation/15083963) or its numeric ID.
A relation groups the ways and stops belonging to a route.</p>
</form>
<!-- Error alert -->
@ -141,6 +216,9 @@
// Injected by Flask so app.js works correctly under any mount path.
const RELATION_ID = {{ relation_id | tojson }};
const URLS = {
indexPage: {{ url_for('index') | tojson }},
searchApi: {{ url_for('api_search') | tojson }},
locationsApi: {{ url_for('api_locations') | tojson }},
routeApi: {{ url_for('api_route', relation_id=0)[:-1] | tojson }},
segmentApi: {{ url_for('api_segment', relation_id=0)[:-1] | tojson }},
routeMasterApi: {{ url_for('api_route_master', relation_id=0)[:-1] | tojson }},