Documentation

Retrieving information of a clicked Map Object

In this tutorial we've seen how we can zoom in on a clicked country. We're going to build on that to retrieve information about clicked object.

Base map

As mentioned in the preamble, we're going to be using a map, created in another tutorial. The "Zooming to a map area on click" tutorial explains how we can add a "hit" event to capture clicks/taps, as well as how to use those events to zoom in on a target object.

Here's the map:

See the Pen amCharts V4: Map (zooming to object) by amCharts (@amcharts) on CodePen.24419

It zooms on the country you click/tap on.

Now, let's see how we can retrieve information of an object that was clicked, to use it for our needs.

Retrieving object info

The handler for "hit" event, we attach to a "template" of map polygon series, will have a target property, which is an instance of the clicked object. In this case it's an instance of MapPolygon.

The object has also all of the data for it (name, id, even geographical data for its borders) stored in its dataItem, and namely in dataItem.dataContext. The latter allows us tapping into "raw" data.

Please note, dataContext may bot contain just what we provided in data. It will also contain auto-populated stuff from GeoJSON geodata, because we used useGeodata.

Let's see how it works.

var polygonTemplate = polygonSeries.mapPolygons.template;
polygonTemplate.events.on("hit", function(ev) {
  // zoom to an object
  ev.target.series.chart.zoomToMapObject(ev.target);
 
  // get object info
  console.log(ev.target.dataItem.dataContext.name);
});
var polygonTemplate = polygonSeries.mapPolygons.template;
polygonTemplate.events.on("hit", function(ev) {
  // zoom to an object
  ev.target.series.chart.zoomToMapObject(ev.target);
 
  // get object info
  console.log(ev.target.dataItem.dataContext.name);
});
{
   // …
   "series": [{
     "type": "MapPolygonSeries",
     // …
     "mapPolygons": {
       "events": {
         "hit": function(ev) {
           // zoom to an object
           ev.target.series.chart.zoomToMapObject(ev.target);
 
           // get object info
           console.log(ev.target.dataItem.dataContext.name); 
         }
       }
     }
   }]
 }

Note, name property came from GeoJSON geodata. We did not provide it in our code. However, if we did, it would contain our own "name", rather than one from geodata.

To sum it up, here's a more useful example for you to play with:

See the Pen amCharts 4: Retrieving clicked object info by amCharts team (@amcharts) on CodePen.0

Upon a click of the country, this demo will use custom code to populate external <div> element with name and id of a target object.

Some countries have custom data attached to them (designed in darker green). For those countries, click will also display that custom additional data.

You'll see that id and name are coming from geodata, while description is purely our own in-line data.

Other events

This functionality is not limited to just "hit" event.

The target is just as usable for any other event attached to the map series template. For example, we could replace "hit" event with "over" and have information displayed when hovered over elements, rather than on click.

MORE INFO For more information about using event system refer to our "Event Listeners" article.

Related content