Multimap API v1.1 Example

Pan Limiting Example

Although the ability to drag maps with a mouse is a core feature of the Multimap API, customers may wish to disable this feature. This example gives a demonstration of how you can use the API to limit the areas to which a user can pan.

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 12. The map viewer has been set up to limit all types of panning to a rectangular area around the M25 motorway which encircles London. Regardless of which method is used to pan the map, the map does not allow the user to pan outside the M25.

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.1/demo"></script>

The body code

<div id="mapviewer" style="width : 500px; height : 420px;"></div>

The JavaScript code

var mapviewer, bounds, checkingBounds = false;

function onLoad()
{
  //Add the map 
  mapviewer = new MultimapViewer( document.getElementById( 'mapviewer' ) );
  mapviewer.drawAndPositionMap( new MMLocation( new MMLatLon( 51.5145, -0.1085 ), 12 ) );
  mapviewer.addWidget( new MMSmallPanZoomWidget() );

  // Inspired by http://www.econym.demon.co.uk/googlemaps/range.htm
  mapviewer.addEventHandler( 'moveMap', checkBounds );
  bounds = new MMBounds( new MMLatLon( 51.258676, -0.581498 ), new MMLatLon( 51.702987, 0.306545 ) );
}

function checkBounds()
{
  var mapcentre = mapviewer.getCurrentPosition();
  var out = false;
  var sw = bounds.getSouthWest();
  var ne = bounds.getNorthEast();
  if( mapcentre.lon > ne.lon )
  {
     out = true;
     mapcentre.lon = ne.lon;
  }
  else if( mapcentre.lon < sw.lon )
  {
     out = true;
     mapcentre.lon = sw.lon;
  }
  if( mapcentre.lat > ne.lat )
  {
     out = true;
     mapcentre.lat = ne.lat;
  }
  else if( mapcentre.lat < sw.lat )
  {
     out = true;
     mapcentre.lat = sw.lat;
  }
  if( out )
  {
     if( checkingBounds )
     {
// Don't get stuck in a recursive loop
     }
     else
     {
        var smoothPan = mapviewer.getSmoothPanning();
        mapviewer.setSmoothPanning( false );
        checkingBounds = true;
        mapviewer.goToPosition( mapcentre );
        checkingBounds = false;
        mapviewer.setSmoothPanning( smoothPan );
     }
  }
}

MMAttachEvent( window, 'load', onLoad );

For more information on the subject of Multimap API JavaScript code, please read the API documentation at: http://www.multimap.com/share/mapviewerapidocs/1.1/index.html.

Further Help

If you require further help with your map API implementation, please contact our Customer Support 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

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 7800
United States, Boston + 1 617 423 4510
email: sales@multimap.com