Weighted heatmap

A heatmap of sixty illustrative points around Toronto. Switch between counting each point once and weighing it, and watch the hot spots move.

Map + heatmap layer · Toronto

Example

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-heatmap-01

Add to your React app

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

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

Render the component

import { MapHeatmap } from "@/components/unmap-map-heatmap"

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

What it includes

Built on heatmap-layer
Illustrative points included

Example

One registry item on a real Canadian place, ready to copy into a React app.

Read the component's guide Registry item (JSON)