title: World Map
description: Displays a customizable world map with animated arcs and pulse effects for geographical points.
---

```vue
<template>
  <div class="w-full bg-white py-40 dark:bg-black">
    <div class="mx-auto max-w-7xl text-center">
      <p class="text-xl font-bold text-black md:text-4xl dark:text-white">
        Remote
        <span class="text-neutral-400">
          <Motion
            v-for="(word, idx) in 'Connectivity'.split('')"
            :key="idx"
            as="span"
            class="inline-block"
            :initial="{ x: -10, opacity: 0 }"
            :animate="{ x: 0, opacity: 1 }"
            :transition="{ duration: 0.5, delay: idx * 0.04 }"
          >
            {{ word }}
          </Motion>
        </span>
      </p>
      <p class="mx-auto max-w-2xl py-4 text-sm text-neutral-500 md:text-lg">
        Break free from traditional boundaries. Work from anywhere, at the comfort of your own
        studio apartment. Perfect for Nomads and Travellers.
      </p>
    </div>
    <WorldMap
      :dots="dots"
      :map-color="isDark ? '#FFFFFF40' : '#00000040'"
      :map-bg-color="isDark ? 'black' : 'white'"
    />
  </div>
</template>

<script lang="ts" setup>
import { Motion } from "motion-v";

const dots = [
  {
    start: {
      lat: 64.2008,
      lng: -149.4937,
    }, // Alaska (Fairbanks)
    end: {
      lat: 34.0522,
      lng: -118.2437,
    }, // Los Angeles
  },
  {
    start: { lat: 64.2008, lng: -149.4937 }, // Alaska (Fairbanks)
    end: { lat: -15.7975, lng: -47.8919 }, // Brazil (Brasília)
  },
  {
    start: { lat: -15.7975, lng: -47.8919 }, // Brazil (Brasília)
    end: { lat: 38.7223, lng: -9.1393 }, // Lisbon
  },
  {
    start: { lat: 51.5074, lng: -0.1278 }, // London
    end: { lat: 28.6139, lng: 77.209 }, // New Delhi
  },
  {
    start: { lat: 28.6139, lng: 77.209 }, // New Delhi
    end: { lat: 43.1332, lng: 131.9113 }, // Vladivostok
  },
  {
    start: { lat: 28.6139, lng: 77.209 }, // New Delhi
    end: { lat: -1.2921, lng: 36.8219 }, // Nairobi
  },
];

const isDark = computed(() => useColorMode().value == "dark");
</script>

```

## 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**)                                             |

::alert{type="info"}
**Note:** This component uses Spline & requires `dotted-map` npm package as a dependency.
::

## Install using CLI

```vue
<InstallationCli component-id="world-map" />
```

## Install Manually

### Install the dependencies

::code-group

```bash [npm]
npm install dotted-map
```

```bash [pnpm]
pnpm install dotted-map
```

```bash [bun]
bun add dotted-map
```

```bash [yarn]
yarn add dotted-map
```

::

## Component Code

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

::code-group

::CodeViewerTab{label="WorldMap.vue" language="vue" componentName="WorldMap" type="ui" id="world-map"}
::

::

## Features

- **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.

## Credits

- Ported from (World Map by Aceternity UI)[https://ui.aceternity.com/components/world-map].