How to apply custom OSM map style in OpenLayers?

Question

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");  
map.addLayer(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?

Answer 1

With the help of http://mapstraction.com/ API

<script src="http://openlayers.org/api/OpenLayers.js" 
  type="text/javascript"></script>
<script src="http://developers.cloudmade.com/attachments/download/58/cloudmade.js" 
  type="text/javascript"></script>
<script src="http://github.com/mapstraction/mxn/raw/master/source/mxn.js?(openlayers)"
  type="text/javascript"></script>



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

source:

http://blog.slashpoundbang.com/post/1479986159/using-cloudmade-tiles-on-openlayers-maps-with

Answer 2

Leaflet library might be another option.

<script>
var map = new L.Map('map');

var cloudmadeUrl = 'http://{s}.tile.cloudmade.com/BC9A493B41014CAABB98F0471D759707/22677/256/{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);

</script>

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

(Source)