Web Maps Lite API Examples

Tile overlay

One tileset over another

Javascript Level: Intermediate

There are cases when you need to display a semitransparent tileset over an existing map. Web Maps Lite lets you do this too:

Here's the JavaScript for the example:

var map = new CM.Map('cm-example', 
	new CM.Tiles.CloudMade.Web({key: 'BC9A493B41014CAABB98F0471D759707'}));
	map.setCenter(new CM.LatLng(48, 7), 4);
		
var overlayTiles = new CM.Tiles.Base({
	tileUrlTemplate: "overlay.png",
	opacity: 0.2
});

var overlay = new CM.TileLayerOverlay(overlayTiles);
		
map.addOverlay(overlay);

Lets see what's going on here:

1. We create a new CloudMade map as usual:

var map = new CM.Map('cm-example', 
	new CM.Tiles.CloudMade.Web({key: 'BC9A493B41014CAABB98F0471D759707'}));
map.setCenter(new CM.LatLng(48, 7), 4);

2. Next we create a CM.Tiles.Base object that represents our custom tileset.

var overlayTiles = new CM.Tiles.Base({
	tileUrlTemplate: "overlay.png",
	opacity: 0.2
});

For this example we will need two options to pass in the CM.Tiles.Base constructor: tileUrlTemplate to specify the URL template for the tileset (in our case this it be the same image for all tiles) and opacity to set the transparency level of the layer.

3. Then we create a CM.TileLayerOverlay object, passing it our tiles layer in the constructor:

var overlay = new CM.TileLayerOverlay(overlayTiles);

4. Finally, we add it as an overlay to our map:

map.addOverlay(overlay);

So now we see a nice tile overlay over our map. You can find out more about CM.TileLayerOverlay and CM.Tiles.Base checking out the corresponding documentation pages. Our next example will be a lot simpler: Sidebars

JS-docs | View example