Dotted Map

A component with a svg dotted map.

Installation

# Command to install the component

Examples

Smaller Dots

# Example for smaller dots

PulseMarker

# Example for pulse marker

Usage

// Usage example

With Custom Markers

// Example with custom markers

Props

Prop	Type	Default	Description
`width`	`number`	`150`	Width of the SVG map.
`height`	`number`	`75`	Height of the SVG map.
`mapSamples`	`number`	`5000`	Number of sample points for map generation.
`markers`	`Marker[]`	`[]`	Array of markers to display on the map.
`dotColor`	`string`	`undefined`	Color of the map dots (uses currentColor if not set).
`markerColor`	`string`	`"#FF6900"`	Color of the markers.
`dotRadius`	`number`	`0.2`	Radius of the map dots.
`stagger`	`boolean`	`true`	Whether to stagger dots in alternating rows for visual effect.
`pulse`	`boolean`	`false`	Enables built-in pulse animation for markers.
`renderMarkerOverlay`	`(args) => ReactNode`	`undefined`	Custom render function for marker overlays.
`className`	`string`	`undefined`	Additional class names applied to the SVG.
`style`	`React.CSSProperties`	`undefined`	Inline styles merged into the SVG.

Types

Marker

interface Marker {
  // Define marker properties
}

Note: Set pulse on DottedMap to animate all markers (and use marker.pulse = false to opt out per marker). Without the pulse prop, only markers with marker.pulse = true will pulse.