custom - Interactive Geo Maps

Using custom elements to interact with map

Carlos Moreira on April 13, 2020

Both in the Free version and Pro version we can take advantage of the builtin javascript methods provided by the plugin to create interactions with our own custom elements on a page. The example below includes some custom made lists and some custom Javascript code to give interaction to those lists.

Consider that the custom code or lists is not part of the plugin, they are just an example of what can be done using some custom code to interact with the existing map.

Click to Select California
Click to Select Florida
Hover California (You can also click)
Highlight California and Florida
Hover to select Florida
Hover to select California

The example above was all made using inline code and some extra css for the hover effects on the list. The code from the list above is the following:

<ul id="custom_interact">
<li onclick="iMapsManager.select(21042,'US-CA');">Click to Select California</li>
<li onclick="iMapsManager.select(21042,'US-FL');">Click to Select Florida</li>
<li onmouseover="iMapsManager.hover(21042,'US-CA');" onmouseout="iMapsManager.clearHovered(21042)" onclick="iMapsManager.select(21042,'US-CA');">Hover California (You can also click)</li>
<li onmouseover="iMapsManager.highlight(21042,'US-CA,US-FL');" onmouseout="iMapsManager.clearHighlighted(21042)">Highlight California and Florida</li>
<li onmouseover="iMapsManager.select(21042,'US-FL');" onmouseout="iMapsManager.clearSelected(21042)">Hover to select Florida</li>
<li onmouseover="iMapsManager.select(21042,'US-CA');" onmouseout="iMapsManager.clearSelected(21042)">Hover to select California</li>
</ul>

Refer to the documentation page for the javascript methods provided by the plugin for more information on how the methods work.

Change map background when interacting with map

Carlos Moreira on March 26, 2020

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

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

Modified maps of Portugal

Carlos Moreira on November 14, 2019

The plugin comes with more than 200 maps created automatically with real geographic data. However some countries might not be composed of a unified mass of land, they include islands or other territories. This is the case for the US (Alaska and Hawaii) and also for Portugal, which includes some islands in the middle of the Atlantic ocean. For this reason I have included some modified maps of Portugal in the plugin. Below are some examples.

Districts

Municipalities

Original Map

If you compare the maps above with the original map below, with real positioning of the islands, you’ll understand why having a custom modified map is important to improve the way the map displays and the user interacts with it.

However, these modified maps have a small disadvantage: if you plot markers using coordinates for the real location of a city in one of the islands, the marker will not display. You will need to use the adjusted coordinates of the ‘new’ location of the islands. But this can be easily done when creating the map by simply clicking the location where you want the marker to be placed. The map edit interface will give you the coordinates of the location clicked.

In addition to the modified maps above, I also included some maps for specific cities. The plugin includes maps with the ‘regions’ of the 2 biggest Portuguese cities: Porto and Lisbon.

Porto

Lisbon

These are just examples of what’s possible to do with the plugin. In any of the above maps you can set click actions, change the region colours and set hover colours. See the full list of included features.

Future versions of the plugin will probably include even more maps for Portugal. If you have any special request of a city or region in Portugal, feel free to leave a comment below or contact me.