CODEWITHSUNDEEP
amcharts
florinescu
florinescu

Reputation: 55

clickMapObject method in amCharts V4 maps

I need a hand to find a way to to replicate the following functionality from amcharts v3 in v4 without success:

In V3: map.clickMapObject(map.getObjectById('CA')); In V4: chart.METHOD???(polygonSeries.getPolygonById("CA"))

What I'm looking to achieve here is to open the area modal from a click on an element outside the map.

Thank you

Upvotes: 1

Views: 630

Answers (1)

notacouch
notacouch

Reputation: 3655

In v4 you would assign a hit event (our Events guide) on the polygonSeries.mapPolygons.template, e.g.:

// Open modal on click
polygonTemplate.events.on("hit", function(event) {
  // chart.closeAllPopups(); // <-- if using an amCharts Popup
  chart.openModal(
    "The id for " +
      event.target.dataItem.dataContext.name +
      " is <strong>" +
      event.target.dataItem.dataContext.id +
      "</strong>."
  );
  // if using an amCharts popup, replace openModal with openPopup
});

Wasn't sure what was meant by area modal, so I showed how to use amCharts' Modal in the code and in comments is a way to use amCharts' Popups. Here's our guide on Popups and Modals: https://www.amcharts.com/docs/v4/concepts/popups-and-modals/

To trigger an event you coulde use the object's dispatch or dispatchImmediately methods. So you were spot on with polygonSeries.getPolygonById("CA"). It would look something like polygonSeries.getPolygonById("CA").dispatchImmediately("hit"), e.g.:

// External button that interacts with map, triggers click event of a MapPolygon
var $button = document.getElementById("external-interaction");
chart.events.on("inited", function(event) {
  $button.style.display = "inline-block";
  $button.addEventListener("click", function(event) {
    event.preventDefault();
    polygonSeries.getPolygonById("CA").dispatchImmediately("hit");
  });
});

Here's a demo with all that thrown together:

https://codepen.io/team/amcharts/pen/9b6d270e43c4a6d32a955fd7ac9a65c9?editors=0011

Let us know if this is making sense and is along the lines of what you were looking to do.

Upvotes: 2

Related Questions