Multimap API V1.2 JavaScript Example
Multimap API V1.2 JavaScript 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:
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.
MultimapViewer: addWidget(), MMLocationWidget() *new*,
MMMapTypeWidget(), MMOverviewWidget() *new*, MMPanZoomWidget(), MMSmallPanZoomWidget(),
MMSmallZoomWidget(), MMToolsWidget() *new*, MMWeatherWidget() *new*, MMLocalInfoWidget() *new*, removeWidget()
MMWidget: setContainer()
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.
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.
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.
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.
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 maps enabled.
Currently there are three types of map available: "Map"; "Aerial"; and "Bird's Eye". The Map Type Widget lets your aerial and Bird's Eye photographs include roads and names of places: 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.
Bird's Eye imagery is not enabled for all customers so please discuss this with your Multimap account manager if it is not visible.
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.
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.
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.
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.
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.
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.
|
|
Select widget to add to the map:
Pan/Zoom Select widget to add outside the map: |
Outside widgets will be placed here...
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.
<script type="text/javascript" src="http://clients.multimap.com/API/maps/1.2/demo"></script>
Sorry, JavaScript required...
Sorry, JavaScript required...
Sorry, JavaScript required...
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/.
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 |