Using custom elements to interact with map

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.

Leave a Reply

Your email address will not be published. Required fields are marked *