Web Maps Lite API Examples

Google Wrapper

From Google Maps to Web Maps Lite in one second

Javascript Level: Beginner

Web Maps Lite has an experimental feature called Google Wrapper that allows you to quickly switch your Google Maps-powered page to use Web Maps Lite and CloudMade tiles without touching the code. This example demonstrates how to do that.

Lets say that you have some Google Maps code on your page, like this:

if (GBrowserIsCompatible()) {
	var map = new GMap2(document.getElementById("cm-example"));
	map.setCenter(new GLatLng(37.4419, -122.1419), 13);
	 
	var bounds = map.getBounds();
	var southWest = bounds.getSouthWest();
	var northEast = bounds.getNorthEast();
	var lngSpan = northEast.lng() - southWest.lng();
	var latSpan = northEast.lat() - southWest.lat();
	for (var i = 0; i < 10; i++) {
		var point = new GLatLng(southWest.lat() + latSpan * Math.random(),
		southWest.lng() + lngSpan * Math.random());
		map.addOverlay(new GMarker(point));
	}
}

To switch it to Web Maps Lite, you have to do 2 simple things:

1. Change the script tag pointing to Google Maps javascript to the following:

<script type="text/javascript" src="http://tile.cloudmade.com/wml/0.4/web-maps-lite-google.js"></script>

2. Define a CLOUDMADE_API_KEY variable before your code, like this:

CLOUDMADE_API_KEY = 'BC9A493B41014CAABB98F0471D759707';

That's it! Your page is now powered by Web Maps Lite. You can find out more about Google Wrapper in the Google Wrapper section of our documentation.

That's the end of our examples. We hope you've learnt something new and we can't wait to see what you do with our maps. If you have any comments you can get in touch with us by clicking on the "Feedback Box" link on the main page. To join in the discussion about CloudMade's APIs and to be the first to hear about new services, sign up to our mailing lists.

JS-docs | View example