|  Login

Adding WMS

   Minimize

Adding a WMS layer to our map is very simple.  We have actually already done this using the OSGeo WMS service as a base map.  But let's assume that we might want more data or data from another source.  In this case we would simply have to add another layer but we would also have to include a new object property for that layer as well as two new wms properties.  For the wms properties we will add a Time parameter and a transparent parameter. The new object property we will add as a key/value pair object.  We will specify that the new layer is not a base layer so it can be on the map at the same time as layer that is a base layer.  By default all layers are base layers so we didn't have to specify that in the first layer.  Next we will give it an opacity so we can see the base layer through it.  Let's look at the code that we will use.

var nexrad = new OpenLayers.Layer.WMS("Nexrad",
       "http://mesonet.agron.iastate.edu/cgi-bin/wms/nexrad/n0r-t.cgi?",
       {   layers:"nexrad-n0r-wmst",Time: '2011-12-25T09:45:00Z', 
           transparent:true
        }, {isBaseLayer: false, opacity:.5});

Notice that we followed the same patern as the first layer with the addition of the object after the layer name.  You may add this code directly under the mapvase declaration.  Next, since we are going to be adding multiple layers (two) we will change how we add them.  Instead of using addLayer we will use addLayers and pass in an array of layers.  To do that remove the line of code you used to add the mapbase and replace it with the following.

map.addLayers([nexrad, mapbase]);

 We also want to make sure we do the best we can to ensure that the tiles from the different sources actually arrive and do not give us a missing image icon.  To do this we just have to add two lines of code as follows directly under our map variable.

// Avoid pink error tiles
OpenLayers.IMAGE_RELOAD_ATTEMPTS = 5;
OpenLayers.Util.onImageLoadErrorColor = "transparent";

Notice the top line.  This is a comment that helps us to remember what the code is for.  You can make comments in your code by placing // infront of a line.

Let's save this file as webmap2.html making sure we select All Files (*.*) as the save type and view our results.  Your page should look like mine.

If not compare your code.

<html> 
<head> 
<script src="http://openlayers.org/api/OpenLayers.js"></script>
<style type="text/css">
	html { height: 100% }
 	body { height: 100%; margin: 0px; padding: 0px }
	#map_canvas { height: 100% }
</style>
<script>
var map;

// Avoid pink error tiles
OpenLayers.IMAGE_RELOAD_ATTEMPTS = 5;
OpenLayers.Util.onImageLoadErrorColor = "transparent";

  function initialize() {
     map = new OpenLayers.Map("map_canvas");
     var mapbase = new OpenLayers.Layer.WMS('OpenLayers WMS', 
       'http://vmap0.tiles.osgeo.org/wms/vmap0', 
       { layers: 'basic,coastline_01,depthcontour,priroad,secroad,clabel'});

     var nexrad = new OpenLayers.Layer.WMS("Nexrad",
       "http://mesonet.agron.iastate.edu/cgi-bin/wms/nexrad/n0r-t.cgi?",
       {   layers:"nexrad-n0r-wmst",Time: '2011-12-25T09:45:00Z', 
           transparent:true
        }, {isBaseLayer: false, opacity:.5});

     map.addLayers([nexrad, mapbase]);

     map.setCenter(new OpenLayers.LonLat(-86.57, 34.65), 12);  
 }
</script>
</head>
<body onload="initialize()">
<div id="map_canvas"></div>
</body>
</html>



Next we will work on adding a KML layer