Vector Maps

Theme use AmCharts Maps that permit to create beautiful and dynamic vector maps.

You will find all documentation and plugin options in official website.

Vector Map Documentation

How to Create a Map?

1. Add specific javascript

Add inside body at the end of your page, before main template scripts:

<script src="assets/plugins/maps-amcharts/ammap/ammap.min.js" type="text/javascript"></script>

Then, add script of map that you want. You will find all maps available in folder admin/assets/plugins/maps-amcharts/ammap/maps/js/.

For example, if you want world map, you will add this script after ammap.min.js script:

<script src="assets/plugins/maps-amcharts/ammap/maps/js/worldLow.min.js" type="text/javascript"></script>

2. Create your map markup

Next, you should create a div which will hold your map. Add this to your HTML body where you want that map appear (you can change id, width and height):

<div id="mapdiv" style="width: 600px; height: 400px;"></div>

3. Add some Javascript

Now we’ll do some JavaScripting to indicate parameters and options we want. Below is a script with comments which should produce a simple World map:

// add all your code to this method, as this will ensure that page is loaded
    AmCharts.ready(function() {
        // create AmMap object
        var map = new AmCharts.AmMap();
        // set path to images
        map.pathToImages = "ammap/images/";

        /* create data provider object
         map property is usually the same as the name of the map file.

         getAreasFromMap indicates that amMap should read all the areas available
         in the map data and treat them as they are included in your data provider.
         in case you don't set it to true, all the areas except listed in data
         provider will be treated as unlisted.
        */
        var dataProvider = {
            map: "worldLow",
            getAreasFromMap:true                    
        }; 
        // pass data provider to the map object
        map.dataProvider = dataProvider;

        /* create areas settings
         * autoZoom set to true means that the map will zoom-in when clicked on the area
         * selectedColor indicates color of the clicked area.
         */
        map.areasSettings = {
            autoZoom: true,
            selectedColor: "#CC0000"
        };

        // let's say we want a small map to be displayed, so let's create it
        map.smallMap = new AmCharts.SmallMap();

        // write the map to container div
        map.write("mapdiv");
    });

For inspiration, you can find some maps examples here http://www.amcharts.com/demos/capitals-map/.