Have external elements interact with the map

External Content Placeholder
External Content

Available from version 1.8 of the plugin, released in May 2016.

We can have external elements to the map interact with the regions or markers. We can trigger the ‘selection’ state of a region or marker, and also trigger the action associated with it.

The Simple Way

The most simple way to implement this, is to use the shortcode with this syntax:
[show-map-list id='1']
Where id=” will be the id of your map. You can add this shortcode after the normal map shortcode.
[show-map id='1']
[show-map-list id='1']
This will display a list with the data entries of your map. When we hover the list items, it will trigger the ‘selection’ of that entry. If we click the list item, it will trigger the action associated with that entry.

There’s also the option to display a dropdown with the entries, but this will only interact when clicked. Syntax:

[show-map id='1' extras='dropdown']

All countries Placeholder
All countries

The Advanced Way

The plugin includes 3 javascript functions that can be used to trigger interactions in the map:

iwm_setSelection(Region Code, Map ID)
iwm_select(Region Code, Map ID)
iwm_clearSelection(Map ID)

And you can use these 3 functions in your elements, for example, with the click and mouseover states. For example:
<a onmouseover="iwm_setSelection('BR',1)" onclick="iwm_select('BR',1)" onmouseleave="iwm_clearSelection(1)" title="Click to see painting">Brazil</a>

Notice that we use ‘BR’ as the region code, since this is what we used in the map. Basically you’ll need to use the same region code as in the map data. You can use these 3 functions with any element on your page, if the map exists on that page, it will interact with it.

The tooltips

If you have the tooltip to display on hover, unfortunately it won’t display when the iwm_setSelection() function runs (the function triggered when hovering the list entries, for example). However, if you have the tooltips to display on click in your map settings, the iwm_setSelection() function will trigger the tooltip to display also.

Use hover colors!

In order to enhance the interactions, we advise you to use the ‘hover color’ option, available in the ‘Custom CSS Generator’ panel, below the map preview in the administration. This way it will be more obvious to the users that when they are interacting with the list or your custom elements, it’s having an effect on the map.

Still got questions? Something not working?

Feel free to contact us! 🙂