Click event on ammap firing twice everytime

[rbasniak]

Hi, I'm trying to use the ammap and this is my setup (on OnInit method):

`
this.chart = this.AmCharts.makeChart("chartdiv", {
        "type": "map",
        "theme": "light",
        "dataProvider": {
            "map": "worldLow",
            "getAreasFromMap": true
        },
        "areasSettings": {
            "autoZoom": false,
            "selectedColor": "#CC0000"
        }
    });

    this.chart.addListener("click", event => {
        // find out the coordinates of under mouse cursor
        var info = event.chart.getDevInfo();
    
        // print in console as well
        console.log({
            "latitude": info.latitude,
           "longitude": info.longitude
        });
    });

`

It's working, I can see the map and the click event is registered, but:

1. it fires when I pan the map, is this the expected behavior?

2. it's fired twice every time I click the map.

[martynasma]

Click event should not be fired twice. It should not be fired on map drag, either.

Here's your map in a standalone setting:
https://codepen.io/team/amcharts/pen/3119e0e372f3c0bf7eddf179a60f9aee

I works as expected.

Could you double check if you are running the latest version? (3.21.4) I remember having us fixed click event in some version.

[Pauan]

@rbasniak Also make sure that you're using this.AmCharts.updateChart when making any changes to the chart, including when adding event listeners:

this.chart = this.AmCharts.makeChart("chartdiv", {
    "type": "map",
    "theme": "light",
    "dataProvider": {
        "map": "worldLow",
        "getAreasFromMap": true
    },
    "areasSettings": {
        "autoZoom": false,
        "selectedColor": "#CC0000"
    }
});

this.AmCharts.updateChart(this.chart, () => {
    this.chart.addListener("click", event => {
        // find out the coordinates of under mouse cursor
        var info = event.chart.getDevInfo();

        // print in console as well
        console.log({
            "latitude": info.latitude,
            "longitude": info.longitude
        });
    });
});

[rbasniak]

@Pauan @martynasma I found the problem. The readme.md says that I need to add the follwing scipts to my index.html

  <script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
  <script src="https://www.amcharts.com/lib/3/serial.js"></script>
  <script src="https://www.amcharts.com/lib/3/themes/light.js"></script>

If I do, the click event is fired twice and on map pan. If I remove these scripts, it all works as expected.

I'm closing the issue because the problem is fixed, but I would like to understand why if someone can explain to me...

Is it ok to remove the script tags, or there's a problem on the readme.md?

[Pauan]

@rbasniak You're right, that seems to be a bug in AmCharts v3.

The README assumes that you are using the serial chart, because that is our most popular chart type.

You have to change the serial.js file when you are using other chart types. I'll add a note in the README about that.

It should be completely fine for you to remove the amcharts.js and serial.js <script> tags:

<script src="https://www.amcharts.com/lib/3/ammap.js"></script>
<script src="https://www.amcharts.com/lib/3/maps/js/worldLow.js"></script>
<script src="https://www.amcharts.com/lib/3/themes/light.js"></script>