Click event on mapImage in amCharts 4

I have added a custom marker to my map using the following guide: https://www.amcharts.com/demos/custom-html-elements-map-markers/ but I can't for the life of me work out how to add a click event to this marker!

i have tried the following with no results:

imageSeries.mapImages.events.on("hit", function(ev) { console.log("clicked on ", ev.target); }, this);

I can add a click event using jQuery however I need the map to zoom and center to the marker when clicked.

Solution 1:

Since you're using custom HTML map markers, you'll want to tie click events to those whether via vanilla js or jQuery.

In their click event handlers, if you have a reference to their associated MapImage, you can try chart.zoomToMapObject(mapImageReferenceHere); (see our guide "Zooming to map area on click"). You may have to adjust the positioning of the HTML markers so they're better-centered according along the mapImage.

Forking our demo, all you'd have to add is the following to the createCustomMarker function:

  holder.addEventListener("click", function(event) {
    chart.zoomToMapObject(image);
  });

See the fork here:

https://codepen.io/team/amcharts/pen/15dbf72f74b61fb83cd0754a96fa2c49

PS

Instead of imageSeries.mapImages.events.on you'd want to place events on the template, i.e. imageSeries.mapImages.template.events.on("hit", function(ev) { ... } );. Please check out our guide on our concept of List Templates in amCharts v4.