CODEWITHSUNDEEP
amcharts
universesurfer
universesurfer

Reputation: 357

How to make a world map with clickable countries in AMcharts?

Google maps is a bit of a nightmare in terms of getting GEOjson polygons for every country on a map, making them clickable, etc.

I came across AMcharts and it looks like a dream come true. Is there a way in AMcharts to make a world map that allows you to:

•select multiple countries at once, •have click events for each country, •displays the country's text on the map?

EDIT: I am using Angular 2.

Upvotes: 0

Views: 1101

Answers (1)

Darlesson
Darlesson

Reputation: 6162

have click events for each country

You can use listeners in the configuration object to bind an event while using Angular. Then use clickMapObject event to capture the click on a country.

You can get the map object from the event.

"listeners": [{
    "event": "clickMapObject",
    "method": function(e) {
        var mapObject = e.mapObject;
    }
}]

select multiple countries at once

You can implement the multi-selection using the event above. Check the example here:

https://codepen.io/team/amcharts/pen/864a70d0dc7140cb09ca507229166a11

displays the country's text on the map?

The country name is displayed on the tooltip. I recommend to use that instead of having the names displayed on the map, as many of them would overlap.

Upvotes: 2

Related Questions