Multimap API V1.2 Example

Decluttering Markers *new*

The Multimap API now allows you to improve the appearance of multiple icons on a map.

When two or more separate locations are specified on a map there is a chance that the icons that mark them may overlap, especially where the map in question is on a large scale or has been zoomed out. To avoid this, Multimap's API offers options for 'decluttering' icons that are close to each other.

Arranging clusters

There are two methods for arranging clusters:

• 'aggregate' works by amalgamating all markers that overlap into a single (usually distinct) marker based on the average mean position of all the overlapping markers. Any info boxes that are attached to markers that are aggregated become grouped together automatically; and
• 'grid' works by calculating which markers overlap and arranging them on a grid.

Identifying clusters

There are two methods for identifying clustered locations:

• 'fast' identification works by identifying two markers that overlap and determining the bounds of the virtual 'box' that they occupy; it then checks if any other markers fall into this box and, if so, it extends the 'box'. In this way it can identify markers that are not actually touching other markers but are very close to them. This method performs only a single iteration and runs faster than 'accurate' identification; and
• 'accurate' identification works by calculating exactly which markers overlap, separating them and then checking for any further overlaps; it performs this iteration recursively ten times.

The default behavior is 'aggregate' and 'fast'.

Function(s) introduced:

MultimapViewer: declutterGroup()

What You Should See

If you view this in your browser you should see a Multimap draggable map centered on Saint James Avenue, Boston, Massachusetts, USA, at zoom factor 15.

• Clicking on "Aggregate first group" combines all the individual overlapping markers into a single 'aggregated' icon.
• Clicking on "Arrange second group on a grid" separates all overlapping icons and re-positions them as closely as possible to their correct locations.
• Clicking on "Turn decluttering off" returns all icons to their original positions and settings.

The Map

The Code

There are three parts to the code below. The first is the line that links to the Multimap API. The second is an example of the HTML you must have in your page. The third is an example of the JavaScript required to implement the page.

The header code

<script type="text/javascript" src="http://clients.multimap.com/API/maps/1.2/demo"></script>

The body code

Sorry, JavaScript required...

Sorry, JavaScript required...

The JavaScript code

Sorry, JavaScript required...

For more information on the subject of Multimap API JavaScript code, please read the API documentation at: http://www.multimap.com/share/documentation/api/1.2/classes/.

Back to examples.

Further Help

If you require further help with your map API implementation, please contact our Customer Support team:

For general account enquiries or further services, please contact your Multimap Sales team: