CODEWITHSUNDEEP
amcharts
MadScientisto
MadScientisto

Reputation: 169

Amcharts Maps, how to set and get id of MapPolygonSeries?

I want to get the ID of an MapPolygonSeries so I know which element was clicked on.

My goal is to represent the selected country (in a map) on a dropdown.

Currently I have the following code for zooming to a map area on click.

// Zooming to map area on click
polygonTemplate.events.on("hit", (ev) => {
  ev.target.series.chart.zoomToMapObject(ev.target, this.COUNTRY_ZOOM);
  // How to get the ID of the of the map object here? ev.id?
  this.handleCountrySelection();
});

For creating the polygon series I use the am4geodata_worldHigh with 

useGeodata = true

from the chart.

Upvotes: 2

Views: 1602

Answers (1)

notacouch
notacouch

Reputation: 3655

It's not clear what you mean by the ID of a MapPolygonSeries.

If you want to provide your own way to identify a MapPolygonSeries, you can assign a string to its name property.

With useGeodata = true, an ISO2 ID and name will be provided to each MapPolygon within a series from amCharts' geojson. So if you're looking for the country's ID/name when a user clicks it, this can be found via a mapPolygon's dataItem.dataContext, in your event handler that would look like ev.target.dataItem.dataContext, e.g.:

// identify a series by its name
polygonSeries.name = "worldSeries";

// Zooming to map area on click
polygonTemplate.events.on("hit", (ev) => {
  ev.target.series.chart.zoomToMapObject(ev.target, this.COUNTRY_ZOOM);
  // How to get the ID of the of the map object here? ev.id?
  console.log("Series name: ", ev.target.series.name);
  console.log("Country ISO2 id: ", ev.target.dataItem.dataContext.id);
  console.log("Country ISO2 name: ", ev.target.dataItem.dataContext.name);
  this.handleCountrySelection();
});

Simple demo with all that thrown together: https://codepen.io/team/amcharts/pen/e3fd144dcf886d29d27b7f47df73f565/?editors=1111

Upvotes: 2

Related Questions