To create a measuring tool for distances and areas, use the following instructions:

We've omitted much of the HTML and all the CSS for brevity. For a complete look at how the styling and structure is achieved, please view the source code, where you'll see our use of the Bootstrap CSS framework.

Let's dive into the core of this recipe where we build the measuring control:

var enableMeasuringTool = function() {
  map.removeInteraction(measuringTool);

When this method is called, it's sourced from either a change in the radio input selection or at page load. We want to ensure that the measuring tool (draw interaction) is set up with the correct configuration, so the old copy (if it exists) is removed from the map first.

var geometryType = measurementRadios.filter(':checked').val();
var html = geometryType === 'Polygon' ? '<sup>2</sup>' : '';

Next, we store a reference of the geometry type. The filter jQuery method is used to identify the checked radio input, and the val jQuery method extracts the value.

The html variable is what we append onto the measurement result in the sidebar. If this is of type Polygon, then it's an area measurement and, so, we add 2 to represent squared; otherwise, it's set to an empty string. We've used a ternary operator to conditionally assign a value to a variable, a technique that we used throughout this recipe.

  measuringTool = new ol.interaction.Draw({
    type: geometryType,
    source: vectorLayer.getSource()
  });

As you can see, our custom measuring tool is simply an instance of the draw interaction behind the scenes. The type property is assigned the geometry type, accordingly.

measuringTool.on('drawstart', function(event) {
  vectorLayer.getSource().clear();

We subscribe to the drawstart event that's emitted from the draw interaction. When the user places the first point of their drawing on the map, we clear the vector source of any existing features with the clear method.

  event.feature.on('change', function(event) {

When a feature's geometry changes, it publishes a change event that we can subscribe to on the ol.Feature instance. This means that we can update the sidebar with the latest measurement while the user is still drawing. Potentially, this event can be fired at a high frequency, so you could consider a throttling technique here for performance (refer to https://remysharp.com/2010/07/21/throttling-function-calls for more details).

    var measurement = geometryType === 'Polygon'
      ? event.target.getGeometry().getArea()
      : event.target.getGeometry().getLength();

Within the geometry change event, we use the event target (an instance of ol.Feature) to retrieve the latest geometry. If it's a Polygon drawing interaction, then we want to calculate the area. The ol.geom.Polygon class has the getArea method for this. Alternatively, ol.geom.LineString has the getLength method to provide the distance. The result is stored in the measurement variable.

      var measurementFormatted = measurement > 100
        ? (measurement / 1000).toFixed(2) + 'km'
        : measurement.toFixed(2) + 'm';

As a default, the measurement is provided in meters by OpenLayers. In the case where the measurement exceeds 100 meters, we convert it to kilometers, as this is probably more useful. There are 1000 meters in a kilometer, so for example, if we have 200 meters, 200 divided by 1000 = 0.2 kilometers. We also round the value to two decimal places with the toFixed JavaScript method. The units of measurement is concatenated on to the end of the number.

      resultElement.html(measurementFormatted + html);
    });
  });
  map.addInteraction(measuringTool);

Finally, the sidebar element which displays the measurement is populated with the formatted version and concatenated with the contents of the html variable (which could contain a 2 for area or a blank string for distance) via the jQuery html method. The last part of this function adds the completed interaction to the map.

The calculations for the measurements are represented in a simple projected plane without the Earth's curvature taken into account. A more involved geodesic calculation can be achieved through OpenLayers, but this is a bit more advanced and won't be covered in this recipe.

This official example from OpenLayers demonstrates how to provide measurements in geodesic metrics at http://openlayers.org/en/v3.13.1/examples/measure.html. Microsoft also has an interesting article on the topic at https://msdn.microsoft.com/en-GB/library/aa940990.aspx.