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 on GitHub at The associated documentation of the Javascript API can be found 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 from

Below is the code of the temp.html with comments, so that you can understand how to visualize map layers using openlayers.

Example Code

<!doctype html>
<html lang="en">
    <link rel="stylesheet" href="" type="text/css">
      .map {
        height: 600px;
        width: 80%;
    <script src="" type="text/javascript"></script>
    <title>Geog480 OpenLayers Mapping Example<</title>
    <h2>Geog480 OpenLayers Mapping Example<</h2>
    <div id="map" class="map"></div>
    <div id="mouseval"></div>
    <div id="info"></div>
    <script type="text/javascript">
      var view = new ol.View({
                 center: ol.proj.transform([-88.26, 40.10], 'EPSG:4326', 'EPSG:3857'),
                 zoom: 4
      var map = new ol.Map({
        target: 'map',
        layers: [
          new ol.layer.Tile({
            //source: new ol.source.MapQuest({layer: 'sat'}) 
            source: new ol.source.OSM()
        view: view,
        controls: ol.control.defaults().extend([
          new ol.control.ScaleLine()
     var wmsSource = new ol.layer.Tile({
            source: new ol.source.TileWMS({
                    preload: Infinity,
                    url: '',
                            'LAYERS':"temp_surface", 'TILED':true
     //Mouse Position
     var mousePositionControl = new ol.control.MousePosition({
         undefinedHTML: '&nbsp;' 



Go back to GEOG 480 Main Page