Amcharts Drill-down Map Countries Clickable

The drill-down map example has the index.html file which references three relevant javascript files. index.js continentsLow.js worldLow.js Now various references point to the def

Solution 1:

The links you referenced are all for v3 of amCharts, whereas your code is for v4.

Here's the v4 Drill-down Map demo online: https://www.amcharts.com/demos/drill-down-map/ (I'll be using this as a base for the code below).

It's not clear what your question is, I'm going to presume you're trying to make countries clickable to a link. The url property of a MapPolygon is the right place to make these changes.

You can either assign it directly or via binding property fields to data.

To assign it directly, you can wait til the series has loaded, e.g. via its "inited" event, then use the series' getPolygonById() method to grab the country by its ISO2 ID. So, e.g. if you wanted Canada to click through to google:

countriesSeries.events.on("inited", function() {
  var canada  = countriesSeries.getPolygonById('CA');
  canada.url = "https://www.google.com/search/?q=canada";
});

To bind the url property of MapPolygons to a field that may appear in data you provide to the series, set the series' template's propertyFields.url to the name of the matching field in the data object (let's say we'll use "url" in that case, too), e.g.:

countrySeries.mapPolygons.template.propertyFields.url = "url";

Now just pass data to the series, e.g. if you want the United States to click through to google.com, pass an array with a single object whose id is "US" and "url" is "http://google.com":

countriesSeries.data = [
  {
    id: "US",
    url: "https://www.google.com"
  }
];

Here's a demo:

https://codepen.io/team/amcharts/pen/6b8bffc714a966304a8f29d6939ee064