All templates

Local guide

Give your places a point of view. Connect short stories to a sequence of stops on the map.

Map + guided stops · Montréal
Sample content

A different pace in Montréal

Four places to pause, from the canal to the mountain.

Stop 1 of 4

Begin beside the water. The canal gives this guide its first change of pace: a long view through a city usually seen block by block.

Demonstration content. Business locations and public notices are fictional; guide landmarks are real.

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/local-guide-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 { LocalGuide } from "@/components/unmap-local-guide"

<LocalGuide 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

  • A sequence of linked stops
  • Place notes beside the map
  • Previous and next navigation

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