In the first step, we added our boilerplate HTML code for a simple OpenLayers application. This includes standard HTML tags suitable for any web page, and also includes the OpenLayers CSS and JavaScript files.

Next, we started creating instances of various OpenLayers components to use with our map. The first one was a layer that renders tiles from the OpenStreetMap tile servers. Next, we created an interaction called DragRotateAndZoom. This interaction has no visible element, but rather is triggered by holding down the Shift key while dragging the map. As the name suggests, this interaction will rotate and zoom the map in response to dragging the mouse cursor. Then we created a control called FullScreen. Again, the name gives away what it does—launches the web page into fullscreen mode. Because it is a control, it has a button that is clicked to activate its behavior. Next, we created an overlay, which displays an HTML element at a specific geographic location. Finally, we created the view, giving it the same center as the position we provided to the overlay.

The last step is to tie it all together with the Map class object by passing all our components as part of the constructor. We'll look at the Map class's constructor in more detail in Chapter 3, Charting the Map Class but for now, it's enough to know that we can provide arrays of layers, interactions, controls, and overlays as options, and the Map class will know what to do with them.

We saw that by providing our own set of interactions and controls; we changed the default behavior of an OpenLayers application. This is because the Map class has a default set of interactions and controls that it creates when they are not explicitly provided as options to the constructor. There are two ways we can restore the default behavior and add our new components as well.

The first way is to use helper functions provided by OpenLayers to obtain the collection of default interactions and default controls and extend those with our new components. We will do something like this (this example is not complete as the Map class is missing a view):

// create our interaction
var interaction = new ol.interaction.DragRotateAndZoom();
// get the default interactions and add our new one
var interactions = ol.interaction.defaults().extend([interaction]);

// create our control
var control = new ol.control.FullScreen();
// get the default controls and add our new one
var controls = ol.control.defaults().extend([control]);

// create the map and pass in the extended set of interactions and controls
var map = new ol.Map({
  interactions: interactions,
  controls: controls
});

The second method is to add them to the map after calling the constructor, for instance, (again, this example is not complete):

var interaction = new ol.interaction.DragRotateAndZoom();
var control = new ol.control.FullScreen();
var map = new ol.Map();
map.addInteraction(interaction);
map.addControl(control);

The advantage of the first method (passing constructor options) is that it gives you complete control over which interactions and controls are in use, while the second method (adding them after creating the map) has the advantage of being simpler if you want to add to the existing set of interactions and controls.

In many parts of OpenLayers, you will discover that there are multiple ways of accomplishing a given task. This is part of the design of the OpenLayers library and provides developers with the option to write code in a way that makes most sense for them.