This article uses examples from the EcoMap Costa Rica project to demonstrate the use of OpenLayers to combine virtual Earth with other map technologies. OpenLayers supports a wide range of map sources, including WFS, Yahoo, WorldWind, Google, TileCache, TMS, and GML.

Of course Virtual Earth has the ability to display a variety of formats on a base map. However OpenLayers adds many more options. For example, our overlay will be a shapefile that is supplied by MapServer as a series of WMS tiles. OpenLayers also allows us to use different base maps as appropriate. For the EcoMap Costa Rica project, Virtual Earth does an excellent job of visualizing Costa Rica and Central America, but does not currently have the detail required for the main area of study which is less than 1km in extent. By using OpenLayers we can easily re-arrange the layers to meet our specific needs.

OpenLayers is an open source Javascript project that can provide the client side of a web map application. OpenLayers handles the map-keeping operations such as zoom, pan, enable/disable layers, pop-up windows, etc. It receives the layer map data from one or many different sources. Even before we started to use different data sources, we found that OpenLayers's AJAX capabilities greatly enhanced the user experience of a MapServer map application.

The maps at EcoMap Costa Rica use data served by Virtual Earth and MapServer, plus KML files. It is also possible to draw directly in a map using Javascript. This feature is used to draw a grid for field data acquisition.

MapServer is an open source environment for 'building spatially-enabled internet applications' - i.e. web sites. It was originally developed by the University of Minnesota, but it is now managed by the Open Source Geospatial Foundation. The MapServer website is at http://mapserver.gis.umn.edu.

MapServer can run on a wide range of different systems. Although the project used it in a FreeBSD / Apache environment, it was successfully install on a Windows XP system in order to use some of the offline data tools. MapServer can be controlled in a variety of ways including: as a CGI script that inserts images into web pages; scripted with PHP/Python/PERL; and as a WMS server. This article uses it as a WMS server.

Installing MapServer is beyond the scope of this article, but I shall show you how to use it as a WMS server. For installation instructions, it is recommended that you read the tutorials on the MapServer website.

Let's start coding! First, download OpenLayers and install it on your web server. The following HTML page assumes that OpenLayers.js is in your local directory, and the other production elements (eg. themes and styles) are in sub-directories. This is slightly non-standard: OpenLayers.js is usually shipped in the build sub-directory.

Here is the HTML. The comments should make it self explanatory:

ERROR [include_code_listing plugin]: File Not Found (/usr/www/users/winwaed/geowebguru/img/2008/openlayers_ve_sample.html)

A working example can be found here. Virtual Earth supplies the aerial base map. The MapServer-supplied data appears as a cyan streams (river) overlay. Note that the streams have been set so that they only appear when zoomed in.

Next we need to configure MapServer. It is assumed that you have a compiled and installed MapServer, and have a working mapserv.cgi. This is configured using a MapScript (.MAP) file. These files are used by MapServer to describe the maps that are produced. They define map properties such as data sources, projection, colors, and visibility.

Our data source is a set of 'Synthetic Stream' data for Costa Rica, available from the Inter American Biodiversity Information Network. This river data is derived from digital elevation (DEM) data, so it indicates the theoretical locations of rivers and creeks. This works well in mountainous and steep areas, but the stream locations tend to be poor in flat plains. You will note that streams are plotted as straight lines across reservoirs and lakes. This data is a standard ESRI shape (SHP) file.

First check that your mapserv.cgi supports WMS. On the command line, type 'mapserv -v' (or './mapserv -v' on a Unix system) to check this. You should see a "SUPPORTS=WMS_SERVER" in the list of supported capabilities. You will need to recompile MapServer if this is not the case.

Here is our MapScript file ('streams.map' in the above example):

ERROR [include_code_listing plugin]: File Not Found (/usr/www/users/winwaed/geowebguru/img/2008/openlayers_ve_streams.map)

That is all that is required. Here are the results:

OpenLayers is easy to use if you are familiar with JavaScript. Version 2.7 added support for Virtual Earth v6.1. MapServer is also easy to use after it has been installed, but building it can be a challenge on some systems. Luckily there are a lot of how-to articles available on the MapServer website.

Useful Websites and Books

MapServer
http://mapserver.gis.umn.edu

MapServer How-To: WMS Server
http://mapserver.gis.umn.edu/docs/howto/wms_server

OpenLayers
http://www.openlayers.org

Inter American Biodiversity Information Network's Digital Elevation (DEM) derived data files
http://geospatial.iabin.net/index.php?option=com_content&task=view&id=13&Itemid=62

Production Examples of OpenLayers, MapServer and Virtual Earth in use together
http://www.ecomapcostarica.com/map/index.shtml
http://www.ecomapcostarica.com/map/index_ve.shtml

Article History

This article is based on one which was previously published at MP2KMag.