> For the complete documentation index, see [llms.txt](https://docs.atomui.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.atomui.com/maps/untitled.md).

# Vector Maps

Vector maps are created using [jQuery Mapael](https://github.com/neveldo/jQuery-Mapael). it is a jQuery plugin based on raphael.js that allows you to display dynamic vector maps.

#### Step 1

Add JavaScript library to your body tag on page

```markup
<script src="assets/vendor/raphael/raphael.2.2.7.min.js"></script>
<script src="assets/vendor/mapael/jquery.mapael.min.js"></script>
```

{% hint style="info" %}
you can additional maps like one in demo by including it in js.&#x20;
{% endhint %}

#### Step 2

Add Markup

```markup
 <div class="map-container">
        <div class="map">Alternative content</div>
    </div>
```

{% hint style="warning" %}
Remember to add child to the selector with class name `.map`
{% endhint %}

#### Step 3

Initialize the map with data

```javascript
 $(".map-container").mapael({
        map : {
            name : "world_countries"
        }
    });
```

{% embed url="<https://github.com/neveldo/jQuery-Mapael>" %}