Multimap logo Multimap API V1.2 JavaScript Example

Filtering Markers *new*

The Multimap API now allows you to filter markers icons on a map depending on the markers' attributes.

Filtering markers by attributes

In this example, the markers are filtered by their number attribute, using the ge and le operators.
The full list of operators by which it is possible to filter is shown in the table below.

Operator Description
eq Is equal to
ne Is not equal to
lt Is less than
gt Is greater than
not Is not
le Is less than or equal to
ge Is greater than or equal to
in Is in the set or range
null Is NULL
notnull Is not NULL
contains Contains*
startswith Starts with
endswith Ends with
like Is like*

*Please note that the like operator uses 'wildcard' characters to match patterns, so that, for example, "like *tim*" equates to "contains tim".

It is also possible to filter markers by specifying a minimum and maximum zoom factor for each of them, by setting attributes with the names mm:min_zoom and mm:max_zoom.

Marker management

You can now combine marker 'decluttering' and filtering; please see the separate topic on Decluttering Markers.

Function(s) introduced:

MultimapViewer: setMarkerFilters()

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.

This example overlays 25 markers on the map. For each marker, coordinates are assigned at random and a numeric value between 0 and 10 is assigned to the marker's number attribute.

You can use the Min: and Max: boxes to filter out the markers you wish to exclude from the map, then click on the Filter button to hide every markers whose number attribute lies outside the selected range.

The Map

Min:
Max:

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


<!-- The Multimap Map -->
<div id="mapviewer" style="width : 500px; height : 420px"></div>
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://clients.multimap.com/share/documentation/api/1.2/classes/.

Back to examples.

Further Help

If you require further help with your Multimap service implementation, additional Multimap services or general account enquiries, please contact Multimap:

Sales: +44 (0)20 7632 7800
Customer Support: +44 (0)20 7632 7777
email: mminform@microsoft.com