Layers and Providers

If you're supplying your own image tiles for your map, you'll need to know how to create layers and providers. Usually these are supplied to the Map constructor.

Layers are levels of tiles that can be added, removed, and rearranged on a map. Each layer has one provider, which delivers specific data to the layer, like tile URLs, based on map coordinates.

If you want to switch layers in response to a button press, you can call map.setLayerAt with a new layer instead.

MapProvider

The MapProvider class expects a callback function that can turn a Coordinate into a URL string:

var provider = new MM.MapProvider(function(c) {
    var img = [ c.zoom, c.column, c.row ].join('/') + '.png';
    return 'http://tile.openstreetmap.org/' + img;
});

TemplatedMapProvider

The TemplatedMapProvider is an easier interface to MapProvider which takes a string with attractive mustache syntax to generate tile URLs:

var template = 'http://tile.openstreetmap.org/{Z}/{X}/{Y}.png';
var provider = new MM.TemplatedMapProvider(template);

The TemplatedMapProvider also takes a template argument {S}, that replaces part of the URL with one of an array of strings. You can use this for subdomains of a tile server.

var template = 'http://{S}tile.openstreetmap.org/{Z}/{X}/{Y}.png';
var subdomains = [ '', 'a.', 'b.', 'c.' ];
var provider = new MM.TemplatedMapProvider(template, subdomains);

The TemplatedMapProvider is similar to the OpenLayers.Layer.XYZ class, or Leaflet's L.TileLayer

Providers also implement a few properties and functions that alter how Modest Maps loads tiles (or does not load tiles) such as outerLimits and sourceCoordinate, and the functions used by map to convert to and from Locations and Coordinates: locationCoordinate(location) and coordinateLocation(coord).

Layer

new in 1.0.0

Layers wrap Providers and do much of the work of requesting and manages the tiles that Providers suggest.

Constructor

// Create a new layer with OpenStreetMap tiles
var osmProvider = new MM.TemplatedMapProvider('http://{S}tile.openstreetmap.org/{Z}/{X}/{Y}.png');
var osmLayer = new MM.Layer(osmProvider);

Instance Methods

// Change a layer's provider
layer.setProvider(newProvider);

Layer Setters and Getters

• setLayerAt(index, layer)
• remoteLayer(layer)
• insertLayerAt(index, layer)
• removeLayerAt(index)
• swapLayersAt(i, j)
• addLayer(layer)
• getLayers()