Multimap API v1.1 Example

The Multimap API uses a concept called "zoom factors" to describe the different levels of detail available; this replaces the map scales used in our other services. The most zoomed-out factor is "1", and the level of detail increases along with the zoom factor. The default zoom factor is "13", but an alternative can be passed to drawAndPositionMap.

The zoom factor can be changed by calling the setZoomFactor() method, or the zoom() method which takes a positive or negative delta (e.g. -1 to zoom in, 1 to zoom out).

Another way to modify the current zoom factor is by using the scroll wheel on your mouse. Scrolling down zooms the map out by one factor and scrolling up zooms the map in by one zoom factor. Because modifying the default scroll wheel action might confuse users, this is off by default; it can be turned on by a call to the setMouseWheelZoom() method. Support for the scroll wheel in JavaScript is only found in more recent browsers such as Safari 2, Internet Explorer 6 and Firefox.

Important Note: Because this page has to retain the style of the documentation, you will most likely find that using the mouse scroll wheel scrolls the page as well as panning the map. In a real application the page would be designed in such a way as to omit the browser scroll bar altogether.

You can find out what zoom factors are available by calling the getAvailableZoomFactors() method; you can find out the current setting by using getZoomFactor().

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.

The drop-down list on the right is populated by a call to getAvailableZoomFactors(). The current selection is updated by using an event callback listening for changeZoom events. When you select a new entry from the drop-down list, setZoomFactor() is used to set the zoom factor to your selection.

The zoom in and out buttons use the zoom() method, and the checkbox allows you to experiment with the scroll wheel zooming using the setMouseWheelZoom() method.

<script type="text/javascript" src="http://clients.multimap.com/API/maps/1.1/demo"></script>

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

<!-- The Zoom Controls -->
<form action="#" onsubmit="return false" method="get">
  <p><a href="#" onclick="mapviewer.zoom( -1 ); return false;">Zoom In</a></p>
  <p><select name="zfs" id="zfs" size="1" onchange="mapviewer.setZoomFactor( this.options[this.selectedIndex].value )">
     </select></p>
  <p><a href="#" onclick="mapviewer.zoom( 1 ); return false;">Zoom Out</a></p>
  <input type="checkbox" value="1" onclick="mapviewer.setMouseWheelZoom( this.checked )" id="mousewheelzoom"> Mouse Wheel Zoom
</form>

var mapviewer;

function onLoad()

{
  // Add the map 
  mapviewer = new MultimapViewer( document.getElementById( 'mapviewer' ) );

  // Populate the zoom factors drop down
  var zfs = document.getElementById( 'zfs' );

  while( zfs.options.length > 0 )
     zfs.removeChild( zfs.options[0] );

  var factors = mapviewer.getAvailableZoomFactors();
  for( var i = 0; i < factors.length; ++i )

  {
     var option = document.createElement( 'option' );

     option.value = factors[i];
     option.appendChild( document.createTextNode( 'Zoom Factor ' + factors[i] ) );

     zfs.appendChild( option );
  }

  // This fixes a bug with IE
  setTimeout( "document.getElementById( 'zfs' ).selectedIndex = 3;", 10 );

  // Make sure the drop down updates when the zoom factor is changed
  mapviewer.addEventHandler( 'changeZoom', function( type, target, old_zoom, new_zoom ) {

     var zfs = document.getElementById( 'zfs' );
     for( var i = 0, l = zfs.options.length; i < l; ++i ) {

        if( zfs.options[i].value == new_zoom )
          zfs.selectedIndex = i;

     }
  } );
  mapviewer.drawAndPositionMap( new MMLocation( new MMLatLon( 51.5145, -0.1085 ), 15 ) );

  // Firefox will retain the setting for the checkbox
  // We need to read it so that we're reflecting its value properly
  mapviewer.setMouseWheelZoom( document.getElementById( 'mousewheelzoom' ).checked );

}

function changeZoom( sel )
{
  var zf = sel.options[sel.selectedIndex].value;

  if( zf != mapviewer.getZoomFactor() )
  {

     mapviewer.setZoomFactor( zf );
  }
}
MMAttachEvent( window, 'load', onLoad );