4 ConceptTop3.3 Requirements Analysis3.4 Technical Analysis of OpenLayers



3.4 Technical Analysis of OpenLayers

At this point the functionality of OpenLayers will be examined in more detail. The purpose of this analysis is to increase the understanding of the application as well as to serve as a premise for the subsequent conceptualization and implementation.

3.4.1 General

OpenLayers is a pure JavaScript API for the creation of web mapping applications; it also offers support for the use of numerous (standardized) formats (OGC WMS, OGC WFS, GeoRSS, ka-Map, WorldWind and many more) which are integrated as layers into OpenLayers.

In addition, OpenLayers features panning and zooming of maps, client-side tiling, markers, »popup windows«, various adjustable navigation components, keyboard commands, a robust event handling mechanism and more. Each part of OpenLayers is configurable [OpenLayers d].

A Python/Shell-based script enables the automatic creation of a lite version of OpenLayers, whereby selected classes can be integrated into one single JavaScript file [OpenLayers a]. This is a result of a discussion that took place in September 2006 at the FOSS4G Conference, where such a solution called webmap.js was requested [OSGeo 2006a][OSGeo 2006b].

The target group for OpenLayers includes all users or developers who wish to display a map on the Internet, or build a map-based Internet application [OpenLayers d].


The February 2005 release of Google Maps drew a lot of attention. As a result of numerous reverse engineerings of Google Maps codes (by Phil Lindsay, among others25) Google responded with its first Google Maps API26 in June 2005. However, the possibility for commercial implementation did not exist [Ramsey 2006][OpenLayers f].

Recognizing this deficiency, the US company MetaCarta, in cooperation with Phil Lindsay, developed a first prototype of the eventual OpenLayers which was presented in late June 2005 at the Where 2.0 Conference in San Francisco27. One year later, shortly after the June 2006 Where 2.0 in San Jose, the team headed by developers Schuyler Erle, Chrisopher Schmidt and Erik Uzureau released the first official version (1.0) of OpenLayers on July 5, 2006. Not long after, in August 2006, Version 2.0 of the project was released[OpenLayers d][OpenLayers f].

At present OpenLayers is undergoing the incubation process at the independent Open Source Geospatial Foundation (OSGeo), with the goal of being accepted as a software project by the summer of 2007. Parallel to this process, serious efforts are being made to integrate key functions of OpenLayers into other Free web mapping applications [OpenLayers d] - with ongoing discussions at ka-Map28,29, Mapbuilder30 and Mapbender31.

3.4.2 Class Overview

Because of its object-oriented programming, the API of OpenLayers is divided into a multitude of classes, of which the main ones are briefly described below. The remaining classes are not discussed in any further detail, as they are not a requirement for a basic understanding of API. More detailed information can be found in the JSDoc documentation32. A complete classification diagram of OpenLayers (Version 2.4 RC5; as of May 25, 2007) can be found in Appendix 6.3.

is the main class of the OpenLayers API. It compiles the application's main map and provides numerous methods for the administration of the map display, including the display of layers and operating components, zooming and panning. In addition, this class allows for queries of current map status through numerous 'get' methods.
Layers represent the most significant component of OpenLayers. All map displays are based on the Layer class. Layer.js produces individual layers, sets the transparency and resolution of each, and provides the basic 'get' methods.
OpenLayers.Layer serves as the primary class for a number of special subclasses. Version 2.4 RC5 of OpenLayers supports the following layer types: Free tile-based layers (WMS, MapServer, KaMap, TMS, WorldWind), Free untiled layers (WMSUntiled, MapServerUntiled), proprietary third-party layers (Google, VirtualEarth, Yahoo, MultiMap) as well as the layers Image (for displaying raster graphics) and Canvas (for drawing of colored lines, only Overlay display is possible).

Below four layer classes are described in more detail:

Derived from the HTTPRequest class, Grid serves as one of the important primary classes for the above-mentioned Free tile-based layers. Grid.js divides the layers into tiles, holds them in an array, and loads them as a spiral-like sequence beginning from the middle.

As a subclass of Grid, WMS receives the URL of the WMS servers and is responsible for generating the individual tile WMS URL's based on the desired tile boundaries (bounds).

The Untiled class displays the complete map section in a WMS tile URL. Note that many WMS servers will have a pre-defined maximum tile size of 2048 pixels; if OpenLayers requests a larger map section, the WMS server will send an error message and the map view will remain empty.

Derived from Layer, the Image class permits the display of individual bitmap graphics as map layers. Besides a URL, the pixel size as well as the geographic dimension of the requested picture are also required.

Operating elements in OpenLayers are elements related to map navigation as well the display of map information (e.g. scale). The Control class serves as a base class for all operating elements, among them:

generates pan/zoom navigation with a panning pad (4 arrow buttons), as well as a ZoomIn, ZoomOut, and ZoomReset button. The slideFactor parameter defines the number of pixels used during the panning processes.

generates a pan/zoom bar with a pan navigation panel as well as a zoombar with a zoom slider containing a ZoomIn and ZoomOut button at each end. (see Section 2.3.4).
The zoom bar is integral to the development of animated zooming features. For this reason its functionality is described in more detail.
There are three ways to use the zoom bar:

  1. Click on the + or - button located at each end of the zoom bar.
    This results in an increase/decrease of the map view by one zoom level.
  2. Click anywhere on the zoom bar.
    The slider moves to the nearest predefined zoom level. The map is redrawn to the corresponding zoom level.
  3. Use Drag&Drop to move zoom slider smoothly over the zoom bar.
    Upon releasing the left mouse key, the slider positions itself on the next available zoom level, and the selected map view is redrawn to the corresponding zoom level.

generates a small overview map (see Section 2.3.4). This map shows the current view of the main map and serves as a positioning and navigational tool. The overview map is usually located in the lower right hand side of the map and can be minimized by pressing a button on the map edge. This class provides the functions needed for querying and setting of the selection rectangle, which can be moved by way of defined mouse events.

defines type and activities of (keyboard) key commands.

defines map activity during mouse events. This includes click, double-click, mouse wheel and mouse movement events.

When a map is tiled, each tile is defined by a Tile object. To generate a tile, the corresponding layer, pixel position, geographic tile dimensions, the URL and pixel size of the tile are required. The standard tile size is 256 pixels. An option available during map initialization allows for a change of the standard size.

Derived from the Tile class, the Tile.Image object presents the proper tile graphic and creates an img-Div-HTML element for each tile during the drawing of the map.

takes over the event handling from OpenLayers.
displays monitor coordinates in n x- and y- pixel values.
displays a pixel size value pair in width and height.
displays geographic coordinates in longitude and latitude.
displays a rectangular area (bounding box) whose four sides (left, below, right, above) are indicated with geographic coordinates in float format. The Bounds class provides different get-functions (e.g. center and pixel dimensions of the bounding box) as well as comparative functions (e.g. whether a pixel is located within the defined bounding box).
contains the different functions and settings which cannot be assigned to any of the otherOpenLayers classes.

3.4.3 Unit Tests

OpenLayers uses the Test.AnotherWay33 framework for unit tests. Version 2.4 RC5 of OpenLayers (as of May 25, 2007) supplies almost 1500 unit tests, which are controlled over a central web interface34. The framework offers the ability to test HTML and JavaScript source codes, and also provides the test results.

Each HTML test page contains one or more JavaScript test functions which start with test_; they must also define a test object t as the transfer parameter [Test.AnotherWay][OpenLayers g].

Listing: A sample of a simple test page with the a function

    <script src = "../lib/OpenLayers.js"></script>
    <script type = "text/javascript">  
        function test_Map_Zoom(t) 
            var map = new OpenLayers.Map("map");
            var layer = new OpenLayers.Layer.WMS("ABC", 
            t.eq(map.zoom, 0, "Map zoomed to level 0 correctly.");
    <div id="map" style="width: 512px; height: 512px;"/>

Listing 3.4.3 shows a sample test page which can be used for a simple testing of an OpenLayers function. On line 6 the test function defines the number of planned tests (here: one), with the expectation that they will be completed correctly. If the number does not match the number of actual tests, the test function is not successful. Lines 7 to 12 produce a map with a WMS layer, at zoom level 0. Line 13 tests the assertion that the map is actually at zoom level 0.

The testing framework provides five methods for the testing of self-defined assertions:

Examples and additional information on the functionality of the framework can be found in the [Test.AnotherWay] documentation.

© June 1, 2007 | Emanuel Schütze | some rights reserved.
This work is licensed under the Creative Commons License Attribution-ShareAlike 2.0 Germany.

4 ConceptTop3.3 Requirements Analysis3.4 Technical Analysis of OpenLayersContentsGerman