Drill-down Map

Click on any continent - the map will be zoomed-in and then a country-level map will be displayed. You can easily create drill-down maps using our product.

by Rohit Bisht

HTML

<script src="https://www.amcharts.com/lib/4/core.js"></script>
<script src="https://www.amcharts.com/lib/4/maps.js"></script>
<script src="https://www.amcharts.com/lib/4/geodata/worldLow.js"></script>
<script src="https://www.amcharts.com/lib/4/geodata/continentsLow.js"></script>
<script src="https://www.amcharts.com/lib/4/themes/animated.js"></script>
<div id="chartdiv"></div>

CSS

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

#chartdiv {
  width: 100%;
  height: 500px;
}

JavaScript

/**
 * ---------------------------------------
 * This demo was created using amCharts 4.
 * 
 * For more information visit:
 * https://www.amcharts.com/
 * 
 * Documentation is available at:
 * https://www.amcharts.com/docs/v4/
 * ---------------------------------------
 */

// Themes begin
am4core.useTheme(am4themes_animated);
// Themes end

// Create map instance
var chart = am4core.create("chartdiv", am4maps.MapChart);

// Set projection
chart.projection = new am4maps.projections.Mercator();

var restoreContinents = function(){
  hideCountries();
  chart.goHome();
};

// Zoom control
chart.zoomControl = new am4maps.ZoomControl();

var homeButton = new am4core.Button();
homeButton.events.on("hit", restoreContinents);

homeButton.icon = new am4core.Sprite();
homeButton.padding(7, 5, 7, 5);
homeButton.width = 20;
homeButton.icon.path = "M16,8 L14,8 L14,16 L10,16 L10,10 L6,10 L6,16 L2,16 L2,8 L0,8 L8,0 L16,8 Z M16,8";
homeButton.marginBottom = 10;
homeButton.parent = chart.zoomControl;
homeButton.insertBefore(chart.zoomControl.plusButton);

// Shared
var hoverColorHex = "#9a7bca";
var hoverColor = am4core.color(hoverColorHex);
var hideCountries = function() {
  countryTemplate.hide();
  labelContainer.hide();
};

// Continents 
var continentsSeries = chart.series.push(new am4maps.MapPolygonSeries());
continentsSeries.geodata = am4geodata_continentsLow;
continentsSeries.useGeodata = true;
continentsSeries.exclude = ["antarctica"];

var continentTemplate = continentsSeries.mapPolygons.template;
continentTemplate.tooltipText = "{name}";
continentTemplate.properties.fillOpacity = 0.8; // Reduce conflict with back to continents map label
continentTemplate.propertyFields.fill = "color";
continentTemplate.events.on("hit", function(event){
  if ( ! countriesSeries.visible) countriesSeries.visible = true;
  chart.zoomToMapObject(event.target);
  countryTemplate.show();
  labelContainer.show();
});

var contintentHover =...