In this article by, Thomas Gratier, Paul Spencer, and Erik Hazzard, authors of the book OpenLayers 3 Beginner’s Guide, we will see the various components of OpenLayers and a short description about them.

(For more resources related to this topic, see here.)

The OpenLayers library provides web developers with components useful for building web mapping applications. Following the principles of object-oriented design, these components are called classes. The relationship between all the classes in the OpenLayers library is part of the deliberate design, or architecture, of the library. There are two types of relationships that we, as developers using the library, need to know about: relationships between classes and inheritance between classes.

• Relationships between classes describe how classes, or more specifically, instances of classes, are related to each other. There are several different conceptual ways that classes can be related, but basically a relationship between two classes implies that one of the class uses the other in some way, and often vice-versa.
• Inheritance between classes shows how behavior of classes, and their relationships are shared with other classes. Inheritance is really just a way of sharing common behavior between several different classes.

We’ll start our discussion of the key components of OpenLayers by focusing on the first of these – the relationship between classes. We’ll start by looking at the Map class – ol.Map.

Its all about the map

Instances of the Map class are at the center of every OpenLayers application. These objects are instances of the ol.Map class and they use instances of other classes to do their job, which is to put an interactive map onto a web page. Almost every other class in the OpenLayers is related to the Map class in some direct or indirect relationship. The following diagram illustrates the direct relationships that we are most interested in:

The preceding diagram shows the most important relationships between the Map class and other classes it uses to do its job. It tells us several important things:

• A map has 0 or 1 view instances and it uses the name view to refer to it. A view may be associated with multiple maps, however.
• A map may have 0 or more instances of layers managed by a Collection class and a layer may be associated with 0 or one Map class. The Map class has a member variable named layers that it uses to refer to this collection.
• A map may have 0 or more instances of overlays managed by a Collection class and an overlay may be associated with 0 or one Map class. The Map class has a member variable named overlays that it uses to refer to this collection.
• A map may have 0 or more instances of controls managed by a class called ol.Collection and controls may be associated with 0 or one Map class. The Map class has a member variable named controls that it uses to refer to this collection.
• A map may have 0 or more instances of interactions managed by a Collection class and an interaction may be associated with 0 or one Map class. The Map class has a member variable named interactions that it uses to refer to this collection.

  Although these are not the only relationships between the Map class and other classes, these are the ones we’ll be working with the most.

• The View class (ol.View) manages information about the current position of the Map class.
  

  If you are familiar with the programming concept of MVC (Model-View-Controller), be aware that the view class is not a View in the MVC sense. It does not provide the presentation layer for the map, rather it acts more like a controller (although there is not an exact parallel because OpenLayers was not designed with MVC in mind).

• The Layer class (ol.layer.Base) is the base class for classes that provide data to the map to be rendered.
• The Overlay class (ol.Overlay) is an interactive visual element like a control, but it is tied to a specific geographic position.
• The Control class (ol.control.Control) is the base class for a group of classes that collectively provide the ability to a user to interact with the Map. Controls have a visible user interface element (such as a button or a form input element) with which the user interacts.
• The Interaction class (ol.interaction.Interaction) is the base class for a group of classes that also allow the user to interact with the map, but differ from controls in which they have no visible user interface element. For example, the DragPan interaction allows the user to click on and drag the map to pan around.

Controlling the Map’s view

The OpenLayers view class, ol.View, represents a simple two-dimensional view of the world. It is responsible for determining where, and to some degree how, the user is looking at the world. It is responsible for managing the following information:

• The geographic center of the map
• The resolution of the map, which is to say how much of the map we can see around the center
• The rotation of the map

Although you can create a map without a view, it won’t display anything until a view is assigned to it. Every map must have a view in order to display any map data at all. However, a view may be shared between multiple instances of the Map class. This effectively synchronizes the center, resolution, and rotation of each of the maps. In this way, you can create two or more maps in different HTML containers on a web page, even showing different information, and have them look at the same world position. Changing the position of any of the maps (for instance, by dragging one) automatically updates the other maps at the same time!

Displaying map content

So, if the view is responsible for managing where the user is looking in the world, which component is responsible for determining what the user sees there? That’s the job of layers and overlays.

A layer provides access to a source of geospatial data. There are two basic kinds of layers, that is, raster and vector layers:

• In computer graphics, the term raster (raster graphics) refers to a digital image. In OpenLayers, a raster layer is one that displays images in your map at specific geographic locations.
• In computer graphics, the term vector (vector graphics) refers to images that are defined in terms of geometric shapes, such as points, lines, and polygons—or mathematic formulae such as Bézier curves. In OpenLayers, a vector layer reads geospatial data from vector data (such as a KML file) and the data can then be drawn onto the map.

Layers are not the only way to display spatial information on the map. The other way is to use an overlay. We can create instances of ol.Overlay and add them to the map at specific locations. The overlay then positions its content (an HTML element) on the map at the specified location. The HTML element can then be used like any other HTML element.

The most common use of overlays is to display spatially relevant information in a pop-up dialog in response to the mouse moving over, or clicking on a geographic feature.

Interacting with the map

As mentioned earlier, the two components that allow users to interact with the map are Interactions and Controls. Let’s look at them in a bit more detail.

Using interactions

Interactions are components that allow the user to interact with the map via some direct input, usually by using the mouse (or a finger with a touch screen). Interactions have no visible user interface. The default set of interactions are:

• ol.interaction.DoubleClickZoom: If you double-click the left mouse button, the map will zoom in by a factor of 2
• ol.interaction.DragPan: If you drag the map, it will pan as you move the mouse
• ol.interaction.PinchRotate: On touch-enabled devices, placing two fingers on the device and rotating them in a circular motion will rotate the map
• ol.interaction.PinchZoom: On touch-enabled devices, placing two fingers on the device and pinching them together or spreading them apart will zoom the map out and in respectively
• ol.interaction.KeyboardPan: You can use the arrow keys to pan the map in the direction of the arrows
• ol.interaction.KeyboardZoom: You can use the + and – keys to zoom in and out
• ol.interaction.MouseWheelZoom: You can use the scroll wheel on a mouse to zoom the map in and out
• ol.interaction.DragZoom: If you hold the Shift key while dragging on map, a rectangular region will be drawn and when you release the mouse button, you will zoom into that area

Controls

Controls are components that allow the user to modify the map state via some visible user interface element, such as a button. In the examples we’ve seen so far, we’ve seen zoom buttons in the top-left corner of the map and an attribution control in the bottom-right corner of the map. In fact, the default controls are:

• ol.control.Zoom: This displays the zoom buttons in the top-left corner.
• ol.control.Rotate: This is a button to reset rotation to 0; by default, this is only displayed when the map’s rotation is not 0.
• Ol.control.Attribution: This displays attribution text for the layers currently visible in the map. By default, the attributions are collapsed to a single icon in the bottom-right corner and clicking the icon will show the attributions.

This concludes our brief overview of the central components of an OpenLayers application. We saw that the Map class is at the center of everything and there are some key components—the view, layers, overlays, interactions, and controls—that it uses to accomplish its job of putting an interactive map onto a web page. At the beginning of this article, we talked about both relationships and inheritance. So far, we’ve only covered the relationships. In the next section, we’ll show the inheritance architecture of the key components and introduce three classes that have been working behind the scenes to make everything work.

OpenLayers’ super classes

In this section, we will look at three classes in the OpenLayers library that we won’t often work directly with, but which provide an enormous amount of functionality to most of the other classes in the library. The first two classes, Observable and Object, are at the base of the inheritance tree for OpenLayers—the so-called super classes that most classes inherit from. The third class, Collection, isn’t actually a super class but is used as the basis for many relationships between classes in OpenLayers—we’ve already seen that the Map class relationships with layers, overlays, interactions, and controls are managed by instances of the Collection class.

Before we jump into the details, take a look at the inheritance diagram for the components we’ve already discussed:

As you can see, the Observable class, ol.Observable, is the base class for every component of OpenLayers that we’ve seen so far. In fact, there are very few classes in the OpenLayers library that do not inherit from the Observable class or one of its subclasses. Similarly, the Object class, ol.Object, is the base class for many classes in the library and itself is a subclass of Observable.

The Observable and Object classes aren’t very glamorous. You can’t see them in action and they don’t do anything very exciting from a user’s perspective. What they do though is provide two common sets of behavior that you can expect to be able to use on almost every object you create or access through the OpenLayers library—Event management and Key-Value Observing (KVO).

Event management with the Observable class

An event is basically what it sounds like—something happening. Events are a fundamental part of how various components of OpenLayers—the map, layers, controls, and pretty much everything else—communicate with each other. It is often important to know when something has happened and to react to it. One type of event that is very useful is a user-generated event, such as a mouse click or touches on a mobile device’s screen. Knowing when the user has clicked and dragged on the Map class allows some code to react to this and move the map to simulate panning it. Other types of events are internal, such as the map being moved or data finishing loading. To continue the previous example, once the map has moved to simulate panning, another event is issued by OpenLayers to say that the map has finished moving so that other parts of OpenLayers can react by updating the user interface with the center coordinates or by loading more data.

Key-Value Observing with the Object class

OpenLayers’ Object class inherits from Observable and implements a software pattern called Key-Value Observing (KVO). With KVO, an object representing some data maintains a list of other objects that wish to observe it. When the data value changes, the observers are notified automatically.

Working with Collections

The last section for this article is about the OpenLayers’ Collection class, ol.Collection. As mentioned, the Collection class is not a super class like Observable and Object, but it is an integral part of the relationship model. Many classes in OpenLayers make use of the Collection class to manage one-to-many relationships.

At its core, the Collection class is a JavaScript array with additional convenience methods. It also inherits directly from the Object class and inherits the functionality of both Observable and Object. This makes the Collection class extremely powerful.

Collection properties

A Collection class, inherited from the Object class, has one observable property, length. When a collection changes (elements are added or removed), it’s length property is updated. This means it also emits an event, change:length, when the length property is changed.

Collection events

A Collection class also inherits the functionality of the Observable class (via Object class) and emits two other events—add and remove. Registered event handler functions of both events will receive a single argument, a CollectionEvent, that has an element property with the element that was added or removed.

Summary

This wraps up our overview of the key concepts in the OpenLayers library. We took a quick look at the key components of the library from two different aspects—relationships and inheritance. With the Map class as the central object of any OpenLayers application, we looked at its main relationships to other classes including views, layers, overlays, interactions, and controls. We briefly introduced each of these classes to give an overview of primary purpose. We then investigated inheritance related to these objects and reviewed the super classes that provide functionality to most classes in the OpenLayers library—the Observable and Object classes. The Observable class provides a basic event mechanism and the Object class adds observable properties with a powerful binding feature. Lastly, we looked at the Collection class. Although this isn’t part of the inheritance structure, it is crucial to know how one-to-many relationships work throughout the library (including the Map class relationships with layers, overlays, interactions, and controls).

Resources for Article:

---

Further resources on this subject:

• OGC for ESRI Professionals [Article]
• Improving proximity filtering with KNN [Article]
• OpenLayers: Overview of Vector Layer [Article]

---