We've used the Bootstrap CSS framework to handle the styling of this recipe, but much of the HTML and all the CSS have been omitted. Please view the accompanying source code for the complete implementation.

Let's turn our attention towards the newly introduced concepts of this code:

var select = new ol.interaction.Select();
map.addInteraction(select);
var dragbox = new ol.interaction.DragBox();
map.addInteraction(dragbox);

We've created the two interactions that will perform their duties in unison. Both of them are sub-classes of the ol.interaction class. Remember that interactions in OpenLayers don't come with a physical DOM element that's placed over the map.

var reset = function() {
  select.getFeatures().clear();
  selectedCount.innerHTML = 0;
  deleteButton.setAttribute('disabled', 'disabled');
};

When this reset function is called, any features stored within the select interaction (select) are retrieved (getFeatures) and then thrown away via the clear method from the ol.Collection array.

The UI is then updated to put the count of features back to zero and to disable the delete button (as no features are selected). The UI will reflect that the user can select more features again. This function will make more sense when you view it in the context of the code execution flow.

dragbox.on('boxstart', reset);

When the users begin dragging a box over the map, the interaction publishes the boxstart event. We subscribe to this event and ensure that the UI is returned to the reset state by assigning our reset function as the handler.

dragbox.on('boxend', function() {
  var extent = dragbox.getGeometry().getExtent();
  var count = 0;
  vectorLayer.getSource()
  .forEachFeatureIntersectingExtent(extent, function(feature) {
    select.getFeatures().push(feature);
    count++;
  });
  selectedCount.innerHTML = count;

Here's the first half of the boxend event subscription handler. This event is published when the user releases the mouse button. We retrieve the geometry of the last drawn box from the interaction instance and get the extent (dragbox.getGeometry().getExtent()). This is especially useful, as it allows us to construct a query against the vector source.

We're about to see how many features reside within the bounding box of the dragged out rectangle, so we set the count to zero.

The vector source has a method called forEachFeatureIntersectingExtent that (rather in a self-explanatory fashion) queries the source and returns any features that intersect with the extent. There's also a similar method available called forEachFeatureInExtent that behaves slightly differently, in that it returns true if a feature's bounding box is within the extent, rather than whether or not the feature's geometry actually intersects with the extent. You can read more about the differences over at the OpenLayers documentation (http://openlayers.org/).

The forEachFeatureIntersectingExtent method expects the first parameter to be the extent (the extent of our drag box) and the second parameter to be the iterator function that is passed the feature in iteration as its first parameter. We add the feature into the selection array of the select interaction (select.getFeatures().push(feature)). By doing this, the select interaction keeps track of the selected features and also styles them with the appropriate render intent.

As the count variable has been incremented on every run of the loop (count++), we inject the final sum of selected features in the DOM for display.

  if(count > 0) {
    deleteButton.removeAttribute('disabled');
  } else {
    deleteButton.setAttribute('disabled', 'disabled');
  }

The final half of the event handler checks whether count exceeds 0. If this does, this infers a selection of features has been successful, so the delete button is enabled by removing the disabled attribute from the HTML. If the user wants to, they can negate the removal of the features from the vector source.

On the contrary, if the count does not exceed 0, we ensure that the disabled attribute on the button is set (as the user can't delete anything).

deleteButton.addEventListener('click', function() {
  select.getFeatures().forEach(function(feature) {
    vectorLayer.getSource().removeFeature(feature);
  });
  reset();
});

Finally, we subscribe to the click event on the button. When clicked, we fetch the features held within the select control and then loop over each feature in the collection. For each feature, we retrieve the vector source and chain on the removeFeature method, passing in feature during iteration. This instructs the vector source layer to remove feature.

After the looping and removing feature, we update the UI to the reset state to reflect the changes, and are then ready for the next selection to take place.

You may notice that the DragBox interaction is activated as soon as you click on the map. This is probably an undesirable default behavior for most applications. To trigger the activation or deactivation of the interaction from a UI element (for example, a button), you can call the setActive interaction method and pass in true/false (or remove or add the interaction from the map) to toggle the interaction.

Alternatively, you can decide to enable dragging only when a particular key on the keyboard is being pressed in combination with a click gesture. For example, as in the following interaction:

var dragbox = new ol.interaction.DragBox({
  condition: ol.events.condition.shiftKeyOnly
});

The preceding DragBox interaction is only activated when the Shift key is held down in conjunction with a click event.