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 https://github.com/openlayers/ol3/releases. The associated documentation of the Javascript API can be found at http://openlayers.org/en/v3.0.0/apidoc/. A number of example maps created using Openlayers can be found at http://openlayers.org/en/v3.0.0/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 from http://www.openlayers.org/

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">
  <head>
    <link rel="stylesheet" href="http://openlayers.org/en/v3.0.0/css/ol.css" type="text/css">
    <style>
      .map {
        height: 600px;
        width: 80%;
      }
    </style>
    <script src="http://openlayers.org/en/v3.0.0/build/ol.js" type="text/javascript"></script>
    <title>Geog480 OpenLayers Mapping Example<</title>
  </head>
  <body>
    <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: 'http://geog480.cigi.illinois.edu:8080/geoserver/wms',
                    serverType:'geoserver',
                    params:{
                            'LAYERS':"temp_surface", 'TILED':true
                    }  
            })
     });
     map.addLayer(wmsSource);
     wmsSource.setOpacity(.5);
     //Mouse Position
     var mousePositionControl = new ol.control.MousePosition({
         className:'ol-full-screen', 
         coordinateFormat:ol.coordinate.createStringXY(4), 
         projection:"EPSG:4326", 
         className:"custom-mouse-position",
         target:'mouseval', 
         undefinedHTML: '&nbsp;' 
     });
     map.addControl(mousePositionControl);

    </script>
  </body>
</html>

Reference


Go back to GEOG 480 Main Page