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>