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.

Venice Map using custom source

While the plugin doesn’t include city maps, you can use custom geojson files as the source for the maps. I followed the instructions and got the source for the map of Venice (Italy) and placed it on github to be able to use it with the plugin. Here’s the result below:

The map for Venice might not be the best example, since we would expect to see the water areas. Unfortunately those maps are more dificult to come by, since it’s much easier to find region/city maps divided by administrative borders. However this is an example on how you can display maps that the plugin doesn’t include.

Feel free to contact us with any questions on how to achieve this.

Lithuania Municipalities Map

Although the plugin doesn’t include a map for Lithuania divided by its municipalities, we can use a custom geoJSON file to create a map. I tried to extract the shapes for the Lithuanian municipalities using QGIS and followed instructions on how to setup a custom map source.

After struggling a bit with missing region shapes from the QGIS export file, I ended up searching online for available geoJSON files for Lithuania and found a geoJSON file online in a GitHub repository.

I then hosted the custom geoJSON file on Github Gist to make it easier to reference it on the map edit screen.

This is an example that you can use custom geoJSON files to create maps and often you can find the source files you need online.

If you have any question on how to achieve this, feel free to contact us.

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.