Style your own OpenStreetMap


Update: Since I posted this, some alternative strategies have emerged for generating custom OSM-based cartography, most notably TileMill from MapBox. The Cloudmade editor is still around however and remains a great tool.

For all its data richness, the default style of OpenStreetMap on the main web site might not be for everyone. Of course, you can create your own tile server – there’s some very good tutorials for that by OpenStreetMap veteran Richard Weait – and work your way to complex mapnik style sheets, but that is not for the faint of heart, really.

The Cloudmade Map Style Editor offers many example styles and styles created by other users to work with

Luckily, there’s a comfortable way for the rest of us to play around with map styling, by virtue of the Cloudmade Style Editor. Although you need a paid license to do anything [..] You only need a free API key to consume a fair amount of map tiles with the style you created in your own web application, so it is a great way to get started with cartography and OpenStreetMap, and also to learn that good cartography is really hard. Creating a map style from scratch takes many hours of careful deliberation and tweaking colors, line thicknesses, labeling and all those fine details that distinguish an OK looking map from a great looking one.

The Style Editor has been around for a while now, but I started to really use it only recently. I am working on creating the best cycle route planner web site for Amsterdam, and for that I need a great looking map. I don’t know if I will end up using Cloudmade’s map services, but I sure appreciate them offering the use of the Style Editor for free to anyone. It allows me to test visualization ideas really quickly, because the

My attempt at a subdued gray toned map style. Click for interactive map.

Map Style Editor can re-render your map after every change you make to your current style. One pixel wider for a road, a slightly darker tone for some land use category – tiny changes can make a huge difference in the overall aesthetic of the resulting map, so the easier you can tweak those details and see the result of your actions, the better. This is what the Cloudmade editor allows you to do like nothing I have seen. Give it a try and share your creations through the Cloudmade style catalog!

About these ads

5 thoughts on “Style your own OpenStreetMap

  1. Hi Martijn,

    Glad you are enjoying the style editor – look forward to seeing your Amsterdam cycle planner.

    The styles that are created using the Style Editor can be used in any web or mobile application, free of charge. There is no need to pay a license to CloudMade to use the styles. CloudMade’s Javascript Web Maps API and our iPhone SDK are both integrated with the Style Editor, so its easy to add the style you create to your application. We also have a set of “Specialist Tools” – HTTP APIs that you can use to add custom maps to platforms that we do not yet support.

    You can find a load of apps that use the Style Editor in our App Gallery: http://cloudmade.com/application-gallery

    Here are some useful links:
    App Gallery: http://cloudmade.com/application-gallery
    Web Maps API: http://developers.cloudmade.com/projects/show/web-maps-studio
    iPhone SDK: http://developers.cloudmade.com/projects/show/iphone-sdk

    • Hi Nick,

      Thanks for setting that straight. I have to say that your web site is not too clear about which services are free to use and which are paid, so that is why I assumed the tile consumption would also be a paid service.

      The definitive answer is in the Specialist Tools FAQ I guess: http://support.cloudmade.com/answers/specialist-tools
      Here you state the request limits for tiles (250,000 per month on a web API key) and some other services.

  2. Surely you mean render on the client??! otherwise, tiles or at least SVG would be custom made and delivered to each client.

  3. Hi all,
    I’m using OpenLayers to show OSM map. I would need to restyle the default OSM maps. What should I do to do this? I mean, how to programmatically create a OSM layer using a different style instead of the default one? Is there something I am missing. What effectilvely, these styles are? Are they a sort of file, like a .css or similar? How to use them? In the page you reported (http://maps.cloudmade.com/?lat=52.371826&lng=4.928055&zoom=11&styleId=26171&opened_tab=0) I noticed there is the possibility to switch between styles on the fly. How could you do that?

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s