Highlight all polygons in Map Series on hover

This tutorial will show how you can highlight all of the polygons in the same series, when just one of those is hovered.

Prerequisites

States and events

The solution explained in this tutorial relies heavily on two amCharts 4 concepts: States and Event listeners.

Make sure you're familiar with both of the those (linked above).

Base map

Since amCharts 4 maps support multiple series, it's very convenient to group areas in separate MapPolygonSeries.

This is described in great detail here. We're just going to grab an example from that link as a starting point for our tutorial.

See the Pen amCharts V4: Using multiple map series by amCharts (@amcharts) on CodePen.24419

Implementing multi-hover

If you run and try the map above, you'll see that nothing is happening. Let's fix that.

Setting up hover state

If we want something to look differently when hovered, we create a "hover" state for it.

Since we want our areas (polygons) to fill with a different color, we're going to be creating states for those. The states will override fill which is a color of the fill.

let hover1 = series1.mapPolygons.template.states.create("hover");
hover1.properties.fill = am4core.color("#69975F");
var hover1 = series1.mapPolygons.template.states.create("hover");
hover1.properties.fill = am4core.color("#69975F");
{
  // ...
  "series": [{
    // ...
    "mapPolygons": {
      "states": {
        "hover": {
          "properties": {
            "fill": "#69975F"
          }
        }
      }
    }
  }, {
    // ...
  }]
}

Now, if run this, we'll see that color of the area changes on hover:

See the Pen amCharts V4: Hovering on all polygons in series on map (1) by amCharts (@amcharts) on CodePen.24419

Setting up events

That was cool but we want to all countries to highlight in the same series, when just one of them is hovered.

That's where events come in.

We're going to catch "over" event over series, then apply "hover" state on all of the polygons in that series.

Similarly, we're going to to use "out" event to reapply "default" state to them, once series is no longer hovered.

To take it further, we're also going to modify polygon tooltipText to show series name next to the hovered member state name.

series1.mapPolygons.template.tooltipText = "{series.name}: [bold]{name}[/]";
series1.events.on("over", over);
series1.events.on("out", out);

function over(ev) {
  ev.target.mapPolygons.each(function(polygon) {
    polygon.setState("hover");
  });
}

function out(ev) {
  ev.target.mapPolygons.each(function(polygon) {
    polygon.setState("default");
  });
}
series1.mapPolygons.template.tooltipText = "{series.name}: [bold]{name}[/]";
series1.events.on("over", over);
series1.events.on("out", out);

function over(ev) {
  ev.target.mapPolygons.each(function(polygon) {
    polygon.setState("hover");
  });
}

function out(ev) {
  ev.target.mapPolygons.each(function(polygon) {
    polygon.setState("default");
  });
}
{
  // ...
  "series": [{
    // ...
    "events": {
      "on": over,
      "out": out
    },
    "mapPolygons": {
      // ...
      "tooltipText": "{series.name}: [bold]{name}[/]"
    }
  }, {
    // ...
  }]
}

function over(ev) {
  ev.target.mapPolygons.each(function(polygon) {
    polygon.setState("hover");
  });
}

function out(ev) {
  ev.target.mapPolygons.each(function(polygon) {
    polygon.setState("default");
  });
}

See the Pen amCharts V4: Hovering on all polygons in series on map (2) by amCharts (@amcharts) on CodePen.24419