Add interactive regions to the map

You are here:

The first thing to do when building a map will be to select which map to display. This will affect which regions you have available to work on. For example, if you choose to display the world map, you’ll have all countries available to colour and give interactivity to. If you select a specific country map, you’ll only have the regions of that particular country.

For this tutorial, I’ll use the US Map as an example.

Selecting the Map

First thing to do is select the proper map to display from the list. In our case we’ll select ‘Usa Low’ map option, to display a less detailed US map. I also selected the ‘AlbersUSA’ projection, to display the map in a more friendly manner, with the regions displaying all together.

Administration panel when selecting US Map

Once you have selected the map, on the right side of the administration page, you should see a list of available regions in this map. This list is important, as it will tell us what regions we can work with in this map, providing their codes, which we will need.

Screenshot for list of available regions
Panel with regions available for the selected map.

Adding Regions

After we have selected the map, we can start adding regions. Go to the ‘Regions’ panel and you’ll see the option to ‘Add Region’. Clicking it will reveal the following panel:

Add new region panel
Add Region Panel

Depending on which version of the plugin you’re using, you’ll have different options available, but here are the important ones:

  • Title: this is mostly for administration purposes, so you can identify each entry.
  • Region Code: this is the important one! The code you add in this field should be one from the list of available regions on the right. If you start writing the name of a region, the plugin will also help you with autocomplete suggestions, as you can see in the picture above.
  • Tooltip content: this is self-explanatory. This will be the default content for the tooltip which will display when you hover a region.
  • Action content: this will be the content that get’s triggered when the region is clicked, depending on the ‘Action’ you will select (see further down). The free version of the plugin allows you to set URLs to open on click. In this case, the URL you want to open would go in this field.

You can click ‘Add Region’ again to continue adding regions.

Visual Settings & Click Action

Further down the page you’ll find the ‘Default Values’ panel where you can set the colours for the regions and select which action to perform on click.

Default values panel

Including or Excluding Regions on the Map

We also have some extra options to include or exclude specific regions on a map. Read more about this feature.

Posted by Carlos Moreira

Lead developer of Interactive Geo Maps plugin.