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

​

    // data sets

    worldDataSet = [

      {id: "US"}

    ];

    usaDataSet = [

      {id: "US.TX"}

    ];

​

    // world map

    chart = anychart.map();

    chart.geoData(anychart.maps.world);

    worldSeries = chart.choropleth(worldDataSet);

    // usa map

    map = anychart.map();

    map.geoData(anychart.maps.united_states_of_america);

    usaSeries = map.choropleth(usaDataSet);

​

    // texas map

    txMap = anychart.map();

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

​

    // set drill down for maps

    worldSeries.listen("pointClick", function(e) {

    // Drill down to the specified map.

      chart.drillTo(e.point.get("id"), map);

    });

​

    usaSeries.listen("pointClick", function(e) {

    // Drill down to the specified map.

      chart.drillTo(e.point.get("id"), txMap);

    });

​

    // listen for draw event and update path in a title

    chart.listen("chartDraw",function() {

    // get drilldown path

    var path = chart.getDrilldownPath();

    // get link to the current chart

    var cv = path[path.length - 1].getCurrentChart();

    // update path in the title of appropriate instance

    cv.title(printPath(path))

    });

​

    // set chart bounds and display it

    chart.container("container");

    chart.draw();

​

});

​

// function to turn current drill down path structure to string

function printPath(path){

// root element is the World in this case

    var text = "World";

    // go through the next levels

    for (i = 1; i <  path.length; i++) { 

        text +=  " -> " + path[i].getProperties().name;

    }

    return text;

}

​

// drill up

function drillUp() {

  chart.drillUp();

}