AMChars, Zoom to certain countries with external buttons

Question

OK, so I have this map in AMCharts where I have external buttons that contain IDs, LAT and Long of certain countries, and when I hover over them I want the map to zoom and center itself to that country, here's the code example ...

http://codepen.io/sheko_elanteko/pen/rjYvgE

var map = AmCharts.makeChart("chartdiv", {
  "type": "map",
  "dataProvider": {
    "map": "worldLow",
    "getAreasFromMap": true,
    "areas": [ {
        "id": "EG",
        "color": "#67b7dc",
        "rollOverOutlineColor": "#000",
        "autoZoom": true,
        "balloonText": "Egypt"
      }, {
        "id": "KZ",
        "color": "#67b7dc",
        "rollOverOutlineColor": "#000",
        "autoZoom": true,
        "balloonText": "Kazakistan"
      }, {
        "id": "US",
        "color": "#67b7dc",
        "rollOverOutlineColor": "#000",
        "autoZoom": true,
        "balloonText": "United States"
      }]
  },
  "areasSettings": {
    "color": "#999",
    "autoZoom": false,
    // "selectedColor": "#CC0000",
    "balloonText": "",
    "outlineColor": "#fff",
    "rollOverOutlineColor": "#fff"
  },
  "listeners": [{
    "event": "rendered",
    "method": function(e) {
      // Let's log initial zoom settings (for home button)
      var map = e.chart;
      map.initialZoomLevel = map.zoomLevel();
      map.initialZoomLatitude = map.zoomLatitude();
      map.initialZoomLongitude = map.zoomLongitude();
    }
  }]
});

function centerMap() {
  map.zoomToLongLat(map.initialZoomLevel, map.initialZoomLongitude, map.initialZoomLatitude);
}

$("button.country").mouseenter(function(event) {
  event.stopPropagation();
  var countryID = $(this).data("id");
  var country = map.getObjectById(countryID);
  var lat = $(this).data("lat");
  var long = $(this).data("long");
  country.color = '#000';
  // map.zoomToSelectedObject(country);
  map.zoomToLongLat(3, lat, long);
  country.validate();

}).mouseleave(function(event){
  event.stopPropagation();
  var countryID = $(this).data("id");
  var country = map.getObjectById(countryID);
  country.color = '#CC0000';
  country.validate();
  centerMap();
});

As you can see I have the coordinates of each country hard coded, as well as the zoom level, but the zooming doesn't work properly, especially for US!!

I also wonder if there's a way to get the LAT and Long of each country so that I don't hard-code them.

There's a function in AMCharts called "zoomToSelectedObject", but I tried that and gave it the object with no luck.

score 3 · Accepted Answer · answered Jan 30 '17 at 03:13

3

You could try amCharts' selectObject method. Its default function is to zoom to the map object provided (the one that you already get by using getObjectById. Example:

$("button.country").mouseenter(function(event) {

  event.stopPropagation();
  var countryID = $(this).data("id");
  var country = map.getObjectById(countryID);
  map.selectObject(country);

}).mouseleave( ... );

Just make sure that you add "selectable": true to your areasSettings. Without it, the selectObject method won't work.

amCharts maps have excellent docs that you'll find here: https://docs.amcharts.com/3/javascriptmaps/AmMap#selectObject.

answered Jan 30 '17 at 03:13

Robbert

713
3
10

That works great, I got through the documentation but didn't notice this method, Thank you for this. Is there's a way to control the zoom level when selecting the country?I don't want it to zoom that much when selecting small countries. – Ruby Jan 30 '17 at 07:55
How can I do same if I don't have id field in data. I have lat, long, name etc – R15 Sep 23 '20 at 08:20

AMChars, Zoom to certain countries with external buttons

1 Answers1