OpenLayers Tutorial

OpenLayers makes it straightforward to put a dynamic map from various sources onto any web page. OpenLayers, developed as open source software, is written as a JavaScript library for visualizing map data using most modern web browsers. Its code can be found at http://www.openlayers.org/api/OpenLayers.js. The associated documentation of the Javascript API can be foound at http://trac.openlayers.org/wiki/Documentation. A number of example maps created using Openlayers can be found at http://openlayers.org/dev/examples/

Visualizing Temperature data using Openlayers

In this tutorial we will see how to visualize data using OpenLayers. The resulting map can be found at http://n3.cigi.uiuc.edu:8080/temperature.html. For this map we take the interpolated temperature data from our postgis data store and visualize it as a layer on top of the default background map. The source code for displaying this map can be found on n3.cigi.uiuc.edu in /srv/cigi/httpd/www/ directory.
One directory per group has been created with the code placed there for the purpose of convenience. Please feel free to modify the code in your directories.

Openlayers installed on n3 can be reached at http://n3.cigi.uiuc.edu:8080/OpenLayers-2.7/lib/OpenLayers.js.
Below is the code of the temperature.html with comments, so that you can understand how to visualize map layers using openlayers.

Example Code

<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <!--COMMENTS: Page Title-->
        <title>Temperature Data Vizualization</title>
        <!--COMMENTS: Location of Openlayer library: No Need to Change-->
        <script src="http://n3.cigi.uiuc.edu:8080/OpenLayers-2.7/lib/OpenLayers.js"></script>
        <script type="text/javascript">
       //<!--COMMENTS: AJAX Code: No need to change-->
       function GetXmlHttpObject(){
          var xmlHttp=null;
          try {
             // Firefox, Opera 8.0+, Safari
             xmlHttp=new XMLHttpRequest();
          } catch (e) {
             // Internet Explorer
             try {
                xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
             } catch (e) {
                xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
             }
         }
         return xmlHttp;
       }
   //<!--COMMENTS: Defining Variables -->
   var map, jpl_wms, ol_wms, out_wms;
        // <!-- COMMENTS: avoid pink tiles -->
        OpenLayers.IMAGE_RELOAD_ATTEMPTS = 3;
        OpenLayers.Util.onImageLoadErrorColor = "transparent";
            function init(){
                //<!--COMMENTS: Define some Bounding boxes-->
                var minExtent = new OpenLayers.Bounds(-1, -1, 1, 1);
                var maxExtent = new OpenLayers.Bounds(-150, -60, 150, 60);
                var usBounds = new OpenLayers.Bounds(-135.44, 10.18,-65.08, 50.55);
                var dmsBounds =  new OpenLayers.Bounds(-128.0, 24.052, -65.126, 50.0);
                 //<!--COMMENTS: Instantiating a new map with 10 zoom levels-->
                 map = new OpenLayers.Map('map',
                    {controls: [new OpenLayers.Control.Navigation(),
                             new OpenLayers.Control.PanZoomBar()],
                           numZoomLevels: 10});
                //<!--COMMENTS: Creating a new default map layer. This creates a base layer in the map called "Globe"-->
                ol_wms = new OpenLayers.Layer.WMS( "Globe",
                    "http://labs.metacarta.com/wms/vmap0?", {layers: 'basic'},{ 'wrapDateLine': false} );
                ////<!--COMMENTS: Creating a new base layer with NASA landsat image called "Global Mosaic"-->
                jpl_wms = new OpenLayers.Layer.WMS( "Global Mosaic",
                "http://t1.hypercube.telascience.org/cgi-bin/landsat7",
                {layers: "landsat7"}, {'wrapDateLine': false});
                jpl_wms.setVisibility(false);
                //<!--COMMENTS: Create our overlay layer (not a base layer) using temperature data. -->
                //<!--COMMENTS: As you may notice this layer is created by contacting the geoserver on n3.cigi.uiuc.edu -->
                //<!--COMMENTS: Also notice the layer name is same as the layer name in geoserver-->
                out_wms = new OpenLayers.Layer.WMS(
                "Temperature Data",
                "http://n3.cigi.uiuc.edu:8080/geoserver/wms?",
                {
                   layers:'cigi:gisolveoutstriped',
                   styles: '',
                   srs: 'EPSG:4326',
                   format: 'image/png',
                   tiled: 'true',
                   transparent: true
                },
                {
                    'opacity': 0.7, 'isBaseLayer': false,  'wrapDateLine': false
                }
            );
               //<!--COMMENTS: Setting some map options -->
                map.setOptions({minExtent:dmsBounds});
               //<!--COMMENTS: Add all the layers to the map -->
                map.addLayers([ol_wms, jpl_wms,  out_wms]);
                //<!--COMMENTS: adding the control that allows you to switch between layers-->
                map.addControl(new OpenLayers.Control.LayerSwitcher());
                //<!--COMMENTS: Zooming map to a particular region-->
                map.zoomToExtent(dmsBounds);
            }
        </script>
    </head>
    <!--COMMENTS: Calling the init function when body is loaded -->
    <body onload="init()">
        <!--COMMENTS: Setting the layout in html -->
        <div id="tags">
            <table width="100%"><tr>
            <td width="40%"><div id="image"></div></td>
            <td><h2>Temperature Data Vizualization - Striped</h2></td>
            </tr><table>
        </div>
        <!--COMMENTS: The div tag for the region where the map will be displayed -->
        <div id="map" style="width:1200px; height:400px"></div>
        <div id="data"></div>
    </body>
</html>

Reference