Set active region based on URL hash

The map above will react to the hashtag added to the URL when loaded. Try the following links for example:

They will open in a new tab for the purpose of this example.

You’ll see that with the #europe in the URL, the map will automatically display with that region selected. This is done with a custom Javascript snippet to get the hash once the map is ready and set the selection on the map to match the hash, based on the available public methods the plugin provides.

The custom javascript can be found here:


Change map background when interacting with 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.