US and Canada divided by regions

With Interactive Geo Maps Pro you can display multiple maps together using the overlay feature. You just need to create each map separately and then in one of them instruct to load the other one. We used this feature to create a map of United States of America divided by states together with the map of Canada divided by provinces and territories.

To achieve the result above you need to create 2 maps. One for the US and another one for Canada and create the interactivity you want in the regions or add markers. Once you have the 2 maps, you can edit one of them and in the ‘Overlay’ section simply select the other map. That map will now display both maps together.

You can set different colors and click actions for each individual state or marker in both maps.

There are several interactive maps plugins for WordPress, but for sure this is one of the features that sets this plugin apart from the others. Check out the full list of features available in the Pro version.

Advanced Map Zoom

The free version of the plugin offers a simple zoom feature, with zoom in/out controls display at the bottom right of the map and the ability to drag/pan the map with the mouse or in a touch device. The Pro version of the plugin will include more options to enhance the zoom feature, including:

  • Home Button
  • Double click zoom
  • Mouse wheel zoom
  • Change controls position

Advanced Zoom Example

In the map above you can use the mouse wheel to zoom, double click and use the home button to reset the map position. We added the controls to the bottom left position, but they can be in any of the map’s corners.

These features are only available on the PRO version of the plugin, which you can try for free, soon.

Using legend to filter markers

A user recently asked me if it would be possible to have a map with markers that could be filterable. The PRO version of the plugin allows you to display different maps in the same base map and have the legend enable/disable the different maps included. This is small sample of what could be done:

Click to see more details.

You can click the legend items to enable/disable markers and you can click individual markers to reveal information to the right of the map. The map can grow to have more categories and even include interactions in the regions themselves.

The way this is done is that we created one map for each category, enabled the ‘include in legend’ for the markers and then created a ‘base map’, which is the one we’re seeing above, that displays all the category maps.

The Interactive Legend and action to display content to the right of the map are only available in the PRO version.

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.