Multimap API V1.2 JavaScript Example

Polylines and Polygons Example new

The Multimap API now allows you to draw lines and shapes on a map: these are called polylines and polygons respectively.

This example shows how you can use this feature to draw lines and shapes on a map.

Function(s) introduced:

MultimapViewer: addOverlay()

Data used:

demo.xml

What You Should See

If you view this in your browser you should see a Multimap draggable map centered on Fleet Street, London, Great Britain, at zoom factor 15. Markers show points of interest on the map.

When you click on the "Draw default polyline" link, a colored line appears on the map linking all its points.
When you click on the "Draw polygon with custom colors" link, a closed polygon appears on the map, linking all its points with customized colors and transparent shading, through which the map is visible.
When you click on the "Change to full opacity" link, a closed polygon appears on the map with shading that obscures the area of the map that is beneath it.
When you click on the "Change line thickness" link, a polygon appears on the map, shown by a plain black line.
When you click on the "Remove polyline / polygon" link, any polygons or polylines that are currently present on the map disappear.

The Map

Draw default polyline

Draw polygon with custom colors

Change to full opacity

Change line thickness

Remove polyline / polygon

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.

Please note that, to ensure that your Multimap API polylines appear correctly in browsers such as Internet Explorer, you should include in your web page both the first line of the header code and the example of CSS code shown in the boxes below.

The header code

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" >

<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...

The CSS code

Sorry, JavaScript required...

Note on printing

Please note that you may not be able to print a highlighted route or a polyline from the Multimap API when using a Mozilla Firefox or an Opera browser. If you encounter such a problem, please try a different browser.

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