Geographic Information Systems Stack Exchange is a question and answer site for cartographers, geographers and GIS professionals. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

I have a small web mapping application based on PostGIS/GeoServer/OpenLayers.

I'm overlaying few WMS layers served by GeoServer and using OpenStreetMap as a background.

In OpenLayers OSM is simply called as:

var osm = new OpenLayers.Layer.OSM("OSM");  

How could I display OSM basemap in shades of grey to accentuate my WMS layers?

Is there a way to use existing styles from CloudMade's Style Editor for that purpose?

share|improve this question

With the help of API

<script src="" 
<script src="" 
<script src=""

  map.getMap().addLayer(new OpenLayers.Layer.CloudMade('CloudMade', {
  styleId: '26167'


share|improve this answer
Thanks, will give it a go. – radek Jun 7 '11 at 10:56
up vote 0 down vote accepted

Leaflet library might be another option.

var map = new L.Map('map');

var cloudmadeUrl = 'http://{s}{z}/{x}/{y}.png',
cloudmadeAttribution = 'Map data &copy; 2011 OpenStreetMap contributors, Imagery &copy; 2011 CloudMade',
cloudmade = new L.TileLayer(cloudmadeUrl, {maxZoom: 18, attribution: cloudmadeAttribution});

map.setView(new L.LatLng(51.5, -0.09), 13).addLayer(cloudmade);


Where '22677' in the URL declaration is a reference for the style created in Style Editor.


share|improve this answer

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.