[GIS] How to apply custom OSM map style in OpenLayers

openlayers-2openstreetmapweb-mapping

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?

Best Answer

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

Related Question