To set up and subscribe to some user-driven events, follow these steps:

We've used the CSS framework Bootstrap to style the sidebar content. Some of the HTML has been omitted for brevity, so please view the book source code for the complete implementation.

Referring to the following code section, note that after we instantiate the map, we immediately chain the on method. The map instantiation returns the map instance (of ol.Map), which enables us to carry on without storing a reference to the map in another variable.

.on(['click', 'moveend'], function(event) {
  if (event.type === 'click') {
    coords.innerHTML = event.coordinate.join(',<br>');

    var pixelsAtCoords =
      event.map.getPixelFromCoordinate(event.coordinate);
    pixels.innerHTML = [
      pixelsAtCoords[0].toFixed(0),
      pixelsAtCoords[1].toFixed(0)
    ].join(', ');

We have supplied an array of events as the first parameter to the on method, namely the click and moveend events. Due to this combined event handler, we must differentiate between the event types when the handler is called, which is why we conditionally check the event.type property before performing the relevant logic.

The event object contains the coordinates of where the map was clicked or touched within event.coordinate. This is an array of x and y coordinates that we convert into a string, which is separated by a comma and an HTML break tag using the helpful JavaScript join method. This formats the coordinates as desired, which are then added to the DOM via the JavaScript innerHTML method.

As well as the geometry coordinates, we also want the pixel coordinates of the event. The event object stores a reference to the map (event.map), for which the map object has a method that'll return the pixel coordinates from the geometry coordinates, which is called getPixelFromCoordinate. This method expects an array of type ol.Coordinates, so we pass in the event coordinates (event.coordinate) and store the ol.Pixel type array into a variable, namely pixelsAtCoords.

We finish by updating the DOM element that displays the pixel coordinates. To save manual string concatenation, we have built up a temporary array containing the pixel coordinates without any decimal places (using the toFixed JavaScript method). We also fused together the array items with a comma and space delimiter using the JavaScript join method once again.

} else {
    extent.innerHTML = event.map.getView().calculateExtent(
      event.map.getSize()
    ).join(',<br>');
  }

Within the same handler, if it's not a click event, then it must be a moveend event. This event is published when the user has finished panning the map. In order to retrieve the new extent of the visible map, we grab a reference for the view (event.map.getView) and utilize the calculateExtent view method. This method expects the size, in pixels, of the area of interest. For us, this is the whole map in sight, which is retained from the map method, getSize.

The returned extent array is converted into a string, delimited by a comma and HTML break element, and added to the applicable DOM element for display.

There are plenty more map events that are up for grabs, such as the self-explanatory events pointerdrag and pointermove. To capture double-clicks or taps, you can use dblclick, and there are also events for when the map's view is changed (change:view) and when the map's size changes (change:size). This is useful for responsive design techniques.

I recommend that you take a look at the OpenLayers documentation in your own time to familiarize yourself with what's on offer.