Multimap API V1.2 JavaScript Example

Local Information Widget Example

This example shows how to use the API's optional Local Information module to add a fully-functional Local Information Widget to your map so that the 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.

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.

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