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

Tone
View a larger map

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

packages/primitives/src/CommuteExplorer.astro
PropTypeRequired
coordinatesGeoPointyes
commuteCommuteContentyes
mapTitle

The neighbourhood map (moved here from the detail component's figure): the no-JS iframe fallback + the "view larger map" link.

stringyes
mapEmbedSrcstringyes
mapLinkstringyes
mapLinkLabelstringyes
headingLevel

The subheading level; sits under the neighbourhood section heading.

1 | 2 | 3 | 4 | 5 | 6
GeoPoint — referenced by a prop above
FieldTypeRequired
latnumberyes
lngnumberyes
CommuteContent — referenced by a prop above
FieldTypeRequired
headingstringyes
bodystringyes
inputLabelstringyes
placeholderstringyes
submitLabelstringyes
clearLabelstringyes
resultsPrefixstringyes
modeWalkstringyes
modeCyclestringyes
modeDrivestringyes
modeGroupLabelstringyes
minutesSuffixstringyes
distanceSuffixstringyes
loadingLabelstringyes
notFoundLabelstringyes
errorLabelstringyes
idleLabelstringyes
transitNotestringyes
attributionstringyes