Creating a webmap client using OpenLayers

Introduction

This is an introduction to the use of OpenLayers, a Javascript API. OpenLayers can be used to build versatile WebMapping clients. In this exercise we will give a brief introduction, where you will learn how to:

  1. Use the OpenLayers library in a web page;
  2. Make a simple map using the OpenStreetMap background;
  3. Add some layout and controls to it;

OpenLayers is a pure JavaScript library for displaying map data in most modern web browsers, with no server-side dependencies. OpenLayers implements a JavaScript API (Application Programming Interface) for building rich web-based geographic applications, similar to the Google Maps, with one important difference: OpenLayers is Free Software, developed for and by the Open Source software community based at http://openlayers.org. OpenLayers is written in object-oriented JavaScript. In these exercises, we will only show the basic building blocks, and how to employ them. Those wanting to go further, should check out the development pages and the examples at the OpenLayers website, or find other tutorials or books about using OpenLayers.

The latest version of the OpenLayers script library is always available on the OpenLayers website. You can "install" the API by including a link to the Javascript files in your own HTML webpages and then call the methods and properties of the library using simple JavaScript functions. In these exercises we use our own copy of the library (from the GISEDu server), this way you always use the version of the library that matches this exercise (and thus your own script)...

Using the Openlayers API is done by creating webpages (using HTML) that include Javascript script; this code makes calls to the API methods of the OpenLayers objects, to create the necessary map object and connect that to an HTML placeholder. As a placeholder, we mostly use an HTML <div> element.

The OpenLayers API has two concepts which are important to understand in order to build your first map: Map, and Layer. An OpenLayers Map stores information about the default projection, extents, units, and so on of the map. Inside the map, data is displayed in one on more Layers. A Layer is a link to a data source -- it stores information about how OpenLayers should request data from that source and how to display it. We then use the methods and properties of the API objects to change the content and behaviour of the map. In practice, all this means typing (and/or copying) HTML and JavaScript code.