Group Hover Example with Custom Middle East Map

In this example we explored the group feature together with the overlay maps option to achieve the map below. The requirements where that some countries would share the same hover state but keep individual tooltips.



The map above actually represents 3 different maps. The main map with the dark purple and then 2 maps for each group of countries in green. The 3 maps are displayed in the same using the overlay feature, available in the PRO version, where each of the overlaid maps has the ‘Group’ option enabled, so that they share the same hover effect. In this particular example we included individual tooltips for each country even in the grouped countries, by adding an individual entry for each country, instead of ‘grouping’ them in one entry.

The above map, with only these countries, doesn’t exist by default. We created a ‘custom map’ by using the ‘Regions to Display‘ option and specifying the regions we wanted from the included world map.

If you have any question on how to create a similar map feel free to contact us.

World Regions with Office locations

In this example we are trying to create a map where we display the office locations with markers and give interactivity to a particular set of world regions. The regions are grouped and have the same interactivity when hovered and clicked.

It’s only possible to replicate the map below using the PRO version of the plugin because it uses the ‘Display Content to the Right‘ click action and the ‘Group‘ regions feature which are only available in PRO. Further below you’ll have an example on how to create a similar map using the FREE version.

Grouped Hover Effect

This map requires a bit of work to accomplish, but only because we want the group entries when hovering. If we didn’t require to set the hover effect in the different regions when hovering one of the groups, we would only require one map. But the above example displays what is possible to achieve with the plugin leveraging in the many features it provides.

We created 5 different maps:

  • Base Map displaying the World Regions map
  • Africa & Australia map
  • Americas map
  • Europe & Middle East
  • Asia map

In the base map we added the different markers, which don’t have any particular interactivity in this example, but they could have. Also – and this is the important detail – we choose in the ‘Overlay’ options the other 4 maps. This means that this ‘base map’ will also display the data from the other 4 maps.

For each of the other 4 maps, we only displayed the regions we wanted and enabled the ‘group’ option. This means all regions in this map will be a group and share the same hover state.

Normal World Regions Map

This approach is much more easier, because we don’t need to create all the different maps. The main difference with the above map is that the regions are not grouped and don’t share the hover effect. If you only use an action to open URLs, you can create this map using the FREE version of the plugin.

Feel free to leave a comment below or contact me for further details.