Multimap logo Multimap Open API V1.2 JavaScript Example

Clickable Polygons Example *new*

Before reading this example you should read the Polylines and Polygons example to learn the basic features.

A clickable polyline enables you to highlight a particular section on the map, for example, an area of residential parking or a road closure. This example demonstrates the use of clickable polygons. The Multimap Open API allows you to associate an event with a user clicking within the polygon's borders. In the example below, clicking within the polygon's borders changes the interior fill color of the polygon.

Events used:

click

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 map area enclosed within the polygon, an alert message pops up followed by a change in the interior fill color of the polygon.

Please note that the interior color fill can only occur in a polygon; polylines do not have a color fill.

The Map

The Code

There are three parts to the code below. The first is the line that links to the Multimap Open 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 Open API polylines and polygons 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://developer.multimap.com/API/maps/1.2/OA08061815803962482"></script>

The body code


<!-- The Multimap Map -->
<div id="mapviewer" style="width : 500px; height : 420px"></div>

The JavaScript code


<!-- 
//<![CDATA[
var mapviewer, loading, request, polyline;
var points = [];
var max_zindex = 1000;
var colors = [ "#FF0000", "#00FF00", "yellow" ];
var color = 0;

function onLoad() {
    // Add the map 
    mapviewer = MMFactory.createViewer( document.getElementById( 'mapviewer' ) );
    mapviewer.addEventHandler( 'click', handleClick );
    mapviewer.goToPosition( new MMLocation( new MMLatLon( 51.5145, -0.1085 ), 15 ) );

    loading = document.getElementById( 'loading' );
    loading.style.display = 'block';

    // Set up the request, note that we are using a relative path as
    // this will not work across domains.
    request = mapviewer.getXMLHTTPRequest();
    request.open( 'GET', 'demo.xml', true );
    request.onreadystatechange = handleXML;
    request.send(null);
}

function handleClick( type, target ) {
  if( target instanceof MMPolyLineOverlay ) {
    alert( "You clicked on the polygon and changed its interior fill color." )
    color = (color+1) % colors.length;
addPolyline( points, "#0000FF", 0.5, 1, true, colors[color] );
  }
}

function handleXML() {
    if( request.readyState == 4 ) {
        loading.style.display = 'none';
        if( request.status == 200 ) {
            // For this example we're going to parse the text of the XML that
            // comes back as an example, but the browser should parse it
            // anyway and place it in request.responseXML if the file is
            // correctly served with an application/xml mime type.
            var xmlText = request.responseText;
            var xmlDoc = mapviewer.parseXML( xmlText );
            var markers = xmlDoc.documentElement.getElementsByTagName( 'location' );
            for( var i = 0; i < markers.length && i < 10; ++i ) {
                var point = new MMLatLon(
                parseFloat(markers[i].getAttribute('lat')),
                parseFloat(markers[i].getAttribute('lon')) );
                // Create marker, zIndex used to show first in the list on top of others 
                var marker = mapviewer.createMarker( point, { zIndex: (max_zindex + i), 'label' : markers[i].getAttribute( 'title' ), 'text' : (i+1)} );
                var html = '<h1>' + markers[i].getAttribute( 'title' ) + '<' + '/h1>';
                marker.setInfoBoxContent( html );
                points.push( point );
            }
            var location = mapviewer.getAutoScaleLocation( points );
            addPolyline( points, "#0000FF", 0.5, 1, true, colors[color] );
            mapviewer.goToPosition( location );
        } else {
            alert( 'There was a problem making the XML request' );
        }
    }
}

function  addPolyline (points, color, opacity, thickness,  closed, fill) {
    if (polyline) polyline.remove();
   polyline = new MMPolyLineOverlay( points, { color : color, opacity : opacity, thickness : thickness,  closed : closed, fill : fill, clickable : true } );
    mapviewer.addOverlay(polyline);
 }

MMAttachEvent( window, 'load', onLoad );
//]]> 
// -->

The CSS code


/* CSS code to support polylines in Internet Explorer  */
v\:* {
      behavior:url(#default#VML);
}

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

Back to examples.

Further Help

If you require further help with your Multimap Open API implementation, please visit the Multimap Developer Forums.

For Open API news, announcements and other information, please see our blog.

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

London, Great Britain +44 (0)20 7632 7800
email: sales@multimap.com