Multimap API V1.2 JavaScript Example

Overview

The Multimap API now allows you to add your own custom map tiles. This example shows you how to create a custom map layer to which users can switch in your Multimap API application.

The inclusion of custom map tiles requires several new API classes. It is necessary to create a collection of copyrights, assign each copyright collection to one or more tile layers, then include those tile layers in the API to create a map type in your JavaScript code.

Copyrights and copyright collections

Multimap allows each set of map tiles to have its own text label, which signifies the copyright owner for that set of tiles. Since a specific set of tiles may include more than one owner (for example, if the tiles originate from several different sources), Multimap recommends that you group the MMCopyrights into MMCopyrightCollection constructors and, for each tile layer, specify at least one piece of copyright text.

When the copyrights have been allocated, add each MMCopyright instance to an MMCopyrightCollection. Multimap uses MMCopyrightCollection constructors to permit the display of multiple copyright texts for a particular set of tiles.

After creating an instance of the MMCopyrightCollection, you can add your previously-created MMCopyright to the collection.

Configuring custom map tiles

When you have set up your copyright and copyright collection information, create a layer to represent your custom map tiles images.
In order to create a tile layer, specify the:

• minimum and maximum zoom levels for your tile images;
• URL that you intend to use for creating or downloading them*; and
• bounds of the map (if applicable - for example, if your custom map tiles cover only a small area).

*Please note that you should host your custom map tiles on your own server: you should not attempt to upload them to Multimap's servers via Client Zone.

Notes

References to other JavaScript examples

This example makes use of the features described previously in other topics:

• Zoom Factors and Map Types Example, which demonstrates how to restrict the range of available zoom factors;
• Map Widgets Example, which demonstrates how to add a Map Type Widget to a map; and
• Pan Limiting Example, which demonstrates how to prevent users from panning the map outside a set area.

Note on optimizing performance in Internet Explorer

The Internet Explorer browser has a two-connection limit per domain name, but allows up to eight connections overall: this means that, when a user is panning and zooming a map, only two tiles can be downloaded at any one time. A partial solution to this is to serve the tiles from subdomains: for instance, if your custom map tiles are in located at www.mydomain.com/tiles/, create three subdomains that all resolve to the same location (so that, for example, tile_set_01.mydomain.com/tiles/, tile_set_02.mydomain.com/tiles/ and tile_set_03.mydomain.com/tiles/ should all be symbolically linked to www.mydomain.com/tiles/).

Function(s) introduced:

MultimapViewer: addCopyright() *new*, addMapType() *new*

If you view this in your browser you should see a Multimap draggable map centered on Fleet Street, London, Great Britain, at zoom factor 16. The map has a Map Type widget overlaid on it.

If you click on any of the Map, Aerial or Hybrid controls on the widget, the map changes to that type.

If you click on the Multimap control at the bottom of the widget, the map shows custom tiles which offer coverage of central London.

The map is configured to show only the area for which the custom tiles offer coverage, so users cannot pan outside a small geographic area or zoom the map out beyond the zoom factors 14 and 18, which are the only tiles that are available for the custom map tiles in this example.

<script type="text/javascript" src="http://clients.multimap.com/API/maps/1.2/demo"></script>

Sorry, JavaScript required...

Sorry, JavaScript required...