GEOG323-2 Exercise - Web-Based Mapping Using Open Layers

GEOG323-2 Exercise - Web-Based Mapping Using Open Layers

Synopsis: Students will explore scripting to build an Open Layers-based web map.

Possible Course: 323

Learning Outcomes: (1) Students will explore what Javascript-based Open Layers toolbox and build a simple web-based map of the UVic campus

OpenLayers is an open source (provided under a modified BSD license) JavaScript library for displaying map data in web browsers.

OpenLayers makes it easy to put a dynamic map in any web page. It can display map tiles and markers loaded from any source. MetaCarta developed the initial version of OpenLayers and gave it to the public to further the use of geographic information of all kinds. OpenLayers is completely free, Open Source JavaScript, released under a BSD-style License.

OpenLayers implements industry-standard methods for geographic data access, such as the OpenGIS Consortium's Web Mapping Service (WMS) and Web Feature Service (WFS) protocols. Under the hood, OpenLayers is written in object-oriented JavaScript, using components from Prototype.js and the Rico library. The OpenLayers code base already has hundreds of unit tests, via the Test.AnotherWay framework.

Suggested Readings & Links

Suggested Instructions

  1. Study the Open Layers geoservices diagram below. Note that Open Layers is only a way of calling data from a map server and displaying it in a web browser. Open Layers does not store data. It works on the client side, asking for data from the server.

    This image is from:
  2. Copy the code in the text area below into Notepad or a text/html editor that you like to use.
  3. Save the file to a local directory on your computer, with .html as the file extension. For example, you might save the file as my_webmap.html.
  4. Open the file in a web browser like Firefox, Safari or Explorer.
  5. Try changing the script to remove layers.

Example Result