5

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?

6

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

0

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)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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