Radar

97.14% covered

Animated radar sweep signal overlay on map coordinates.

Installation

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

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

Then install the radar component:

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

Use color, gridColor, and backgroundColor to theme each radar independently.

Control the rotation speed with duration. Lower values create a faster sweep, higher values create a slower, more deliberate rotation.

Set rings to control the number of concentric range rings displayed on the radar.

Set showCrosshairs to false to hide the horizontal and vertical crosshair lines for a cleaner look.

Prop	Type	Default	Description
`coordinates`	`[number, number]`	`—`	Position [longitude, latitude] for the radar center.
`size`	`number`	`200`	Radar diameter in pixels.
`color`	`string`	`rgba(0, 255, 70, 1)`	Primary color for the sweep line, center dot, and outer ring.
`gridColor`	`string`	`rgba(0, 255, 70, 0.3)`	Color of the concentric rings and crosshair lines.
`backgroundColor`	`string`	`rgba(0, 20, 0, 0.8)`	Background fill color of the radar circle.
`duration`	`number`	`2000`	Time in milliseconds for one full sweep rotation.
`rings`	`number`	`4`	Number of concentric range rings.
`showCrosshairs`	`boolean`	`true`	Show the horizontal and vertical crosshair lines.
`pitchAlignment`New	`"map" \| "viewport" \| "auto"`	`map`	Controls how the radar is aligned when the map is pitched. Use "viewport" to keep the radar facing the screen.