Multimap API v1.1 Example

There are several general methods that you can use to ascertain properties of the map viewer:

mapviewer.getMapBounds()

This instruction returns the bounds of the map using the appropriate coordinate system as an MMBox object (which provides right/left/top/bottom properties).

mapviewer.getCurrentPosition()

This returns the current position at the center of the map as an MMPoint.

mapviewer.getDimensions()

Finally, this instruction retrieves the dimensions of the viewer in pixels, as an MMDimension object. This is especially useful when you have allowed the browser to define the size of the viewer, instead of styling the container to a specific size.

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.

Clicking on each of the links updates the message window below the map. As you drag the map and click the links again, the current position and map bounds change.

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

<table>
  <tr>
     <td>
        <!-- The Multimap Map-->
        <div id="mapviewer" style="width : 500px; height : 420px;"></div>
     </td>
     <td>
        <!-- The Map Controls -->
        <p><a href="javascript:void(undefined)" onclick="displayMapBounds()">Display Map Bounds</a></p>
        <p><a href="javascript:void(undefined)" onclick="displayCurrentPosition()">Display Current Position</a></p>
        <p><a href="javascript:void(undefined)" onclick="displayDimensions()">Display Viewer Dimensions</a></p>
     </td>
  </tr>
  <tr>
     <td colspan="2" id="message">Messages will be placed here</td>
  </tr>
</table>

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


function displayMapBounds()
{
     // Get the map bounds
     var bounds = mapviewer.getMapBounds();
     message.innerHTML = "South West is "+bounds.getSouthWest().toString()+" : North East is "+bounds.getNorthEast().toString();
}

function displayCurrentPosition()
{
     // Get the current position
     message.innerHTML = "The current position is: "+mapviewer.getCurrentPosition();
}

function displayDimensions()
{
     // Get the dimensions
     message.innerHTML = "The viewer's dimensions are: "+mapviewer.getDimensions();
}

MMAttachEvent( window, 'load', onLoad );