Balloon in amMap country map

1.2k Views Asked by At

I'm using amMap country map and want to show all country names in balloons without rollover or hover on that country. Means all balloons are visible on map load.

1

There are 1 best solutions below

0
On

Showing more than one rollover balloon, or making it appear without hovering on a country is not possible, I'm afraid.

What you can do is to display a "label" on each of those countries. A label is an instance of MapImage with a text label and no actual image.

Placing an image/label for each country using longitude/latitude coordinate can be quite tedious work. Therefore you can use the following example which places area title in the geometrical center of each area automatically.

http://codepen.io/amcharts/pen/5687a78507081e1c8779cf067b762de7

The above map is for the United States, but you can use the code in it to process labels on just about any map.

The following code is responsible for that:

map.addListener("init", function () {
  // set up a longitude exceptions for certain areas
  var longitude = {
    "US-CA": -130,
    "US-FL": 120,
    "US-TX": 1,
    "US-LA": 40
  };

  var latitude = {
    "US-AK": -85
  };

  setTimeout(function () {
    // iterate through areas and put a label over center of each
    map.dataProvider.images = [];
    for( x in map.dataProvider.areas ) {
      var area = map.dataProvider.areas[ x ];
      area.groupId = area.id;
      var image = new AmCharts.MapImage();
      image.latitude = latitude[ area.id ] || map.getAreaCenterLatitude( area );
      image.longitude = longitude[ area.id ] || map.getAreaCenterLongitude( area );
      image.label = area.id.split('-').pop();
      image.title = area.title;
      image.linkToObject = area;
      image.groupId = area.id;
      map.dataProvider.images.push( image );
    }
    map.validateData();
    console.log(map.dataProvider);
  }, 100)
});

Please note, that sometimes country/state shapes will not make the dead center a perfect logical place to place a label. For those situations use the longitude and latitude overrides to adjust position of the label for the particular country.