World Map

Displays a customizable world map with animated arcs and pulse effects for geographical points.

API

Prop Name	Type	Default	Description
`dots`	`Array<{ start: { lat: number; lng: number; label?: string }, end: { lat: number; lng: number; label?: string } }>`	`[]`	Array of dot objects, each containing a start and end coordinate (latitude, longitude).
`class`	`string`	`""`	Additional CSS classes for custom styling.
`lineColor`	`string`	`"#0EA5E9"`	Color of the arcs and dot borders.
`mapColor`	`string`	—	Main color of the dotted map. (Required)
`mapBgColor`	`string`	—	Background color of the map. (Required)

Note: This component uses Spline & requires dotted-map npm package as a dependency.

npm

pnpm

bun

yarn

npx shadcn-vue@latest add "https://inspira-ui.com/r/world-map.json"

npm

pnpm

bun

yarn

npm install dotted-map

You can copy and paste the following code to create this component:

WorldMap.vue

Animated Arcs: Smooth arcs between two geographical points using an SVG path.
Dotted Background: Renders a dotted map using the DottedMap library.
Pulsing Markers: Each point animates with expanding circles to highlight the location.
Dynamic Projection: Projects latitude/longitude to an 800x400 coordinate plane.
Customizable Colors: Control lineColor, mapColor, and mapBgColor.

On This Page