Skip to main content
All CollectionsCustomization
Javascript Public Methods
Javascript Public Methods
James avatar
Written by James
Updated over a week ago

The plugin provides some Javascript methods and events available publicly to be used in your custom code, if needed.

Most likely you will need the Map ID in your code. You can find the map ID for each one in the administration archive for the maps you created. Most methods will be accessible through the iMapsManager object.

Events

When the map is loaded it triggers the ‘mapready‘ event in the map container. You can use code like this to listen to it:

// replace with your map ID. let mapID = 21148; let mapContainer = document.getElementById('map_' + mapID); mapContainer.addEventListener('mapready',function(ev){ // map is loaded. your code here });

You can use the above code to run code only after the map has loaded.

Methods

Select

Triggering a select event on a region will simulate a click on it. So if you have events attached to those regions, they will be executed.

Name

Description

Examples

iMapsManager.select( MapID, Region(s) );

Triggers select event on selected entries.
​
Parameters:
​MapID = int or string – ID of the Map
​Region(s) = string with one or more region codes divided by commas.

iMapsManager.select(325,'US-CA');
​iMapsManager.select(325,'US-CA,US-AZ')

iMapsManager.clearSelected( MapID );

Clears all hovered entries in selected map.
​
Parameters:
​MapID = int or string – ID of the Map

iMapsManager.clearSelected( 325 );

iMapsManager.getSelected( MapID );

Gets the list of currently hovered entries.
​
Parameters:
​MapID = int or string – ID of the Map
​
Returns an array.

iMapsManager.getSelected( 325 );

When selecting other entry, the map will automatically clear previously selected entries.

Hover

Triggering the hover event will usually change the region or marker colour and show the tooltip. You can trigger the hover event in multiple regions, but it will probably only display the tooltip in the first or last. If you have events in the map attached to the hover event, they will also be triggered.

Name

Description

Examples

iMapsManager.hover( MapID, Region(s) );

Triggers hover event on selected entries.
​
Parameters:
​MapID = int or string – ID of the Map
​Region(s) = string with one or more region or marker codes divided by commas.

iMapsManager.hover(325,'US-CA');
​iMapsManager.hover(325,'US-CA,US-AZ')

iMapsManager.clearHovered( MapID );

Clears all hovered entries in selected map.
​
Parameters:
​MapID = int or string – ID of the Map

iMapsManager.clearHovered( 325 );

iMapsManager.getHovered( MapID );

Gets the list of currently hovered entries.
​
Parameters:
​MapID = int or string – ID of the Map
​
Returns an array.

iMapsManager.getHovered( 325 );

When using the hover event in your own custom elements, it would be important to also use the clearHovered method when hovering out your custom elements, so that it doesn’t stay with that state.

Highlight

The highlight event is similar to the hover event, but it will not trigger the tooltip or any other associated event with that region or marker. It will simply change the region or marker colour.

Name

Description

Examples

iMapsManager.highlight( MapID, Region(s) );

Changes the colour of the selected region or marker.
​
Parameters:
​MapID = int or string – ID of the Map
​Region(s) = string with one or more region or marker codes divided by commas.

iMapsManager.highlight(325,'US-CA');
​iMapsManager.highlight(325,'US-CA,US-AZ')

iMapsManager.clearHighlighted( MapID );

Clears all highlighted entries from the map.
​
Parameters:
​MapID = int or string – ID of the Map

iMapsManager.clearHighlighted( 325 );

iMapsManager.getHighlighted( MapID );

Gets the list of currently highlighted entries.
​
Parameters:
​MapID = int or string – ID of the Map
​
Returns an array.

iMapsManager.getHighlighted( 325 );

When using the highlight event in your own custom elements, it would be important to also use the clearHighlighted method when hovering out your custom elements, so that it doesn’t stay with that state.

Experimental Methods

The functions below are still experimental and might change in future versions.

Name

Description

Example

iMapsManager.getMarkersByValue( MapID, Value, Parameter );

Get a list of markers of a given map by value of a specific parameter;
​
Parameters:
MapID = int or string – ID of the Map;
Value = string or int – What to search (optional);
Parameter = string – Where to search. What parameter to search (optional);
​
​
Returns an array.

// get markers with value 100
iMapsManager.getMarkersByValue( 120, 100, ‘val’);
​
// get all markers
iMapsManager.getMarkersByValue( 120 );

iMapsManager.getRegionsByValue( MapID, Value, Parameter );

Get a list of regions of a given map by value of a specific parameter;
​
Parameters:
MapID = int or string – ID of the Map;
Value = string or int – What to search (optional);
Parameter = string – Where to search. What parameter to search (optional);
​
​
Returns an array.

// get regions with value 100
iMapsManager.getRegionsByValue( 120, 100, ‘val’);
​
// get all regions
iMapsManager.getRegionsByValue( 120 );

Related Articles
[PRO] How to Display external list of active entries
[PRO] How to Display specific map on click
[PRO] Best Practices when Using the Tooltip Content and Design
[PRO] Tooltip Content and Design
[PRO] How to Display external list of active entries
Did this answer your question?