Multimap API V1.2 Example

Map Widget Example - Pan/Zoom, Map Type, Location, Overview and Tools Widgets

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

• Pan/Zoom Widget;
• Small Pan/Zoom Widget;
• Small Zoom Widget;
• Map Type Widget;
• Location Widget;
• Overview Widget;
• Tools Widget; and
• Local Information Widget.

These widgets control the behavior of the map: panning; zooming; changing the map type; showing a 'breadcrumb trail' of the map's location; showing an overview map; showing points of interest; and displaying ways to make the map behave differently when the user clicks or drags it.

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.

Your applications can overlay widgets on top of your maps or, if you prefer, you can place the widgets in a separate DOM container. This might be useful, for example, if you wish to maintain the clarity of your maps by avoiding covering them with many widgets simultaneously. This example demonstrates widgets both on and off the map.

Function(s) introduced:

MultimapViewer: addWidget(), MMLocationWidget() *new*, MMMapTypeWidget(), MMOverviewWidget() *new*, MMPanZoomWidget(), MMSmallPanZoomWidget(), MMSmallZoomWidget(), MMToolsWidget() *new*, MMLocalInfoWidget() *new*, removeWidget()
MMWidget: setContainer()

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 "Pan/Zoom" 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 four directional pan buttons, one "Re-center" button, one "Zoom in" button, one "Zoom out" button and many zoom-factor buttons.

Small Pan/Zoom Widget

If you click the "Small Pan/Zoom" 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 "Small Zoom" 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.

Map Type Widget

If you click the "Map Type" link to the right of the map you should see a Map Type widget added to the map. This should be displayed over the map and have three buttons.

Currently there are three types of map available: "Map"; "Aerial"; and "Hybrid" (where "Hybrid" is an aerial view with a map overlay).

If you let your mouse hover over the "Map" link, you should see a preview map from an alternative map data provider appearing to the right of the link. Click on that preview map to replace the main map with the alternative provider's map of the same area.

Location Widget

If you click the "Location" link to the right of the map you should see a text box appear showing a geographic 'breadcrumb trail' of the map's location.

Overview Widget

If you click the "Overview" link to the right of the map you should see an overview map appear in the bottom right-hand corner of the original map. You can use this overview map to drag the main map to cover a new location.

Tools Widget

If you click the "Tools" link to the right of the map you should see a series of controls appear. You can use these controls to determine the map's behavior when the user performs actions such as clicking or dragging it.

Local Information Widget

If you click the "Local Information" link to the right of the map you should see a list of different types of points of interest appear. By checking the boxes to the right of this list, you can specify which types of local features can appear on the map.
For a more complex implementation of this widget, please see the Local Information Widget example.

If you right-click anywhere on the map the Context Menu appears, allowing you to zoom in, zoom out or re-center the map.

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 the JavaScript functions that are called by the links in this 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...

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://www.multimap.com/share/documentation/api/1.2/classes/.

Back to examples.

Further Help

If you require further help with your map API implementation, please contact our Customer Support team:

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