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

While I have some familiarity with GIS, this is my first attempt using OpenLayers.

I am trying to display the following layers in Openlayers: 1) Cloudmade Base Map 2)WMS Data overlay from my Geoserver (,24.320616400434016,-80.1393763936513,26.907996410185536&width=512&height=467&srs=EPSG:4326&format=application/openlayers)

I have used the Cloudmade sample as a starting point (, and have successfully changed the parameters to center and zoom the map, but I cannot get the WMS to display as a layer, despite it being listed as a layer in the layer selector.

Im not certain if its a projection issue (I changed the projection in Geoserver to match the Open Layers projection EPSG:4326) or just my infamiliarity with Openlayers, but would appreciate any guidance.

My code is below:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"  "">
<html xmlns="" xml:lang="en">
    <title>Using CloudMade Tiles with OpenLayers</title>
    <link rel="stylesheet" href="openlayers/theme/default/style.css" type="text/css" />
<div id="map" style="width: 1000px; height: 600px;"></div>

<script type="text/javascript" src="openlayers/OpenLayers.js"></script>
<script type="text/javascript" src="cloudmade.js"></script>

<script type="text/javascript">
        var map = new OpenLayers.Map("map", {
          controls: [
             new OpenLayers.Control.Navigation(),
             new OpenLayers.Control.PanZoomBar(),
             new OpenLayers.Control.ScaleLine(),
             new OpenLayers.Control.Attribution(),
             new OpenLayers.Control.LayerSwitcher()

        var cloudmade = new OpenLayers.Layer.CloudMade("CloudMade", {
            key: 'aa792104b729498b881fa95fb3ea5227'

    var Florida = new OpenLayers.Layer.WMS(
   {layers: "Florida2", format:'image/png', transparent: true, TILED: 'true'},
   {opacity: 0.5, isBaseLayer: false, visibility: true});

        var epsg4326 = new OpenLayers.Projection("EPSG:4326");
        var center = new OpenLayers.LonLat(-80.2767537, 26.6514353).transform(epsg4326, map.getProjectionObject());
        map.setCenter(center, 10);

Thank you for any insight and suggestions!

share|improve this question
Can you share a link to your page? What actually happens? Do you get any errors in the console when the script is run? – Michal Zimmermann Apr 12 '13 at 17:11
Do you wish to show your data on top of cloudmade's data, or is that just from the sample? – Devdatta Tengshe Apr 12 '13 at 17:45
Thanks for the replies, Im working on it locally, so I really dont have anything to share, but the OSM data is displayed properly, its just the WMS data is missing. I am looking to use the OSM as a basemap. I dont really get any errors, just the WMS just fails to appear, even as its listed in the layer selector. – user17104 Apr 12 '13 at 19:07
What have you done to try to debug this? What do you see in firebug or whatever other tools you have? Do you have access to the server logs? Can you see transactions on the wire (e.g. using wireshark)? What does that show? – BradHards Apr 14 '13 at 21:12

Your Answer


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

Browse other questions tagged or ask your own question.