Contributor(s): Tom Benner
OpenLayers is an open source JavaScript library most often used for creating interactive maps.
The two best introductions to OpenLayers are the OpenLayers Documentation and the source code of the OpenLayers Examples. The former presents a formal overview of the library, but the latter is probably more helpful in showing common tasks that are available and how they are written.
Firebug is extremely useful in OpenLayers development, as it allows you to use a command like "console.dir(map)" to give a readout of the entire OpenLayers.Map object (which includes the properties of the map's layers, controls, etc). It also logs Ajax requests, including those made with WFS requests.
Live HTTP Headers can be used to view the details all HTTP requests, including WMS requests.
When requesting geospatial data to be displayed, you will most often display it either as a vector layer (with data retrieved via a WFS request) or as a grid-based layer (via WMS). For the specs on these two request methods see: WMS and WFS.
Vector layers render each feature as an element (using SVG, VML, or Canvas) in the web page DOM. This allows for mouse interaction with the feature (e.g. hovering over a feature to highlight it, clicking on a feature to get info on it). However, if there are a great number of geometries, or if the geometries include lots of polygons with many vertices, rendering and interacting with the features will cause a major performance hit. Performance in this regard differs between browsers, and of course also depends on the specs of the computer.
Grid-based layers provide an alternative to this performance issue. Instead of rendering features individually in the browser, they ask the map server to send a grid of images on which the features are rendered, and then arrange those images into a grid on the map. There is no way for the client to tell where the features are located in these images, so mouse interaction isn't possible. Some useful methods related to the resulting issues of interactivity are:
A decision to use Google Maps API images for the base layer is a major commitment for a large project, as it requires that the map be in the EPSG:900193 projection (spherical mercator, using meters instead of degrees) instead of OpenLayers' native EPSG:4326 projection. As a result, all handling of projection-dependent elements, like bounds, points, etc, must be in this projection, and requests to map servers must specify this projection and use meters instead of degrees. You may need to use the .transform() method, which is available for most relevant objects, to switch them from one projection to another projection. For example:
map.calculateBounds().transform(new OpenLayers.Projection("EPSG:900913"), new OpenLayers.Projection("EPSG:4326"))
Other details about using this projection are given here.
Styling vector layers is most often done with the StyleMap class. For details, click here.
Styling grid-based layers is generally done by sending a SLD parameter, with its value being the URL of an SLD file, as part of the request to the map server. SLD is an XML schema for styling geospatial data. It includes methods like rules and filters that allow styling to depend on any properties of a feature, methods for displaying features labels, and a great deal more. The official schema can be found here, but vendors often provide additional methods which can be crucial. GeoServer, for example, has an introduction to using SLD with it, as well as a very useful cookbook of common types of map styling here.
CQL filters are the simplest way to constrain the results of WFS and WMS requests. To get all features where the "object_type" field equals "43", for example, you would add "&CQL_FILTER=object_type=43" to the request string. Boolean operators can be used, as can spatial filtering. Examples can be seen here.