Live filter on map with vector icons

The challenge today was to replicate an existing map that a client already had online in a website, but needed more flexibility. Requirements:

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:

  • All
  • Bienals
  • 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.

World map with UK sub-countries and Tibet overlay

There are many versions of the world map and some countries can be represented in different ways. The UK for example is represented as a unique country, but it’s made up of England, Scotland, Wales and Northern Ireland which often are required to be represented individually. For these special cases we can explore the overlay feature to display other maps in the available world map. Below we added a map of UK divided by regions and a map for the region of Tibet, to be displayed as an individual region also.

Currently the plugin doesn’t provide a map of UK divided by it’s main regions ( England, Scotland, Wales and Northern Ireland ) but this might change in the future.

To have Tibet as an individual entry, we created a map of China where we selected only the Tibet region to display. Then we used that map with a single region in the world map as an overlay.

If you have any question on how to build a map like this, feel free to leave a comment below or 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.

World Map – Visited Countries Example

If you own a travel website, having a world map with the list of visited countries is a must. The plugin includes advanced options to build a map like that, where you can colour individual countries, setup a custom tooltip for each and link each country to a specific page for example.

Read More