How to click map Bubble in Amcharts and call server request

Question

I want to click the bubble in Am chart and call the server through ajax call and manipulate some data in a view is it possible ? I am loading my map through ajax call . below is the code . I tried it using eventlistener clickable object , but wont get success.

 function StatisticsMap(item, categoryID, statusID) {
    languageShortName = $("#languageShortName").val();
    $("[relf-map-tab]").removeClass("active");
    var url = "/" + languageShortName + "/saudiprojects/statistics/map-data?categoryID=" + categoryID + "&statusID=" + statusID;
    dataPoints = [];
    $.ajax({ type: "GET", url: url }).done(function (data) {
        $(data).each(function (index, value) {
            dataPoints.push({
                longitude: value.Longitude,
                latitude: value.Latitude,
                type: 'circle',
                color: '#E98C3E',
                label: value.CountNo,
                labelPosition: "middle",
                labelColor: "#ffffff",
                labelFontSize: 20,
                fixedSize: false,
                labelBackgroundAlpha: 1,
                labelBackgroundColor: "#E98C3E",
                height: 50 + (value.CountNo * 10),
                width: 50 + (value.CountNo * 10),
                centered: true,
                title: value.Status
            });
        });
        var map = AmCharts.makeChart("mapdiv", {
            "type": "map",
            "theme": "light",
            "dataProvider": {
                "map": "saudiArabiaHigh",
                "images": dataPoints
            }
        });
        $(item).addClass("active");
    });
}

Here is my HTML

<div class="graph">
   <div id="mapdiv" style="width:100%;height:100%;"></div>
</div>

Answer 1

You can use the clickMapObject listener on the map to capture what bubble was clicked. The image itself is stored in the mapObject property of the event:

  "listeners": [{
    "event": "clickMapObject",
    "method": function(ev) {
      alert('clicked on ' + ev.mapObject.title)
    }
  }]

Note that in order to make the image clickable, you have to set selectable to true in imagesSettings:

  "imagesSettings": {
    "selectable": true
  }

Demo below:

var dataPoints = [{
  longitude: 45,
  latitude: 25,
  type: 'circle',
  color: '#E98C3E',
  label: "1",
  labelPosition: "middle",
  labelColor: "#ffffff",
  labelFontSize: 20,
  fixedSize: false,
  labelBackgroundAlpha: 1,
  labelBackgroundColor: "#E98C3E",
  height: 60,
  width: 60,
  centered: true,
  title: "Example"
}];


var map = AmCharts.makeChart("mapdiv", {
  "type": "map",
  "theme": "light",
  "dataProvider": {
    "map": "saudiArabiaHigh",
    "images": dataPoints
  },
  "imagesSettings": {
    "selectable": true
  },
  "listeners": [{
    "event": "clickMapObject",
    "method": function(ev) {
      alert('clicked on ' + ev.mapObject.title)
    }
  }]
});

#mapdiv {
  width: 100%;
  height: 500px;
}

<script src="https://www.amcharts.com/lib/3/ammap.js"></script>
<script src="https://www.amcharts.com/lib/3/maps/js/saudiArabiaHigh.js"></script>
<script src="https://www.amcharts.com/lib/3/plugins/export/export.min.js"></script>
<div id="mapdiv"></div>