Vector Maps

Vector maps are created using 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

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

you can additional maps like one in demo by including it in js.

Step 2

Add Markup

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

Remember to add child to the selector with class name .map

Step 3

Initialize the map with data

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

GitHub - neveldo/jQuery-Mapael: jQuery plugin based on raphael.js that allows you to display dynamic vector mapsGitHub