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.

"hover" is a built-in state. However, for our purposes, we are going to use a custom state name "highlight". We'll explain why later.

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 hover = series.mapPolygons.template.states.create("highlight");
hover.properties.fill = am4core.color("#69975F");

var hover = series.mapPolygons.template.states.create("highlight");
hover.properties.fill = am4core.color("#69975F");

{
  // ...
  "series": [{
    // ...
    "mapPolygons": {
      "states": {
        "highlight": {
          "properties": {
            "fill": "#69975F"
          }
        }
      }
    }
  }, {
    // ...
  }]
}

If we had used "hover" for our state name, it would be enough for hovered polygon to be colored differently. However, since "highlight" is a completely custom name, it does nothing, so we need to set up events to apply that state.

Setting up events

Now, we want to set our map up so that all countries in a series are highlighted when just one of them is hovered.

That's where events come in.

We're going to catch "over" event over series, then apply our custom "highlight" 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.

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

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

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

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

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

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("highlight");
  });
}

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

Before you go

OK, we owe you an explanation why we haven't used "hover" state.

When "hover" state is applied to an element, it does a bit more of under-the-hood work than just applying colors and other properties. It also sets special flag to indicate that this element is currently being hovered.

When such element actually is hovered (e.g. from moving mouse cursor from one country in the same series to the other), the event is ignored since in the eyes of the map it is already hovered.

This causes all kinds of issues, like tooltip not being displayed, etc.

That is why, to stay on the safe side, we used completely made up "highligh" name for our hover state.