Youtube playlist with tutorials on Interactive Geo Maps Plugin

Carlos Moreira on June 15, 2022

Youtube playlist with tutorials on Interactive Geo Maps Plugin
Youtube playlist with tutorials on Interactive Geo Maps Plugin

As the plugin continues to grow, we try to create more video tutorials and documentation pages.

We have created a playlist on youtube with all the videos related with the plugin. If you’re a Youtube user, make sure to subscribe to the channel also.

The plugin keeps growing and has been featured on several sites, like AYS Pro Plugins, WP Explorer among other important publications on the topic.

If you have a request on a topic you would like us to cover on a video, contact us letting us know.

Horn of Africa countries map

Carlos Moreira on June 24, 2020

Horn of Africa map for WordPress

The Horn of Africa is a peninsula in Africa, the easternmost projection of the African continent. Below is an example of you a map for this region could display:

For this example we selected the map for Africa, added content to Djibouti, Ethiopia, Eritrea, Kenya, and Somalia and enabled the option to only display countries with active content, resulting in the above map.

Below is the map of Africa, with all countries, with only the horn of Africa countries highlighted.

The process is the same, but in the above map we didn’t enable the option to only display active countries and therefore the full continent displays.

The above examples can already be reproduced using the free version of the plugin.

Clickable links in map tooltips

Carlos Moreira on March 31, 2020

clickable tooltips on map

In the Pro version of the plugin you can enable the option to have your tooltips be ‘fixed’. This will prevent the tooltips from following the mouse movements and remain fixed in the same place, allowing also for you to hover its content and therefore click any links the tooltip might have.

Here’s a simple example of tooltips in markers and regions with clickable links.

To replicate this behaviour, you simply need to go to the Tooltip tab and enable the option ‘Fixed’.

Change map background when interacting with map

Carlos Moreira on March 26, 2020

background on map

In this example we created a custom javascript snippet to change the background of the map when a region is clicked.

This is only possible with the Pro version of the plugin.
To achieve this you will need to do the following:

  • Add the regions and in the ‘Action Content’ field, add the URL to the image you want to associate with that region;
  • The regions added should leave the option to ‘use defaults’ enabled;
  • In the region Defaults, set the click action to ‘custom’.
  • Add the following code to the javascript custom action field: 
var mapwrapper = document.getElementById('map_wrapper_20884');
mapwrapper.style.backgroundImage = "url('" + data.content + "')";
mapwrapper.style.backgroundSize = "contain";
  • Consider the map_wrapper_20884 is the id of the current map wrapper. You can change this to any other element ID on your page. 20884 in this example is the ID of the map above.

The custom code can be enhanced for improvements or to trigger any other style change.

Some screenshots of the map edit screen for the relevant options:

Change map background when interacting with map
Change map background when interacting with map

If you have any question feel free to leave a comment below or contact me.