Technical Overview: OpenLayers

OpenLayers is a popular open source JavaScript library for displaying dynamic map data in a web page. The OpenLayers library can work as the client half of an AJAX map application, including modern features such as “slippy” maps. Most if not all of the map data is provided by servers running other software.

OpenLayers supports a wide range of different map sources, making it a popular way to combine a wide range of different data types into one map.

The OpenLayers package, documentation, and examples be found at the official OpenLayers site. OpenLayers was originally created by MetaCarta, but in November 2007 it became a project of the Open Source Geospatial Foundation. It is distributed under a modified BSD license.

As the name suggests, the real strength of OpenLayers is its capability of creating a map from a range of different data layers of differing types. Supported data sources include:

  • Web Map Service (WMS)
  • Web Feature Service (WFS)
  • Web Map Coverage (WMC)
  • OpenStreetMap
  • Virtual Earth
  • Yahoo! Maps
  • MapServer
  • MapGuide Open Source
  • GeoServer
  • ka-Map
  • World Wind Servers
  • GeoRSS
  • KML
  • GML
  • GPX
  • SLD
  • GeoJSON
  • Well Known Text (WKT)
  • Client JavaScript annotation


Documentation mainly takes the form of class descriptions. However, the OpenLayers site has an extensive list of examples that can be cribbed from. These will get you working, give you a good idea of capabilities, and also demonstrate how particular features are used. In common with most if not all popular open source projects, the site hosts an active and helpful user community.

Here is a basic multi-layered example taken from the OpenLayers website:

<html xmlns="">
    <title>OpenLayers Example</title>
    <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
    <link rel="stylesheet" href="style.css" type="text/css" />
    <script src="../OpenLayers.js"></script>
    <script type="text/javascript">
        // making this a global variable so that it is accessible for
        // debugging/inspecting in Firebug
        var map = null;

        function init(){

            map = new OpenLayers.Map('map');

            var ol_wms = new OpenLayers.Layer.WMS(
                "OpenLayers WMS",
                {layers: 'basic'}

            var jpl_wms = new OpenLayers.Layer.WMS(
                "NASA Global Mosaic",
                {layers: "landsat7"}

            var dm_wms = new OpenLayers.Layer.WMS(
                "DM Solutions Demo",
                    layers: "bathymetry,land_fn,park,drain_fn,drainage," +
                    transparent: "true", format: "image/png"},
                    minResolution: 0.17578125,
                    maxResolution: 0.703125

            map.addLayers([ol_wms, jpl_wms, dm_wms]);
            map.addControl(new OpenLayers.Control.LayerSwitcher());
  <body onload="init()">
    <h1 id="title">OpenLayers Example</h1>
    <div id="tags"></div>
    <p id="shortdesc">
        Demonstrate a simple map with an overlay that includes layer switching controls.
    <div id="map" class="smallmap"></div>
    <div id="docs"></div>

This simple example adds three raster (WMS) layers to the OpenLayers map. Two of these are defined as opaque base layers, and the third is a transparent (ie. overlay) layer. The layer-selection control on the finished map allows the user to switch between the two base layers, and to switch the transparent layer on or off. The working example can be found here.

OpenLayers was used for the main map for the EcoMap Costa Rica Project’s 2008 Field Season (Note: URL may change soon). This map uses WMS base layer that is served by MapServer using country outline shapefiles. Additional WMS layers served by MapServer include the ASTER satellite image, and a synthetic-stream (hydrology) layer. All of the field data (paths, icons, and vegetation areas) are created from KML files. These KML files were easily modified in the field as the data was collected. The data grid is created by client JavaScript at run time. Here is a screenshot of the results:

Screenshot of the EcoMap Costa Rica OpenLayers example


An alternative OpenLayers map was also created that used Virtual Earth for the base map. This has since been replaced with a native Virtual Earth map which used tile data created with MapCruncher.

As with any map library, there are strengths and weaknesses. In common with Google Maps and Virtual Earth, the OpenLayers JavaScript library is generally easy to use. The default layer selection control is effective and simple to control. This contrasts with Virtual Earth which currently requires the programmer to create a custom layer control. Strangely, OpenLayers does not come with a scale bar control. Instead an add-in has to be installed. It is likely that this add-in will become a part of OpenLayers at a future date, but it is strange that it is not a standard part of the library. Another quirk is that all the “clickable” objects (icons, shapes, etc) currently have to be in the same layer. This could pose problems for large applications. It was definitely an inconvenience for the EcoMap Costa Rica project, where it would have made sense to separate clickable objects such as buildings/infrastructure, bird sample points, vegetation, springs, and volcanoes into their own layers.

The latest version of OpenLayers is v2.7, but the release of v2.8 is imminent. Users of Virtual Earth will need to use v2.7 (or later) because previous versions only supported withdrawn versions of Virtual Earth. Some features do not currently work in Internet Explorer 8, so IE7 compatibility mode may be required. This is scheduled to be fixed in v2.9.

Overall, OpenLayers is an excellent choice if you wish to build an AJAX map application using your own data servers, or if you need to combine data in a range of different formats or from a range of different sources.

Leave a Reply