Geopolitically, Ireland is divided between the Republic of Ireland (officially named Ireland), which covers five-sixths of the island, and Northern Ireland, which is part of the United Kingdom. But there are plenty of cases where it makes sense to represent the island without those geopolical borders and display the historical counties.
The challenge today was to replicate an existing map that a client already had online in a website, but needed more flexibility. Requirements:
- Vector Icon with the “plus” symbol ✔
- Transparent tooltip with HTML content ✔
- Ability to filter different markers ✔
For this project we used the overlay technique, which allows us to display multiple maps in the same base map and filter them if necessary either with a legend or an external live filter. So we create 4 maps:
- Map for International Projects
- Map for National Projects
- Map for Biennials
- Base map, with the 3 maps above in overlay
This is the result:
- International Projects
- Nacional Projects
It’s worth noting also that we used the option to load content from a raw data source, a specific CSV format. This allowed us to import the data from the already existing map.
If you want to replicate a specific map let us know and we’ll see what we can do.
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.