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);

});