0

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 (http://54.244.249.54/geoserver/PalmBeach/wms?service=WMS&version=1.1.0&request=GetMap&layers=Florida2&styles=&bbox=-82.97059340790229,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 (http://developers.cloudmade.com/wiki/21/CloudMade_Tiles), 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.

I'm not certain if its a projection issue (I changed the projection in GeoServer to match the Open Layers projection EPSG:4326) or just my unfamiliarity with OpenLayers, but would appreciate any guidance.

My code is below:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <title>Using CloudMade Tiles with OpenLayers</title>
    <link rel="stylesheet" href="openlayers/theme/default/style.css" type="text/css" />
</head>
<body>  
<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'
        });
        map.addLayer(cloudmade);
    var Florida = new OpenLayers.Layer.WMS(
   "Florida2",
   "http://54.244.249.54/geoserver/PalmBeach/wms", 
   {layers: "Florida2", format:'image/png', transparent: true, TILED: 'true'},
   {opacity: 0.5, isBaseLayer: false, visibility: true});
    map.addLayer(Florida);
        var epsg4326 = new OpenLayers.Projection("EPSG:4326");
        var center = new OpenLayers.LonLat(-80.2767537, 26.6514353).transform(epsg4326, map.getProjectionObject());
        map.setCenter(center, 10);
    </script>
</body>
</html>
  • 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
  • Looks like all the links are dead. Probably best closed... – BradHards Jan 9 '17 at 8:55

Your Answer

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

Browse other questions tagged or ask your own question.