Animated Pulse
Create eye-catching pulsing dot animations for map markers.
Installation
First, make sure you have the base map component installed:
npx shadcn@latest add https://terrae.vercel.app/maps/map.jsonThen install the animated pulse component:
npx shadcn@latest add https://terrae.vercel.app/maps/map-marker-animated.jsonMultiple Animated Pulses
Create multiple animated pulses with different colors, sizes, and animation speeds to differentiate between different types of markers or data points.
Large Pulse
Create a larger, more prominent pulse animation by increasing the size and adjusting the duration for a slower, more dramatic effect.
Properties
| Property | Type | Default | Description |
|---|---|---|---|
id | string | required | Unique identifier for the pulse |
size | number | required | Pulse size in pixels |
coordinates | [number, number] | required | Position [longitude, latitude] for the pulse |
color | string | "rgba(0, 100, 255, 1)" | Inner circle color (RGBA format) |
pulseColor | string | "rgba(0, 100, 255, 0.8)" | Pulsing outer circle color (RGBA format) |
duration | number | 1000 | Animation duration in milliseconds |
Performance Considerations
- Animated pulses use continuous repainting - use sparingly for best performance
- Larger pulse sizes require more rendering work
- Multiple animated pulses on screen will impact frame rate
- Consider using static markers for large datasets and animated pulses for highlights
- Animation automatically stops when the component unmounts