Multimap API v1.1 Example

The previous examples showed how to create a map that could be dragged by the user. There are times when a developer will need to move the map independently of the user. There are four main methods for achieving this:

mapviewer.moveMap( new MMPoint( 50, 50 ) );

This instruction tells the map viewer to move to a point that is 50 pixels east and 50 pixels south at the current zoom factor.

mapviewer.resetPosition()

This instruction tells the map to return to the last original position it was given, by use of goToPosition or drawAndPositionMap.

mapviewer.goToPosition( new MMLatLon( 51.43384, -0.21413 ) );

This instruction tells the map viewer to center on a new set of coordinates.

mapviewer.moveMapMeters( new MMPoint( 500, 500 ) );

Finally, this instruction tells the map to move to a position 500 meters to the east and 500 meters to the south of the current central point.

You will notice while using this example that the map viewer pans smoothly to the new location if it is within the viewer or just outside it. If the new location is further away, the viewer redraws itself completely.

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. When you click on the first link the viewer pans smoothly to a position to the south-east. When you click on the second link the map re-centers on Fleet Street. When you click on the third link the map centers on the All England Tennis Club at Wimbledon. You should also try dragging the map, then clicking on the second link to see the re-center effect in action. The fourth link will move the map to a position 500 meters to the east and and 500 meters to the south.

<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 Movement Links -->
<p><a href="#" onclick="mapviewer.moveMap( new MMPoint( 50, 50 ) ); return false;">Move the map (50x50 pixels)</a></p>
<p><a href="#" onclick="mapviewer.resetPosition(); return false">Reset the position of the map</a></p>
<p><a href="#" onclick="mapviewer.goToPosition( new MMLatLon( 51.43384, -0.21413 ) ); return false;">Go to a new position</a></p>
<p><a href="#" onclick="mapviewer.moveMapMeters( new MMPoint( 500, 500 ) ); return false">Move the map (500x500 meters)</a></p>

var mapviewer;

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


MMAttachEvent( window, 'load', onLoad );