Multimap Open API V1.2 JavaScript Example

Local Information Widget Example

This example shows how to use the Open API's Local Information module to add a fully-functional Local Information Widget to your map so that the Open API can show points of interest of various types within the bounds of a map.

You can place a Local Information Widget on your map among other types of widget, as described in the Widgets example.

The appearance of widgets is set with a style sheet; this example shows 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 the widget on top of your maps or, if you prefer, you can place it 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.

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.

On the right-hand side of the map is a list of controls which determine the appearance and behavior of the Local Information Widget.

If you click any of the top five controls to the right of the map, you should see a list of different types of point of interest appear. Depending on which link you select, you can control whether the widget:

• appears inside or outside the map;
• includes a custom header;
• shows a full list of types of point of interest or a smaller subset of these; and
• shows default or custom icons, and restricts their visibility at certain zoom factors.

When the Local Information Widget is visible, if you check the box to the right of any type of point of interest listed, all points of interest of that type within the map's bounds appear on the map. By default, the Local Information Widget updates itself automatically as you drag the map to a new location, thereby redefining the map bounds.

By checking the links in the lower list, you can:

• prevent the Local Information Widget from updating automatically when you drag the map;
• restart the Local Information Widget updating automatically when you drag the map;
• specify which types of features can appear on the map; and
• change the maximum number of each type of point of interest that the map shows.

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 Open 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://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: