Targeting Reticle
Military-style targeting brackets with tracking and lock-on capabilities.
Installation
First, make sure you have the base map component installed:
npx shadcn@latest add https://www.terrae.dev/map.jsonThen install the targeting reticle component:
npx shadcn@latest add https://www.terrae.dev/targeting-reticle.jsonTracking Animation
The reticle tracks towards a target and locks on when it reaches it. Combine with MapAnimatedPulse to mark the target location. The onLocked callback fires when the target is acquired.
Properties
| Prop | Type | Description |
|---|---|---|
coordinates | [number, number] | Starting position [longitude, latitude] for the reticle. |
target | [number, number] | Target position to track towards. When reached, the reticle locks on. |
size | number | Overall size of the reticle in pixels. |
bracketLength | number | Length of the corner bracket lines in pixels. |
bracketThickness | number | Stroke width of the bracket lines. |
gap | number | Gap between the reticle edge and the brackets. |
color | string | Default bracket and crosshair color (blue). |
lockedColor | string | Color when locked on target (green). |
locked | boolean | Manually control the lock state. |
trackingSpeed | number | Animation speed when tracking (0-1). Higher values are faster. |
showCrosshair | boolean | Show the center crosshair lines. |
showCoordinates | boolean | Display GPS coordinates below the reticle in DMS format. |
onLocked | () => void | Callback fired when the reticle locks onto the target. |
Use Cases
Military Drone Operations
Track reconnaissance drones and mark strategic positions on the battlefield
Wildlife Conservation
Monitor endangered species with GPS collars in protected reserves