Map story

Tell a story the map can follow. As readers scroll, each chapter moves the camera and reveals a route or a travel-time area.

Map + scrolling chapters · Calgary to Lake Louise

Template

Sample data on real Canadian places. The preview runs on unmap's demo key.

Add it with the unmap CLI

Installs the component, any sample data it ships and the shadcn components it uses. React projects only; in a Vue project it stops before changing anything.

npx @unmap/cli add map-story-01

Add to your React app

One command copies the map, interactions, and sample content into your project. The interface follows your shadcn theme.

npx shadcn@latest add https://registry.unmap.dev/r/map-story-01.json

For React apps with shadcn and Base UI already set up. The CLI adds the required components and packages.

Render the template

import { MapStory } from "@/components/unmap-map-story"

<MapStory apiKey="um_live_..." />

Pass your Unmap browser key and allow your site's origin on it. Edit the copied component and sample data in your components and lib folders.

Included in this template

Chapters that move the camera as you scroll
Routes and travel-time areas answered live by the routing API
A readable prose column with a map that stays in view

Customize the map theme

Start with a map that already does something. Make the places, the content, and the colours yours.

Customize the map theme