html, body, #container {

    width: 100%;

    height: 100%;

    margin: 0;

    padding: 0;

}

anychart.onDocumentReady(function () {

    // All maps created with geoData() method work only if you referenced a proper map

    // source file as described at https://docs.anychart.com/Maps/Quick_Start

​

    // This sample uses 3rd party Proj4js JavaScript library to transform coordinates

    // See https://docs.anychart.com/Maps/Map_Projections to learn more.

​

    var worldDataSet = anychart.data.set([

        {id: 'CA', name: 'Canada', value: 'A1'}

    ]);

​

    var canadaMap = anychart.map();

    canadaMap.geoData(anychart.maps.canada);

​

    var chart = anychart.map();

    chart.title('The world map');

​

    chart.listen('drillChange', function () {

        var path = chart.getDrilldownPath();

​

        // Get parent chart.

        var parentChart = path[1].getParentChart();

​

        var title = parentChart.title();

​

        canadaMap.title(title.text() + ' is a parent chart for the Canada map');

    });

​

    chart.geoData(anychart.maps.world);

    chart.choropleth(worldDataSet);

    chart.container('container');

    chart.draw();

    chart.drillTo('CA', canadaMap);

});