Amchart map triggering on "hit" instead "hover"

Question

I have a map, where I want to have on hover color change and then on click fixing a color. It glitches in a way that it sometimes starts to activate the on "hit" color even when only hovering (black instead of blue).

It specifically happens when you click on one region and then hover over a neighbor.

FYI you might see it better in fullscreen.

Can you please tell me what is wrong with my code? Thanks

    var map = am4core.create("chartdiv", am4maps.MapChart);

    map.seriesContainer.events.disableType("doublehit");
    map.chartContainer.background.events.disableType("doublehit");
    map.seriesContainer.draggable = false;
    map.seriesContainer.resizable = false;

    map.geodata = am4geodata_slovakiaLow;
    var polygonSeries = map.series.push(new am4maps.MapPolygonSeries());
    polygonSeries.useGeodata = true;

    map.projection = new am4maps.projections.Mercator();

    var polygonTemplate = polygonSeries.mapPolygons.template;
    polygonTemplate.tooltipText = "{name}";
    polygonTemplate.fill = am4core.color("white");
    polygonTemplate.stroke = am4core.color("black");


    var myEvent = polygonTemplate.events.on("hit", (ev) => {
        console.log("You clicked on :" + ev.target.dataItem.dataContext.name);

    }, this);

    // Create active state
   var activeState = polygonTemplate.states.create("active");
    activeState.properties.fill = am4core.color("black");

    // Create an event to toggle "active" state
    polygonTemplate.events.on("hit", function(ev) {
        polygonSeries.mapPolygons.each(function(polygon){
            polygon.setState("default");
        });

        ev.target.isActive = !ev.target.isActive;
    })


    var hs = polygonTemplate.states.create("hover");
    hs.properties.fill = am4core.color("#7660E6");

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="//cdn.amcharts.com/lib/4/core.js"></script>
<script src="//cdn.amcharts.com/lib/4/charts.js"></script>
<script src="//cdn.amcharts.com/lib/4/maps.js"></script>
<script src="https://cdn.amcharts.com/lib/4/geodata/slovakiaLow.js"></script>
<div id="chartdiv" style="width: 900px; height: 800px;"></div>

Answer 1

You had two hit event handlers. Even if that is not the issue, it is a good thing to have only one... For code readability.

The issue was about the polygon.setState("default"); To be honnest, I don't really know what it does... lol

But what you want to do is to remove the active "state" on all the polygons... So why not just do:

polygonSeries.mapPolygons.each(function (polygon) {
  //polygon.setState("default");
  polygon.isActive = false
});

It works.

var map = am4core.create("chartdiv", am4maps.MapChart);

map.seriesContainer.events.disableType("doublehit");
map.chartContainer.background.events.disableType("doublehit");
map.seriesContainer.draggable = false;
map.seriesContainer.resizable = false;

map.geodata = am4geodata_slovakiaLow;
var polygonSeries = map.series.push(new am4maps.MapPolygonSeries());
polygonSeries.useGeodata = true;

map.projection = new am4maps.projections.Mercator();

var polygonTemplate = polygonSeries.mapPolygons.template;
polygonTemplate.tooltipText = "{name}";
polygonTemplate.fill = am4core.color("white");
polygonTemplate.stroke = am4core.color("black");

// Create active state
var activeState = polygonTemplate.states.create("active");
activeState.properties.fill = am4core.color("black");

// Create an event to toggle "active" state
polygonTemplate.events.on("hit", function (ev) {
  console.log("You clicked on :" + ev.target.dataItem.dataContext.name);
  polygonSeries.mapPolygons.each(function (polygon) {
    //polygon.setState("default");
    polygon.isActive = false
  });

  // Set active on the clicked one
  ev.target.isActive = true;
});

var hs = polygonTemplate.states.create("hover");
hs.properties.fill = am4core.color("#7660E6");

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="//cdn.amcharts.com/lib/4/core.js"></script>
<script src="//cdn.amcharts.com/lib/4/charts.js"></script>
<script src="//cdn.amcharts.com/lib/4/maps.js"></script>
<script src="https://cdn.amcharts.com/lib/4/geodata/slovakiaLow.js"></script>
<div id="chartdiv" style="width: 900px; height: 800px;"></div>