All templates

Store locator

Help people find the branch nearest them. Search pulls the map in, the list follows the view, and the branch they pick shows its drive-time area and directions.

Branch list · Ottawa
Page block

Previews run the installed code on unmap's demo key, with stock shadcn components and the unmap theme. In your project it takes on your theme.

Add it with the unmap CLI

Detects Next.js or Nuxt, puts the page in place, installs the components it uses and declares the key variable.

npx @unmap/cli add store-locator

Add to your Next.js app

npx shadcn@latest registry add @unmap=https://registry.unmap.dev/r/{name}.json
npx shadcn@latest add @unmap/store-locator

Add to your Nuxt app

npx shadcn-vue@latest add https://registry.unmap.dev/r/vue/store-locator.json

The page reads your browser key from NEXT_PUBLIC_UNMAP_KEY on Next.js, or from NUXT_PUBLIC_UNMAP_KEY on Nuxt, which also needs runtimeConfig: { public: { unmapKey: "" } } in nuxt.config (unmap add writes both). Allow your site's origin on the key.

What it includes

  • Search with clustered branches and a list that follows the map
  • A drive-time area around the branch you pick
  • Directions to it, on Ottawa Public Library branches (City of Ottawa open data)

Page block

A whole page that calls the unmap API with your key. It installs in Next.js or Nuxt and takes on your shadcn theme.