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.
