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.
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.
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:
var chart = am4core.create("chartdiv", am4maps.MapChart);
// Set map definition
chart.geodata=am4geodata_worldLow;
// Set projection
chart.projection=newam4maps.projections.Miller();
// Create map polygon series
var polygonSeries = chart.series.push(newam4maps.MapPolygonSeries());
// Make map load polygon (like country names) data from GeoJSON
polygonSeries.useGeodata=true;
// Add some custom data
polygonSeries.data= [
{
id: "US",
color: am4core.color("#3F4B3B"),
description:
"The U.S. is a country of 50 states covering a vast swath of North America, with Alaska in the northwest and Hawaii extending the nation’s presence into the Pacific Ocean. Major Atlantic Coast cities are New York, a global finance and culture center, and capital Washington, DC. Midwestern metropolis Chicago is known for influential architecture and on the west coast, Los Angeles' Hollywood is famed for filmmaking."
},
{
id: "CA",
color: am4core.color("#3F4B3B"),
description:
"Canada is a North American country stretching from the U.S. in the south to the Arctic Circle in the north. Major cities include massive Toronto, west coast film centre Vancouver, French-speaking Montréal and Québec City, and capital city Ottawa. Canada's vast swaths of wilderness include lake-filled Banff National Park in the Rocky Mountains. It's also home to Niagara Falls, a famous group of massive waterfalls."
},
{
id: "MX",
color: am4core.color("#3F4B3B"),
description:
"Mexico is a country between the U.S. and Central America that's known for its Pacific and Gulf of Mexico beaches and its diverse landscape of mountains, deserts and jungles. Ancient ruins such as Teotihuacán and the Mayan city of Chichén Itzá are scattered throughout the country, as are Spanish colonial-era towns. In capital Mexico City, upscale shops, renowned museums and gourmet restaurants cater to modern life."
}
];
// Configure series
var polygonTemplate = polygonSeries.mapPolygons.template;
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.
