Dotted Map

An interactive world map visualization with customizable markers and styling.

Installation

pnpm dlx shadcn-svelte@latest add https://sv-animations.vercel.app/r/dotted-map.json

Customize the size of the dots on the map for a finer or coarser appearance.

An SVG-based world map with dots and customizable markers.

Name	Type	Default	Description
`width`	`number`	`150`	`Width of the map`
`height`	`number`	`75`	`Height of the map`
`mapSamples`	`number`	`5000`	`Number of dots to render on the map`
`markers`	`Marker[]`	`[]`	`Array of marker objects with lat, lng, and optional size`
`dotColor`	`string`	`undefined`	`Color of the dots (uses currentColor if not specified)`
`markerColor`	`string`	`#FF6900`	`Color of the marker dots`
`dotRadius`	`number`	`0.2`	`Radius of each dot`
`stagger`	`boolean`	`true`	`Whether to stagger alternating rows`
`class`	`string`	`""`	`Additional CSS classes to apply`
`style`	`string`	`""`	`Inline styles to apply`

Marker object interface for specifying locations on the map.

Name	Type	Default	Description
`lat`	`number`	`required`	`Latitude of the marker`
`lng`	`number`	`required`	`Longitude of the marker`
`size`	`number`	`dotRadius`	`Optional custom size for this marker`