Take the 2-minute tour ×
Geographic Information Systems Stack Exchange is a question and answer site for cartographers, geographers and GIS professionals. It's 100% free, no registration required.

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?

share|improve this question

2 Answers 2

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

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.

<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)

share|improve this answer

Your Answer

 
discard

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.