Multimap API v1.1 Example

This example shows how to add all of the widgets available as part of the Multimap API to the map. There are three types of widget available that can be added:

Pan/Zoom Widget;

Small Pan/Zoom Widget; and

Small Zoom Widget.

These widgets control the panning and zooming of the map.

The code demonstrates creating, adding and removing each of the available widgets on the map.

The appearance of the widgets is set with a style sheet; the example shows these widgets in the Multimap style, but these can be changed to whatever appearance is desired by changing the style sheet. For more information on this, please see the Advanced Widgets example.

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.

Pan/Zoom Widget

If you click the Add a Pan/Zoom Widget link to the right of the map you should see a Pan/Zoom Widget added to the map, displayed over it.

This Pan/Zoom Widget should have eight directional pan buttons, one Re-center button, one Zoom In button, one Zoom Out button and many zoom-factor buttons. The number of zoom-factor buttons should correspond to the number of available zoom factors available for the map. At present there are 19 zoom factors.

The current zoom level should be identified on the Pan/Zoom control by a different appearance from the appropriate zoom level button.

Clicking each of the directional pan buttons should cause the map to scroll or pan smoothly in the appropriate direction.

Clicking the Re-center button should re-center the map back to Fleet Street, London, Great Britain.

Clicking the '+' or Zoom In button should zoom the map in to the next available zoom factor.

Clicking the '-' or Zoom Out button should zoom the map out to the next available zoom factor.

Clicking any of the 19 zoom buttons should zoom the map to the relative zoom factor.

Small Pan/Zoom Widget

If you click the Add a Small Pan/Zoom Widget link to the right of the map you should see a Small Pan/Zoom Widget added to the map. This should be displayed over the map and any other zoom widgets should be removed.

The Small Pan/Zoom Widget should have four directional pan buttons, one Re-center button, one Zoom In button and one Zoom Out button.

Small Zoom Widget

If you click the Add a Small Zoom Widget link to the right of the map you should see a Small Zoom Widget added to the map. This should be displayed over the map and any other zoom widgets should be removed.

This Small Zoom Widget should have one Zoom In and one Zoom Out button.

<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 : 520px;"></div>

<!-- The Widget Controls -->
<p><a href="javascript:void(undefined)" onclick="AddPanZoomWidget();">Add a Pan/Zoom Widget</a></p>
<p><a href="javascript:void(undefined)" onclick="AddSmallPanzoomWidget();">Add a Small Pan/Zoom Widget</a></p>
<p><a href="javascript:void(undefined)" onclick="AddSmallZoomWidget();">Add a Small Zoom Widget</a></p>     
<p><hr></p>
<p><a href="javascript:void(undefined)" onclick="RemoveAllWidgets();">Remove All Widgets</a></p>

var mapviewer;
var panzoomWidget;
var smallPanzoomWidget;
var smallZoomWidget;
        
        
function onLoad()
{
  //Add the map 
  mapviewer = new MultimapViewer( document.getElementById( 'mapviewer' ) );
  mapviewer.drawAndPositionMap( new MMLocation( new MMLatLon( 51.5145, -0.1085 ) ,15 ) );
}
        
function AddPanZoomWidget()
{
  //Remove any pan/zoom widgets
  mapviewer.removeWidget( panzoomWidget );
  mapviewer.removeWidget( smallPanzoomWidget );
  mapviewer.removeWidget( smallZoomWidget );

  //Add the Pan Zoom Widget
  panzoomWidget = new MMPanZoomWidget();
  mapviewer.addWidget( panzoomWidget );
}
    
function AddSmallPanzoomWidget()
{
  //Remove any pan/zoom widgets
  mapviewer.removeWidget( panzoomWidget );
  mapviewer.removeWidget( smallPanzoomWidget );
  mapviewer.removeWidget( smallZoomWidget );

  //Add the Small Pan Zoom Widget
  smallPanzoomWidget = new MMSmallPanZoomWidget();
  mapviewer.addWidget( smallPanzoomWidget );
}   
    
function AddSmallZoomWidget()
{
  //Remove any pan/zoom widgets
  mapviewer.removeWidget( panzoomWidget );
  mapviewer.removeWidget( smallPanzoomWidget );
  mapviewer.removeWidget( smallZoomWidget );

  //Add the Small Zoom Widget 
  smallZoomWidget = new MMSmallZoomWidget();
  mapviewer.addWidget( smallZoomWidget );
}
    
function RemoveAllWidgets()
{
  //Remove Widgets
    mapviewer.removeWidget( panzoomWidget );
    mapviewer.removeWidget( smallPanzoomWidget );
    mapviewer.removeWidget( smallZoomWidget );
}    
    
MMAttachEvent( window, 'load', onLoad );