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 The associated documentation of the Javascript API can be foound at A number of example maps created using Openlayers can be found at

Visualizing data using Openlayers

In this tutorial we will see how to visualize data using OpenLayers. The resulting map can be found at 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 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:

Openlayers latest stable release available at

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="">
        <!--COMMENTS: Page Title-->
        <title>Temperature Data Vizualization</title>
        <!--COMMENTS: Location of Openlayer library: No Need to Change-->
        <script src=""></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",
                    "", {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 -->
                //<!--COMMENTS: Also notice the layer name is same as the layer name in geoserver-->
                out_wms = new OpenLayers.Layer.WMS(
                "Temperature Data",
                   styles: '',
                   srs: 'EPSG:4326',
                   format: 'image/png',
                   tiled: 'true',
                   transparent: true
                    'opacity': 0.7, 'isBaseLayer': false,  'wrapDateLine': false

               //<!--COMMENTS: Setting some map options -->

               //<!--COMMENTS: Add all the layers to the map -->

                //<!--COMMENTS: adding the control that allows you to switch between layers-->
                map.addControl(new OpenLayers.Control.LayerSwitcher());

                //<!--COMMENTS: Zooming map to a particular region-->


    <!--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>

        <!--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>