CODEWITHSUNDEEP
javascriptamcharts
T. Nowacki
T. Nowacki

Reputation: 109

AmCharts 4 - drill map - get country iso code

I started a new project on AmCharts 4 maps. First I select a continent, then I choose a country.

How can I get iso_code clicked country?

Is it possible to hide other countries and show only selected on map?

My code: 

  // Countries
  var countriesSeries = chart.series.push(new am4maps.MapPolygonSeries());
  var countries = countriesSeries.mapPolygons;
  countriesSeries.visible = false; // start off as hidden
  countriesSeries.exclude = ["AQ"];
  countriesSeries.geodata = am4geodata_worldLow;
  countriesSeries.useGeodata = true;
  // Hide each country so we can fade them in
  countriesSeries.events.once("inited", function(){
    hideCountries(); 
  });

  var countryTemplate = countries.template;
  countryTemplate.applyOnClones = true;
  countryTemplate.fill = am4core.color("#a791b4");
  countryTemplate.fillOpacity = 0.3; 
  countryTemplate.strokeOpacity = 0.3;
  countryTemplate.tooltipText = "{name}";

  countryTemplate.events.on("hit", function(event){
    chart.zoomToMapObject(event.target);

// how can i get iso_code clicked country ?
// and hide other countries 

        showPoints(); // function show point on selected country
      });

Upvotes: 1

Views: 1379

Answers (1)

Samuel Philipp
Samuel Philipp

Reputation: 11040

You can handle the country code by using event.target.dataItem.dataContext.id.

countryTemplate.events.on("hit", function(event){
    chart.zoomToMapObject(event.target);
    var countryCode = event.target.dataItem.dataContext.id;
    // ...
});

To hide some countries you can use countriesSeries.exclude as you already did in your example code. Alternatively you can use countriesSeries.include which is obviously the opposite. (docs). The chart should recognize changes and rerender itself. But bare in mind, that changes on an array are not easy to detect, so you should reassign the exclude or include property. (docs)

polygonSeries.data = JSON.parse(JSON.stringify(dataArray));

Or you use the following syntax:

countriesSeries.include.push("DE");
countriesSeries.include = [...countriesSeries.include];

Upvotes: 3

Related Questions