Drill Down Maps

• Overview
• Methods
  • Drill To
  • Drill Up
  • Drill Down Map
  • Get Drill Down Path

Overview

DrillDown Maps are useful but rather complicated, so we have created several methods to simplify the process of managing them. To find information about creating Drill Down Maps and using AJAX read the Basic Tutorial and AJAX Tutorial.

In all samples of this article all necessary maps are being loaded ahead as scripts. Look at the Maps List for the list of AnyMaps and Maps Quick Start article to know how to load the maps. This way of working with maps can be reasonable in case if there is no need in a big amount of maps; otherwise, it's better to use AJAX requests, because a big amount of preloaded maps slows the page loading down.

Methods

The following methods make working with drill down easier:

• drillTo(),
• drillUp(),
• drillDownMap()
• getDrilldownPath().

Drill To

Using the .drillTo() method will drill down to a selected region. This method requires the ID of the region/country and the map which matches the defined region and will be loaded. This method is used naturally in listeners.

// Drill down to specified map
map.drillTo("US", usaMap);

Another way to create a map with a drill down function is not to specify all maps ahead but use AJAX instead. In case of managing quite a big number of maps, it's better to use AJAX requests. Then there will be no need in loading all maps at once, which reduces inital the page loading time. Find all information about using AJAX to create drill dowm maps in the AJAX Tutorial.

Drill Up

The drillUp() method loads the map of the previous level. This method requires no params, it works only when drill down caused by drillTo() or drillDownMap() happened prior to its execution. In the following sample we have set listeners to the chart title.

// drill up
map.drillUp();

Drill Down Map

Another way to create a map with drill down is drillDownMap() method, which defines transitions of drill down. This method requires those regions into which we want to perform a drill down. Besides this method, we should also set the appropriate selection mode. The code should look like this:

// set the selection mode    
map.interactivity().selectionMode("drillDown");

// set the drillDownMaps
map.drillDownMap({
    "US": usaMap,        
    "CA": canadaMap
});

More information about the use of these methods can be found in the Basic Tutorial and the AJAX Tutorial.

Get Drill Down Path

When we drill down into the map, we may need to get the whole path to the current level. That's when we use the getDrilldownPath() method. It returns the array of points of MapPoint type, which represent the regions that were clicked and used for drill down. Note that there is a root element in the drill down path which is a bit different from other elements as it contains no level. Let's make the title of the next sample show this path.

// get drilldown path
var path = map.getDrilldownPath();
      
// update path in the title of appropriate instance
map.title(printPath(path))

// 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;
}

In the sample above the getCurrentChart() method is used to obtain the link to the current map. A custom function printpath(path) helps to print the whole path in the title of the chart.

Using the getDrilldownPath() method, we can make it easier to drill into any of the levels previous to the current one. That's where the Breadcrumbs help us. See the Breadcrumbs article to know how they can be used with the described method.