Commute explorer
How far is this home from your life — map and route.
The interactive "how far is this home from your life?" block on the detail pages (ADR 0025). It owns the neighbourhood map: rendered as the map cell of the neighbourhood grid, beside the what's-nearby list. A tenant types a place; the block shows travel time and distance by walk, cycle or drive, and draws the chosen route on an interactive map.
Routing is keyless. Nominatim geocodes the origin and the FOSSGIS OSRM instances — the ones behind openstreetmap.org's directions — return duration, distance and geometry. No API key, no backend. The map is Leaflet, and it replaces a static OpenStreetMap<iframe> that stays inside the container as the no-JS fallback.
The times list is the accessible answer, and the drawn route enriches it (EAA, ADR 0007) — not the other way round. Mode tabs pick which of the three routes is drawn, defaulting to drive, with all three geometries cached so switching is instant. Transit is deferred: there is no keyless pan-Nordic provider, so v1 ships three modes and a note.
The entered origin persists in localStorage, so it applies automatically across every detail page and a tenant can compare homes without re-typing. There is an explicit Clear control. Swap-safe on the Gallery's tracked-engine idiom — Leaflet is destroyed onastro:before-swap — rather than the browser's listener-only one.
Try it. Type a real place and submit: this preview talks to the live public OSM servers. That is also the open question the ADR flags — on submit, the typed place leaves the browser, so a privacy statement and owned or keyed routing are launch-gating items.
Live, against the public OSM servers
How far is this home from your life?
Enter a place you travel to often. We show the time and distance from this home, and draw the route.
Enter a place to see the journey.
Public transport is not available yet.
Routing by OSRM. Map data © OpenStreetMap contributors.
Props
| Prop | Type | Required |
|---|---|---|
| coordinates | GeoPoint | yes |
| commute | CommuteContent | yes |
| mapTitle The neighbourhood map (moved here from the detail component's figure): the no-JS iframe fallback + the "view larger map" link. | string | yes |
| mapEmbedSrc | string | yes |
| mapLink | string | yes |
| mapLinkLabel | string | yes |
| headingLevel The subheading level; sits under the neighbourhood section heading. | 1 | 2 | 3 | 4 | 5 | 6 | — |
| Field | Type | Required |
|---|---|---|
| lat | number | yes |
| lng | number | yes |
| Field | Type | Required |
|---|---|---|
| heading | string | yes |
| body | string | yes |
| inputLabel | string | yes |
| placeholder | string | yes |
| submitLabel | string | yes |
| clearLabel | string | yes |
| resultsPrefix | string | yes |
| modeWalk | string | yes |
| modeCycle | string | yes |
| modeDrive | string | yes |
| modeGroupLabel | string | yes |
| minutesSuffix | string | yes |
| distanceSuffix | string | yes |
| loadingLabel | string | yes |
| notFoundLabel | string | yes |
| errorLabel | string | yes |
| idleLabel | string | yes |
| transitNote | string | yes |
| attribution | string | yes |