Add onclick event for regions

[d3ward]

Looking for an event listener that can be triggered when user click on a region
Similar to the onRegionSelected event but without triggering the selection

I have a map linked to a table with data for each country , for the moment a lot of data from most countries are missing .
So I set those few countries concerned as already selected as follows

If I enable parameters like regionsSelectable I will lose track of my already selected regions
So I want that when I click on a region it returns the code and if it is not selected in the map then I show a message no data for this country , otherwise if already selected I will show the corresponding data in my table . All without interfering with the setup of the regions that are deselected/selected
As a developer I am trying to solve by myself , and I have almost achieved a good result

For now i added an isRegionsClickable parameter and exploit the portion of code by adding an if

jsvectormap/src/js/Map/handleElementEvents.js

Line 28 in 6aa88bf

this.container.delegate('.jvm-element', 'mouseover mouseout', function (event) {

[themustafaomar]

Hi @d3ward

I think I may introduce a new event onRegionClick soon if I find people request it.
But, for now, I think this is an appropriate workaround.

const selectedRegions = ["US", "RU", "CA", "GR"];

const jvm = new jsVectorMap({
  selector: "#map",
  map: "world_merc",
  zoomButtons: false,
  selectedRegions,
  onLoaded: (map) => {
    map.container.delegate(".jvm-region", "click", (event) => {
      const country_code = event.target.dataset.code;
      if (selectedRegions.indexOf(country_code) > -1) {
        alert(country_code); // Showing some data ..
      } else {
        alert("No data for this country!");
      }
    });
  }
});

https://codepen.io/themustafaomar/pen/yLVmRLW

[conceptualio]

+1 to adding onRegionClick!