Can you programmatically toggle highlighting?

[kieraneglin]

My use case:

We have a map of the world, and what we'd like to do is highlight both the area that's hovered upon and similar geographical areas. Eg: when America is hovered upon, America as well as Canada are highlighted.

I've modified the source so that we have a new data-region attribute that contains the geographical area needed (so that Canada and America's data-region attribute is the same. As are Sweden and Finland's, for instance).

The point:

With this in mind, is there a way to programmatically toggle highlighting? If not, what is the best way to approach something like this?

[getup8]

I think you could do this a few ways but one way would be to add a mouseover event on the map's subunits, figure out which geo the mouse is over, look up the related countries, and add a class to the current and related countries to style them differently (you'll see each path in the SVG can be styled and has a class of the country ID on it for targeting it).

You could also do the same but just call updateChloropleth() with the countries and new fill colors instead of adding the class.

You'd then have an onmouseout or whatever removing the fill or class.

In jquery, something like..

datamap.svg.selectAll('.datamaps-subunit').on('mouseover', function(geography) {
    // Look up region and countries associated
   // Add class to those countries that will style them differently or updateChloropleth
  });