Make Admin Template Documentation

## 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/.