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 data using Openlayers

In this tutorial we will see how to visualize data using OpenLayers. The resulting map can be found at http://geog480.cigi.uiuc.edu/geog480/temp.html. For this example we visualize a layer which is already available on class geoserver and on top of the default background map. The source code for displaying this map can be found on geog480.cigi.uiuc.edu in /var/www/geog480/temp.html

Create your own workspace and copy the example

cd /var/www/geog480
mkdir your_netid
cd your_netid
cp /var/www/geog480/temp.html /var/www/geog480/your_netid/temp.html
      Directory: /var/www/geog480/your_netid
      Web Location: http://geog480.cigi.uiuc.edu/geog480/temp.html

Openlayers latest stable release available at http://www.openlayers.org/api/OpenLayers.js

Below is the code of the temp.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://www.openlayers.org/api/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, layer, 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 "Openlayers WMS"-->
                layer = new OpenLayers.Layer.WMS( "OpenLayers WMS",
                    "http://vmap0.tiles.osgeo.org/wms/vmap0", {layers: 'basic'} );


                //<!--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 geog480.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([layer,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 </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