Box Selection

This example uses OpenLayers v4.0.1. The latest is v.

#### Box Selection

No countries selected

Using a DragBox interaction to select features.

This example shows how to use a `DragBox` interaction to select features. Selected features are added to the feature overlay of a select interaction (`ol.interaction.Select`) for highlighting.

Use `Ctrl+Drag` (`Command+Drag` on Mac) to draw boxes.

Related API documentation:

- ol.Map
,
- ol.View
,
- ol.events.condition
,
- ol.format.GeoJSON
,
- ol.interaction.DragBox
,
- ol.interaction.Select
,
- ol.layer.Tile
,
- ol.layer.Vector
,
- ol.source.OSM
,
- ol.source.Vector

Copy Edit
Box Selection Using a DragBox interaction to select features. var vectorSource = new ol.source.Vector({ url: 'https://openlayers.org/en/v4.0.1/examples/data/geojson/countries.geojson', format: new ol.format.GeoJSON() }); var map = new ol.Map({ layers: [ new ol.layer.Tile({ source: new ol.source.OSM() }), new ol.layer.Vector({ source: vectorSource }) ], target: 'map', view: new ol.View({ center: [0, 0], zoom: 2 }) }); // a normal select interaction to handle click var select = new ol.interaction.Select(); map.addInteraction(select); var selectedFeatures = select.getFeatures(); // a DragBox interaction used to select features by drawing boxes var dragBox = new ol.interaction.DragBox({ condition: ol.events.condition.platformModifierKeyOnly }); map.addInteraction(dragBox); var infoBox = document.getElementById('info'); dragBox.on('boxend', function() { // features that intersect the box are added to the collection of // selected features, and their names are displayed in the "info" // div var info = []; var extent = dragBox.getGeometry().getExtent(); vectorSource.forEachFeatureIntersectingExtent(extent, function(feature) { selectedFeatures.push(feature); info.push(feature.get('name')); }); if (info.length > 0) { infoBox.innerHTML = info.join(', '); } }); // clear selection when drawing a new box and when clicking on the map dragBox.on('boxstart', function() { selectedFeatures.clear(); infoBox.innerHTML = '&nbsp;'; }); map.on('click', function() { selectedFeatures.clear(); infoBox.innerHTML = '&nbsp;'; }); .ol-dragbox { background-color: rgba(255,255,255,0.4); border-color: rgba(100,150,0,1); } <div id="map" class="map"></div> <div id="info">No countries selected</div>

    <!DOCTYPE html>
    <html>
      <head>
        <title>Box Selection</title>
        <link rel="stylesheet" href="https://openlayers.org/en/v4.0.1/css/ol.css" type="text/css">
        <!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
        <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
        <script src="https://openlayers.org/en/v4.0.1/build/ol.js"></script>
        <style>
          .ol-dragbox {
            background-color: rgba(255,255,255,0.4);
            border-color: rgba(100,150,0,1);
          }
        </style>
      </head>
      <body>
        <div id="map" class="map"></div>
        <div id="info">No countries selected</div>
        <script>
          var vectorSource = new ol.source.Vector({
            url: 'https://openlayers.org/en/v4.0.1/examples/data/geojson/countries.geojson',
            format: new ol.format.GeoJSON()
          });

          var map = new ol.Map({
            layers: [
              new ol.layer.Tile({
                source: new ol.source.OSM()
              }),
              new ol.layer.Vector({
                source: vectorSource
              })
            ],
            target: 'map',
            view: new ol.View({
              center: [0, 0],
              zoom: 2
            })
          });

          // a normal select interaction to handle click
          var select = new ol.interaction.Select();
          map.addInteraction(select);

          var selectedFeatures = select.getFeatures();

          // a DragBox interaction used to select features by drawing boxes
          var dragBox = new ol.interaction.DragBox({
            condition: ol.events.condition.platformModifierKeyOnly
          });

          map.addInteraction(dragBox);

          var infoBox = document.getElementById('info');

          dragBox.on('boxend', function() {
            // features that intersect the box are added to the collection of
            // selected features, and their names are displayed in the "info"
            // div
            var info = [];
            var extent = dragBox.getGeometry().getExtent();
            vectorSource.forEachFeatureIntersectingExtent(extent, function(feature) {
              selectedFeatures.push(feature);
              info.push(feature.get('name'));
            });
            if (info.length > 0) {
              infoBox.innerHTML = info.join(', ');
            }
          });

          // clear selection when drawing a new box and when clicking on the map
          dragBox.on('boxstart', function() {
            selectedFeatures.clear();
            infoBox.innerHTML = '&nbsp;';
          });
          map.on('click', function() {
            selectedFeatures.clear();
            infoBox.innerHTML = '&nbsp;';
          });
        </script>
      </body>
    </html>