Multimap logo Multimap API V1.2 JavaScript Example

Zoom Factors and Map Types

Zoom factor examples

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 goToPosition.

The zoom factor can be changed by calling the setZoomFactor() method, or the zoom() method which takes a positive or negative delta (for example, 1 to zoom in and -1 to zoom out). Double-clicking on the map also re-centers and zooms in the map by one zoom factor; double-right-clicking the map re-centers and zooms 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. This functionality is turned off by default. For more information on enabling this feature, please see the separate topic on Options.

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

Please note that the number of zoom factors varies with map type. For example, if the map type is set to "MM_WORLD_MAP", you get zoom factors from 1 to 18. If the map type is set to "MM_WORLD_AERIAL" or "MM_WORLD_HYBRID", you get zoom factors from 2 to 20. If the map type is set to "MM_WORLD_BIRDSEYE" or "MM_WORLD_BEHYBRID", you get zoom factors 19 and 20.

Restricting zoom factors *new*

The Multimap API now allows you to restrict the range of zoom factors available to the user by using the setAllowedZoomFactors() method.

Map type examples

The map viewer can be set to display a standard map, aerial photographs or Bird's Eye imagery (where these are available). Bird's Eye map type provides 45-degree high-resolution detailed imagery which allows users to see close-up aerial shots of major cities around the world.

You can choose which of these to display by altering the map type. The map type is set in the constructor for the map viewer as the second argument. This argument is optional and by default uses "MM_WORLD_MAP" to display maps. To set it to aerial photography, set it to "MM_WORLD_AERIAL". To show an aerial photograph that shows a map overlay surrounding the area covered by the mouse pointer, set the map type to "MM_WORLD_HYBRID". To show Bird's Eye imagery, set it to "MM_WORLD_BIRDSEYE". Finally, to show Bird's Eye imagery that shows a map overlay, set the map type to "MM_WORLD_BEHYBRID".

As well as setting the initial map type, you can also set the map type while the viewer is in use by using the setMapType() method. To find out what the current map type is, use getMapType(). To find out the current available map types, use the getMapTypes() method.

If you wish to show maps of a particular appearance or from a specific map data provider you can specify which maps your Multimap API service shows, as described in the Map Data Preferences example.

Instead of writing code to handle the map type, you may wish to use the Map Type Widget found on the Widgets example.

Function(s) introduced:

MultimapViewer: addEventHandler(), getAvailableMapTypes(),
getAvailableZoomFactors(), getMapType(), getZoomFactor(), removeEventHandler(),
setAllowedZoomFactors() *new*, setMapType(), setZoomFactor(), zoom()

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 "Zoom out" buttons use the zoom() method.

By clicking on the menu items on the right-hand side you can change and retrieve the current map type.

By clicking on the "Restrict Allowed Zoom Factors" link you can restrict the list of available zoom factors to between 5 and 15.

By clicking on the "Allow All Zoom Factors" link you can remove all restrictions on the list of available zoom factors.

The Map

The Code

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

The body code

Sorry, JavaScript required...
Sorry, JavaScript required...

The JavaScript code

Sorry, JavaScript required...

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

Back to examples.

Further Help

If you require further help with your Multimap service implementation, additional Multimap services or general account enquiries, please contact Multimap:

Sales: +44 (0)20 7632 7800
Customer Support: +44 (0)20 7632 7777
email: mminform@microsoft.com