Why is this WMS layer not showing up in openlayers?

StackOverflow https://stackoverflow.com/questions/14206412

  •  14-01-2022
  •  | 
  •  

Question

I am trying to show a WMS layer from a published ArcGIS Map Service and all I am getting is pink tiles. Can anyone help correct me on what is wrong with my code? When I pan over to the US, all I am getting are "broken image pink tiles"... There is no WMS layer that appears whatsoever.

<html>
<head>
    <title>Karta</title>
    <link rel="stylesheet" href="openlayers/theme/default/style.css" type="text/css">
<script src="http://openlayers.org/api/OpenLayers.js"></script>
<script  type="text/javascript">
    function inicializacija(){
        var options = {
            projection: new OpenLayers.Projection("EPSG:4326"),
            units: "m",
            numZoomLevels: 18,
            maxResolution: 156543.0339,
            maxExtent: new OpenLayers.Bounds(-20037508.34,-20037508.34,20037508.34,20037508.34)
            };
         var map = new OpenLayers.Map("map-id", options);
         //var osm = new OpenLayers.Layer.OSM("Open Street Map");
         //var wms = new OpenLayers.Layer.MapServer( "World Map", "http://localhost/cgi-bin/mapserv.exe", {layers: 'countries',map: '/ms4w/Apache/htdocs/MapFile06_wms.map', srs: 'EPSG:4326'} );

        //map.addLayers([osm,wms]);

        layer = new OpenLayers.Layer.WMS( "OpenLayers WMS",
            "http://sampleserver1.arcgisonline.com/ArcGIS/services/Specialty/ESRI_StatesCitiesRivers_USA/MapServer/WMSServer?request=GetCapabilities&service=WMS", {layers: "States"} );
        map.addLayer(layer);

        map.addControl(new OpenLayers.Control.LayerSwitcher());
        map.addControl(new OpenLayers.Control.MousePosition());


        map.zoomToExtent(new OpenLayers.Bounds(1490000, 5600000,1850000, 5900000));
    }
</script>
    <style>
        #map-id {
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body onload= 'inicializacija()'>
    <h1>Primer prekrivanja slojev in izbire podlag</h1>
    <div id="map-id"></div>
</body>
</html>
Was it helpful?

Solution

The images show up red because the request didn't result in a valid map image.

This is how you debug such a problem:

  • Open the page in FireFox or Chrome.
  • Then save one of the red images to disk.
  • Open the saved file in a text editor.

Now, it looks like you are not requesting images, but you are requesting the capabilities of the server.

You've probably pasted the server URL into your code, but you've pasted the URL that requests what the server can do, and what it supports.

So, just remove this part from the URL: request=GetCapabilities

So that it becomes: http://sampleserver1.arcgisonline.com/ArcGIS/services/Specialty/ESRI_StatesCitiesRivers_USA/MapServer/WMSServer?service=WMS

Save the HTML, and refresh.

Ok, we're now actually requesting images, but you're still not getting anything.

So, do the same. Save one of the red images, and see what's inside.

This time there's an error message inside:

<?xml version="1.0" encoding="UTF-8" standalone="no" ?>
<!DOCTYPE ServiceExceptionReport SYSTEM "http://schemas.opengis.net/wms/1.1.1/exception_1_1_1.dtd">
<ServiceExceptionReport version="1.1.1">
  <ServiceException code="LayerNotDefined">
Parameter 'layer(s)' contains unacceptable value: States
  </ServiceException>
</ServiceExceptionReport>

Looks like you're requesting a layer called States, but that layer does not exist.

Just provide a valid layer and you should be done. It looks like there are 2 layers on the server, called "1" and "2". When you set that as the layer, the red images are gone, but they don't seem to contain anything interesting, but that's yet another problem that i cannot help you with, unless I get more information.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top