CODEWITHSUNDEEP
amchartsammap
Rahul Chaudhari
Rahul Chaudhari

Reputation: 2240

In AmChart map how to trigger event manually?

In AmMap, "homeButtonClicked" event is present which got triggered when you click on home button.

I want to trigger that event manually. Is there any way to do so?

Upvotes: 3

Views: 4818

Answers (3)

Eddie
Eddie

Reputation: 1536

It seems the code has changed since this was last answered. For me, this is what works.

map.clickMapObject(map.dataProvider)

Upvotes: 1

Bogdan
Bogdan

Reputation: 696

(For martynasma) You still have an error on trigger event method (testEvent). Correct is:

map.fire({
    type: "homeButtonClicked",
    chart: map
  });

Upvotes: -1

martynasma
martynasma

Reputation: 8595

To completely zoom out the map, use zoomToSelectedObject() ant pass in map.dataProvider as a parameter.

I.e.:

map.zoomToSelectedObject(map.dataProvider);

Working demo:

var map = AmCharts.makeChart( "chartdiv", {
  "type": "map",
  "dataProvider": {
    "map": "worldLow",
    "getAreasFromMap": true
  },
  "areasSettings": {
    "autoZoom": true
  }
} );

function zoomOut() {
  map.zoomToSelectedObject(map.dataProvider);
}
#chartdiv {
  width: 100%;
  height: 250px;
}
<script src="http://www.amcharts.com/lib/3/ammap.js"></script>
<script src="http://www.amcharts.com/lib/3/maps/js/worldLow.js"></script>
<input type="button" value="Zoom Out" onclick="zoomOut();" />
<div id="chartdiv"></div>

To trigger an event on the map or any amCharts object for that matter, you can use fire() method. I.e.:

map.fire("homeButtonClicked", {
  type: "homeButtonClicked",
  chart: map
});

Here's a working example:

var map = AmCharts.makeChart( "chartdiv", {
  "type": "map",
  "dataProvider": {
    "map": "worldLow",
    "getAreasFromMap": true
  },
  "areasSettings": {
    "autoZoom": true
  }
} );

map.addListener("homeButtonClicked", function(event) {
  alert('homeButtonClicked');
});

function testEvent() {
  map.fire("homeButtonClicked", {
    type: "homeButtonClicked",
    chart: map
  });
}
#chartdiv {
  width: 100%;
  height: 280px;
}
<script src="http://www.amcharts.com/lib/3/ammap.js"></script>
<script src="http://www.amcharts.com/lib/3/maps/js/worldLow.js"></script>
<input type="button" value="trigger event" onclick="testEvent();" />
<div id="chartdiv"></div>

Upvotes: 1

Related Questions