html, body {

    width: 100%;

    height: 100%;

    margin: 0;

    padding: 0;

}

button {

    margin: 10px 0 0 10px;

}

#container {

    position: absolute;

    width: 100%;

    top: 35px;

    bottom: 0;

}

anychart.onDocumentReady(function () {

​

    // This sample uses 3rd party proj4 component

    // that makes it possible to set coordinates

    // for the points and labels on the map and

    // required for custom projections and grid labels formatting.

    // See https://docs.anychart.com/Maps/Map_Projections

​

    // world map

    chart = anychart.map();

​

    // major maps

    map = anychart.map();

​

    // canada map

    canadaMap = anychart.map();

​

    worldDataSet = [

      {id: "US", name: "USA", value: "1"},

      {id: "CA", name: "Canada", value: "2", fill: "#FF9966"}

    ];

​

    usaDataSet = [

      {"id": "US.LA", "value": 22},

      {"id": "US.TX", "value": 23},

      {"id": "US.NY", "value": 45}

    ];

​

    canadaDataSet = [

      {"id": "CA.BC", "value": 3},

      {"id": "CA.NF", "value": 11},

      {"id": "CA.PE", "value": 12}

    ];

​

    // world data and series

    chart.geoData(anychart.maps.world);

    worldSeries = chart.choropleth(worldDataSet);

​

    // usa data and series

    map.geoData(anychart.maps.united_states_of_america);

    usaSeries = map.choropleth(usaDataSet);

​

    // canada data and series

    canadaMap.geoData(anychart.maps.canada);

    canadaSeries = canadaMap.choropleth(canadaDataSet);

    canadaSeries.fill("#FF9966");

​

    // regions maps

    txMap = anychart.map();

    txMap.geoData(anychart.maps["texas"]);

​

    laMap = anychart.map();

    laMap.geoData(anychart.maps["louisiana"]);

​

    nyMap = anychart.map();

    nyMap.geoData(anychart.maps["new_york"]);

​

    bcMap = anychart.map();

    bcMap.geoData(anychart.maps["british_columbia"]);

    nfMap = anychart.map();

    nfMap.geoData(anychart.maps["newfoundland_and_labrador"]);

​

    peMap = anychart.map();

    peMap.geoData(anychart.maps["prince_edward_island"]);

​

    // set the drillDownMaps

    chart.drillDownMap({

      "US": map,        

      "CA": canadaMap

    });

​

    map.drillDownMap({

      "US.LA": laMap,  

      "US.TX": txMap,   

      "US.NY": nyMap

    });

​

    canadaMap.drillDownMap({

      "CA.BC": bcMap,  

      "CA.NF": nfMap,   

      "CA.PE": peMap

    });

​

    // set the selectionMode    

    chart.interactivity({selectionMode: "drill-down"});

​

    chart.container("container");

    chart.draw();   

});

// drill up 

function drillUp() {

  chart.drillUp();

}