html,

body,

#container {

  width: 100%;

  height: 100%;

  margin: 0;

  padding: 0;

}

anychart.onDocumentReady(function () {

  // create map chart

  var map = anychart.map();

​

  // set map title

  map.title('Default map projection is WSG84');

​

  // set crs change animation duration

  map.crsAnimation().duration(300);

​

  // set map geo data

  map.geoData('anychart.maps.world_source');

​

  // set container id for the map

  map.container('container');

  // initiate map drawing

  map.draw();

​

  // list of available projections

  // see https://api.anychart.com/anychart.enums.MapProjections for details

  var projectionsList = [

    'bonne',

    'eckert1',

    'eckert3',

    'equirectangular',

    'fahey',

    'hammer',

    'aitoff',

    'mercator',

    'robinson',

    'wagner6',

    'wsg84',

    'august'

  ];

​

  // util vars for projection update cycle

  var index = 0;

  var count = projectionsList.length;

​

  // set timer to change map projection every 500 mc

  setInterval(function () {

    // loop projection index

    if (index >= count) index %= count;

​

    // take projection name from the list

    var projection = projectionsList[index];

​

    // update map title

    map.title('Map projection: ' + projection);

​

    // set projection to the map

    map.crs(projection);

​

    index++;

  }, 1500);

});