Multimap API v1.1 : Event Examples

This example demonstrates the various events that can occur on the map. An event is fired when something happens on the map, such as when the user clicks on the map; you may assign functions which should be called when events occur.

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.

To see how events are invoked, click on each of the map controls, try dragging the map, and try double-clicking to re-center it. You should also click on the links on the right-hand side of the page and on the marker. As you perform these actions you should see information about the events that are triggered appearing at the bottom of the page in the logging area. Only the five most recent events are shown.

The Map

Logging Area

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

The body code

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

<!-- The Links -->
<p><a href="#" onclick="return addMarker()">Open Marker</a></p>
<p><a href="#" onclick="return removeMarker()">Remove Marker</a></p>
<p><a href="#" onclick="return addInfoBox()">Open Info Box</a></p>
<p><a href="#" onclick="return removeInfoBox()">Remove Info Box</a></p>
<p><a href="#" onclick="mapviewer.removeAllOverlays(); return false;">Remove All Overlays</a></p>

<!-- The Logging Area -->
<h3>Logging Area</h3>
<form action="#" onsubmit="return false" method="get">
  <textarea name="logarea" id="logarea" rows="8" cols="90"></textarea>
</form>

The JavaScript code

var mapviewer, infobox, marker;
var logged_events = new Array(), events_count = 0;

function onLoad()
{
  //Add the map 
  mapviewer = new MultimapViewer( document.getElementById( 'mapviewer' ) );
  mapviewer.addWidget( new MMSmallPanZoomWidget() );
  mapviewer.addEventHandler( 'click', logEvent );
  mapviewer.addEventHandler( 'changeZoom', logEvent );
  mapviewer.addEventHandler( 'drag', logEvent );
  mapviewer.addEventHandler( 'startPan', logEvent );
  mapviewer.addEventHandler( 'endPan', logEvent );
  mapviewer.addEventHandler( 'addOverlay', logEvent );
  mapviewer.addEventHandler( 'removeOverlay', logEvent );
  mapviewer.addEventHandler( 'removeAllOverlays', logEvent );
  mapviewer.addEventHandler( 'openInfoBox', logEvent );
  mapviewer.addEventHandler( 'closeInfoBox', logEvent );
  mapviewer.drawAndPositionMap( new MMLocation( new MMLatLon( 51.5145, -0.1085 ) ,19 ) );
}

function logEvent( eventType, eventTarget, arg1, arg2, arg3 )
{
  // Log this event
  while( logged_events.length >= 5 )
  {
     logged_events.shift();
  }
  ++events_count;
  var logstr = events_count+": "+eventType + " event from ";
  logstr += (eventTarget == mapviewer?'mapviewer':(eventTarget==marker?'marker':'infobox'));
  logstr += " with "+(arg1||arg2||arg3?"args ( "+arg1+(arg2?", "+arg2:"")+(arg3?", "+arg3:"")+" )":"no args")+"\n";
  logged_events.push( logstr );
  var fulltext = "";
  for( var i = 0; i < logged_events.length; ++i )
  {
     fulltext += logged_events[i];
  }
  document.getElementById( 'logarea' ).value = fulltext;
  return true;
}

function addMarker()
{
  if( marker )
     mapviewer.removeOverlay( marker );
  marker = mapviewer.createMarker( new MMLatLon( 51.51859904, -0.10329797 ), 'Test Marker' );
  return false;
}

function removeMarker()
{
  mapviewer.removeOverlay( marker );
  return false;
}

function addInfoBox()
{
  var html = "<h2>Hello&nbsp;World!</h2><p>Welcome to the Multimap API</p>";
  if( infobox )
     mapviewer.removeOverlay( infobox );
  infobox = mapviewer.createInfoBox( new MMLatLon( 51.51871526, -0.11050014 ), html );
  return false;
}

function removeInfoBox()
{
  mapviewer.removeOverlay( infobox );
  return false;
}

MMAttachEvent( window, 'load', onLoad );

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:

Australia, Sydney	+ 61 (0) 2 9262 6551
Great Britain, London	+44 (0)20 7632 7777
United States, Boston	+ 1 617 423 4510
email:	info@multimap.com

Australia, Sydney	+ 61 (0) 2 9262 6551
Great Britain, London	+44 (0)20 7632 7800
United States, Boston	+ 1 617 423 4510
email:	sales@multimap.com

Multimap API v1.1 Example

Event Examples