Maps is a complete web map app in a shape people already know: a search box, a place card, directions, nearby categories, travel-time areas, road events and transit. It runs at apps.unmap.dev/maps, and its source is a standalone Next.js project you can clone and run with your own key.
It exists for two reasons. It shows the unmap APIs in an interface nobody has to learn, and it is the first real consumer of the component registry: the map, the geocoder, the markers, the route line and the elevation profile are registry items copied in exactly as shadcn add writes them.
What it does
- Search with autocomplete across Canadian addresses and places, and a place card for the result.
- What's here: click anywhere for the nearest address, its municipality and treaty area, the elevation and the time zone.
- Directions by car, transit, bicycle, on foot or by truck, with turn-by-turn steps. Cycling and walking routes account for hills, and a slider sets how much to avoid them.
- Nearby: a category such as cafés or pharmacies around a point, with "Search this area" after you move the map.
- Travel-time areas: the area reachable in 5, 10 and 15 minutes from a point.
- A 15-minute check: which of nine everyday essentials are inside a 15-minute walk or ride.
- Live layers: road incidents, closures and conditions, and transit stops with scheduled departures.
Every request is on screen
The API inspector lists each call the page makes to the gateway as it happens: the path, the status, the latency, the response, and the @unmap/sdk line that makes the same call. Tiles, glyphs and sprites are left out so the list stays readable.
The inspector records at fetch, not inside the SDK. Registry components build their own clients, so a wrapper around window.fetch is the one place that sees every request, and what it shows is what went over the wire.
Built from the registry, unmodified
The app does not fork its components. When a panel needs something an item cannot do, the item changes in the registry and is copied in again, and a test fails if a copy ever drifts from its source. That makes the app an honest preview: every piece of it is something you can install into your own project.
It runs on stock shadcn tokens rather than the unmap brand, because that is what you get when you install the same components.
The URL is the state
Every screen has its own address, in the shapes people already use:
/@51.0443,-114.0631,13z the map at a camera
/dir/<from>/<to>?mode=bicycle&hills=0.3 directions
/reach/-114.06,51.04?minutes=5,10,15 travel-time areas
?map=canopy-dark&layers=transit&lang=fr style, layers and label language
A new screen pushes history so Back works, and a camera move replaces it, so a link always reopens what you were looking at.
What it does not show
These are gaps in the API or the data, and the app says so instead of filling them:
- Opening hours, phone numbers, photos and reviews. The place data does not carry them.
- Alternative routes and voice guidance. A route request returns one route, with written steps.
- Traffic speeds. Road events are incidents, closures and conditions, not live traffic.
- Realtime transit. Departures are scheduled times.
- Legal land descriptions need the
legal-landadd-on. A key without it sees the add-on badge instead.
Geocoding and routing cover Canada; the basemap is worldwide.
Run it yourself
You need Git, Node.js 24, pnpm and a browser key from the dashboard that allows http://localhost:3100.
git clone --depth 1 https://github.com/unmap-dev/maps.git
cd maps
pnpm install --frozen-lockfile
cp .env.example .env.localSet NEXT_PUBLIC_UNMAP_KEY in .env.local to your key, run pnpm dev, and open localhost:3100. Start by changing the initial camera in lib/config.ts, then the panels in components/maps/. The quickstart covers keys and allowed origins, and Components covers installing the same pieces into an app you already have.
