Watch your back Google – here comes CloudMade Maps

CloudMade map crowdsourcingCrowdsourcing and a flexible and very innovative API, makes CrowdMade a very interesting new player in the map game.

Google, MapQuest, Yahoo and Microsoft has been dominating the online map scene for many years. But now a new and different competitor is entering the map scene.

CloudMade has launched a very interesting online map service, based on the open source map data: OpenStreetMap. In this post we’ll look at the possibilities in the API, and the quality of the map data from OpenStreetMap.

OpenStreetMap

Even though there are many free online map services, the data behind these services are typically commercial, which means that there are restriction to the usage of the maps. OpenStreetMap creates and provides free geographic data such as street maps to anyone who wants them.

The project was started because most maps you think of as free, actually have legal or technical restrictions on their use, holding back people from using them in creative, productive, or unexpected ways.

OpenStreetMap example London

This collaborative data sourcing is both the strength and weakness of OpenStreetMap. In areas with a active community, the map data in OpenStreetMap is fantastic and already by far the best available, and in other areas the data isn’t yet ready for serious usage.

So if you think OpenStreetMap sounds interesting, our advice is to test out the maps in your primary target area to see the current quality. You can search the OpenStreetMap data here

CloudMade

CloudMade is a company who has built a suite of services on top of the OpenStreetMap data, so the data gets easily accessible . Since the OpenStreetMap data is open source CloudMade can offer very attractive services.

  • iPhone SDK for OpenStreetMap powered data
  • Turn-by-turn navigation for for mobile devices (premium service)
  • POI databases
  • Web map API (both free and premium)
  • The possibility to create your own map styles

In this post we’ll look into the possibilities with the  Web map API. Compared to Google, Yahoo and Bing, CloudMade offers a very impressive support of different coding languages for their API:

In this post we’ll tryout the JavaScript API

A basic map

Before you can create your first map, you’ll need to sign up for a account. When the registration is complete, you’ll get a API key that’s specific to your site, and that has to be included in all requests to the service.

The code for a basic map is:

<!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: 700px; height: 500px"></div>

	<script type="text/javascript" src="<a href="view-source:http://tile.cloudmade.com/wml/0.4/web-maps-lite.js">http://tile.cloudmade.com/wml/0.4/web-maps-lite.js</a>"></script>
	<script type="text/javascript">//<![CDATA[
		var cloudmade = new CM.Tiles.CloudMade.Web({key: '23f816aebc4b4b35adcf6e54a2b2b551'});
		var map = new CM.Map('cm-example', cloudmade);
		map.setCenter(new CM.LatLng(51.514, -0.137), 15);

		map.addControl(new CM.LargeMapControl());
		map.addControl(new CM.ScaleControl());
		map.addControl(new CM.OverviewMapControl());
	//]]></script>
</body>
</html>

This code creates a basic map, centered at Central London, with overview map and zoom bar.

See example 1

Change map style

One of my favorite features is, that you can change the look and feel of the map.

In Google, Yahoo, Bing and the other map services, you can build a lot of things around the map, but you can’t change the map itself. At CloudMade you find a web based map editor, where you can customize how your map should look.

CloudMade map style editor

When you have defined and saved a map style, your map style gets a unique id.

When you insert this id together with the API key in your javascript, you’ll get a map with your customized layout:

var cloudmade = new CM.Tiles.CloudMade.Web({key: '23f816aebc4b4b35adcf6e54a2b2b551', styleId:1045});

See example 2

Changing map style is not just for fun, by modifying the map style you can highlight different objects in the map, and thereby create a map that’s optimized for what you’re interested in illustrating. Eg.:

  • highlight POI’s for a local search/tourist map
  • highlight paths for a outdoor activity map
  • highlight main streets for a driving direction map

This feature is absolutely awesome, and one of the very good arguments for considering using CloudMade maps on your website. You can also define a range of predefined map styles, and let the users self select what map style they prefers.

Map pins

The CloudMade API also supports the display of map pins.

<!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="<a href="view-source:http://tile.cloudmade.com/wml/0.4/web-maps-lite.js">http://tile.cloudmade.com/wml/0.4/web-maps-lite.js</a>"></script>
	<script type="text/javascript">//<![CDATA[
		var cloudmade = new CM.Tiles.CloudMade.Web({key: 'BC9A493B41014CAABB98F0471D759707'});
		var map = new CM.Map('cm-example', cloudmade);

		var louvre = new CM.LatLng(48.861,2.336);
		map.setCenter(louvre, 16);

		var marker = new CM.Marker(louvre);
		map.addOverlay(marker);

		marker.openInfoWindow(
			"<img width='200' height='267' src='http://upload.wikimedia.org/wikipedia/commons/thumb/5/54/Louvre.jpg/200px-Louvre.jpg'><br />" +
			"<h3 style='text-align: center'><a href='http://en.wikipedia.org/wiki/Louvre'>The Louvre Museum</a></h3>", {maxWidth: 220});
	//]]></script>
</body>
</html>

This example displays a map of Paris, with a open window displaying information about the Louvre museum

See example 3

Directions

The CloudMade API also supports routing.

<!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: 370px; border: 1px solid #ccc; float: left"></div>
	<div id="panel" style="float: left; padding-left: 10px"></div>

	<script type="text/javascript" src="<a href="view-source:http://tile.cloudmade.com/wml/0.4/web-maps-lite.js">http://tile.cloudmade.com/wml/0.4/web-maps-lite.js</a>"></script>
	<script type="text/javascript">
		var map = new CM.Map('cm-example', new CM.Tiles.CloudMade.Web({key: '23f816aebc4b4b35adcf6e54a2b2b551'}));
		map.setCenter(new CM.LatLng(51.52282, -0.13943), 15);

		var directions = new CM.Directions(map, 'panel', '23f816aebc4b4b35adcf6e54a2b2b551');

		var waypoints = [new CM.LatLng(51.52039, -0.1485), new CM.LatLng(51.5203, -0.131)];
		directions.loadFromWaypoints(waypoints);
	</script>
</body>
</html>

This example makes a map, and route description

See example 4

Geo Rss and KML

Last but not least, the map API also supports displaying data on the map from a KML or GeoRSS file.

<!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: 600px; height: 400px; border: 1px solid #ccc"></div>
	<script type="text/javascript" src="<a href="view-source:http://tile.cloudmade.com/wml/0.4/web-maps-lite.js">http://tile.cloudmade.com/wml/0.4/web-maps-lite.js</a>"></script>
	<script type="text/javascript">
		var map = new CM.Map('cm-example', new CM.Tiles.CloudMade.Web({key: '23f816aebc4b4b35adcf6e54a2b2b551'}));
		var geoxml = new CM.GeoXml('http://earthquake.usgs.gov/eqcenter/catalogs/eqs7day-M2.5.xml');
		CM.Event.addListener(geoxml, 'load', function() {
			map.zoomToBounds(geoxml.getDefaultBounds());
			map.addOverlay(geoxml);
		});
	</script>
</body>
</html>

See example 5

Conclusion

When it comes to hardcore mapping, the CloudMade service is by far the best solution I have seen. It misses some of the bells-and-whistles features like Streetview, Birds eye wire, and Aerial photo, but in many cases these features are nice-to-have and not need-to-have.

The possibility to style the maps is really awesome, and hopefully a feature that the other map provider would follow up on.

Since the map data is coming from OpenStreetMap, there is very big difference in the quality in different localities. You should therefore check out the coverage in the geographical area you’re interested in before before using this solution.

Last but not least, I have sometimes see quite slow loading times, compared to Google and especially Bing maps.

But the overall conclusion is the CloudMade is a very interesting new player on the mapping scene, with some very  innovative new features.

Share and Enjoy

  • Facebook
  • Twitter
  • Delicious
  • LinkedIn
  • StumbleUpon
  • Add to favorites
  • Email
  • RSS
fold-left fold-right
About the author
Jørgen Nicolaisen has been passionately interested in everything online since 1995. His experience is based on working with small hobby projects as well as high volume websites. Jørgen is currently focused on the PHP based programming framework - Codeigniter, and WordPress naturally

7 Replies to Watch your back Google – here comes CloudMade Maps

  1. Nick says:

    Great post – glad you are enjoying CloudMade’s APIs. We have recently added marker clustering to Web Maps API – so you can add large datasets to the map without it becoming overcrowded.

    See an example here: http://developers.cloudmade.com/projects/web-maps-lite/examples/marker-clustering

  2. I’m a big fan of Cloudmade as well, and am excited to explore marker clustering too.

  3. Victoria says:

    Nice to find this post :) Do you use CM API yourself?

  4. jhnidk says:

    Not yet – unfortunately Open Streetmap doesn’t cover my local area so good yet. But I think it looks very promising :-)

  5. Victoria says:

    If this is the only reason, why don’t you map it yourself with close friends?
    It’s a lot of fun besides :) This is how my area looks in OSM: http://maps.cloudmade.com/?lat=50.332039&lng=26.646352&zoom=16&styleId=1&opened_tab=0. Now i can start using it :)

  6. ioustinos says:

    apparently you can change the color of your Google maps
    check this out, fantastic tool

    http://gmaps-samples-v3.googlecode.com/svn/trunk/styledmaps/wizard/index.html

Trackbacks for this post

  1. Style your Google maps with JSON | Tips4PHP

Comments are now closed for this article.