Multimap API V1.2 JavaScript Example

Map Widget Example

This example shows how to add all of the widgets available as part of the Multimap API to the map. There are nine 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;
• Weather 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; showing local weather forecasts for up to five days; 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*, MMWeatherWidget() *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 two or three buttons depending on whether you have bird's eye functionality enabled.

Currently there are five types of map available: "Map"; "Aerial"; "Hybrid"; "Bird's Eye"; and "Bird's Eye Hybrid" (where "Hybrid" is an aerial view with roads and places labelled). Bird's Eye is not enabled for all clients so discuss this with your account manager if it does not show up.

When a map type is selected you may see an arrow to its right. Clicking on this arrow allows you to select from a number of alternative map types, or to turn labels on and off on the aerial and bird's eye view.

If you wish, you can add your own map tiles to your Map Type Widget; for details, please see the Custom Map Tiles example.

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.

Weather Widget

The Multimap API now offers the additional option of including weather forecasts in your applications. If you wish to purchase this additional Weather module, please contact your Multimap account manager.

If you click the "Weather" link to the right of the map you should see a list of weather conditions appear, giving details of weather by day and by night for the current day and the next five days.
For a more complex implementation of this widget, please see the Weather Widget example.

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.

Please note:

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

If you click on any of the three types of pan or zoom widget while another widget of a similar type is already visible, the most recent selection replaces the earlier one.

If you click on any of the examples of widgets placed outside the map while another type of widget is already visible, the most recent selection replaces the earlier one.

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 the Multimap Customer Support team:

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