Multimap Open API V1.2 Example

Map Movement 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 three main methods for achieving this:

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

This first 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.moveMapMeters( new MMPoint( -500, 500 ) );

This second instruction tells the map to move to a position 500 meters to the west and 500 meters to the south of the current central point.

mapviewer.goToPosition( new MMLatLon( 38.8920, -77.033 ) );

Finally, this instruction tells the map viewer to center on a new set of coordinates, either by entering the coordinates directly or by the use of goToPosition.

mapviewer.resetPosition()

Throughout the examples shown above, the "Reset position" instruction tells the map to return to the last original position it was given.

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.

Positive and negative map coordinates

The coordinate system of the map has its point of origin (0,0) at the top left-hand corner of the web page, with the positive x-axis increasing toward the right and the positive y-axis increasing in value as its position moves downwards. This is in accordance with several recognized standards for coordinate systems that are in use.

A graphic depiction is shown below.

Function(s) introduced:

MultimapViewer: moveMap(), moveMapMeters(), resetPosition()

What You Should See

If you view this in your browser you should see a Multimap draggable map centered on Constitution Avenue, Washington, DC, USA at zoom factor 16:

When you click on a "Reset position" button the map re-centers on Constitution Avenue. You should also try dragging the map, then clicking on these links to see the re-center effect in action.

The Map

The Code

There are three parts to the code below. The first is the line that links to the Multimap Open 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://developer.multimap.com/API/maps/1.2/OA08061815803962482"></script>

The body code

Sorry, JavaScript required...

Sorry, JavaScript required...

Sorry, JavaScript required...

The JavaScript code

Sorry, JavaScript required...

For more information on the subject of Multimap Open API JavaScript code, please read the Multimap Open API documentation at: http://www.multimap.com/share/documentation/openapi/1.2/classes/.

Back to examples.

Further Help

If you require further help with your Multimap Open API implementation, please visit the Multimap Developer Forums.

For Open API news, announcements and other information, please see our blog.

For general account enquiries or further services, please contact the Multimap Sales team: