Web Maps Lite API Examples

Overview Issue Tracker Documentation Wiki Examples Featured apps Pricing

Simple Map

Maybe the world's most basic map

Javascript Level: Beginner

Maps don't get much easier than this. In our first example we're going to start real simple and give you all the HTML you need to get a map in your web page. Follow these three steps for mapping happiness:

  1. Sign-up for a CloudMade API key, by following this link
  2. Brush up on some basic Javascript and HTML skills, you'll be needing them
  3. Fire up your favourite text editor, get comfortable and start with example one

If you're a seasoned Javascript veteran, you might want to skip these examples and go straight to the JS-Doc.

Here's the full HTML page for this example:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
  <title>CloudMade JavaScript API example</title>
</head>
<body>

  <div id="cm-example" style="width: 500px; height: 500px"></div>

  <script type="text/javascript" src="http://tile.cloudmade.com/wml/latest/web-maps-lite.js"></script>
  <script type="text/javascript">
    var cloudmade = new CM.Tiles.CloudMade.Web({key: 'BC9A493B41014CAABB98F0471D759707'});
    var map = new CM.Map('cm-example', cloudmade);
    map.setCenter(new CM.LatLng(51.514, -0.137), 15);
  </script>

</body>
</html>

Lets look at what each bit of code is doing here.

1. First we add the necessary HTML to the page: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
  <title>CloudMade JavaScript API example</title>
</head>
<body>

2. Then we create an HTML div element which will hold our map:

<div id="cm-example" style="width: 500px; height: 500px"></div>

We give the div an id, "cm-example", and tell it the width and height of the map.

3. Next we pull in some JavaScript. You'll probably want to put this inside the head tag of your page so that it's available to all the scripts running on your page.

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

4. Next we open a new script tag to put out Javascript into:

<script type="text/javascript">

5. Then we create a new CloudMade tiles object with an API key.

var cloudmade = new CM.Tiles.CloudMade.Web({key: 'BC9A493B41014CAABB98F0471D759707'});

6. In the next line we create a new CloudMade Map object with the CM.Map class and pass it the name of the HTML div to which our map will be attached and our tile layer.

var map = new CM.Map('cm-example', cloudmade);

7. Now we use the setCenter function to tell the map where to centre itself and at what zoom level:

map.setCenter(new CM.LatLng(51.514, -0.137), 15);

8. Then we close the script tag:

</script>

8. Finally close the HTML <body> and <html> tags:

  </body>
</html>

That's it, you've just created your first CloudMade map. We're going to run through 8 more examples that show how to do more with our Web Maps Lite API.

Click here to continue to the next example.

JS-docs | View example