Compass

57.02% covered

Interactive compass with drag-to-rotate functionality.

Installation

First, make sure you have the base map component installed:

npx shadcn@latest add https://www.terrae.dev/map.json

Then install the compass component:

npx shadcn@latest add https://www.terrae.dev/compass.json

The compass supports t-shirt sizes (sm, md, lg, xl) or custom numeric pixel values. Each size is optimized for different use cases.

For a cleaner look, disable the outer ring and cardinal labels.

Enable showBearing to display the current rotation angle in degrees below the compass.

Enable automatic rotation with the autoRotate prop. Control the speed with autoRotateSpeed (degrees per frame).

Prop	Type	Default	Description
`size`	`"sm" \| "md" \| "lg" \| "xl" \| number`	`"md"`	Compass size. T-shirt sizes map to 48, 64, 80, 96 pixels respectively.
`position`	`"top-left" \| "top-right" \| "bottom-left" \| "bottom-right"`	`"top-right"`	Position of the compass on the map.
`showCardinals`	`boolean`	`true`	Show N, S, E, W cardinal direction labels.
`showRing`	`boolean`	`true`	Show outer ring with degree tick marks.
`showBearing`	`boolean`	`false`	Display current bearing in degrees below the compass.
`autoRotate`	`boolean`	`false`	Enable automatic rotation of the compass.
`autoRotateSpeed`	`number`	`2`	Speed of auto rotation in degrees per frame.
`className`	`string`	`—`	Additional CSS classes for the wrapper element.