<!DOCTYPE html>
<html>

<head>
  <title>OpenLayers map</title>
  <!--Styles-->
</head>

<body>
  Draw polygons by holding down Ctrl. <br/><br/>
  Draw a polygon around points and once the polygon is complete, select the points inside the polygon.
  
  <p>
    <a href="http://dafyddprys.github.io/2016/02/10/select-features-in-openLayers-using-polygon-draw.html">
      See an explanation of the code here.
    </a>
  </p>

  <div id="map"></div>
  <!--Scripts-->


  <link data-require="openlayers@*" data-semver="3.11.2" rel="stylesheet" href="http://openlayers.org/en/v3.11.2/css/ol.css" />
  <script data-require="openlayers@*" data-semver="3.11.2" src="http://openlayers.org/en/v3.11.2/build/ol-debug.js"></script>
    
  <!--<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>-->
  <!--<script src="./ol-debug.js" type="text/javascript"></script>-->
  <script src="./selectMapsByClickOrDraw.js"></script>
  <!--<script src="./controls.js"></script>-->
  
</body>

</html>
/* Styles go here */

This plunk uses open layers 3 and shows how you can use a polygon from ol.interaction.Draw to create 
an area which will select all point features contained in it.

[There is a walkthrough for the code on my blog](http://dafyddprys.github.io/2016/02/10/select-features-in-openLayers-using-polygon-draw.html)
var map;



/* Add map layer */
var baseLayer = new ol.layer.Tile({
	source : new ol.source.OSM()
});

/* Add view */
var view = new ol.View({
	projection : 'EPSG:900913',
	center : ol.proj.fromLonLat([-2.5,51.1]),
	zoom:4,
});

/* Add layer of point features */
var pointsLayer = new ol.layer.Vector({
	title: 'random points',
	source : new ol.source.Vector({
		url : 'points.json',
		format : new ol.format.GeoJSON()
	})
});

/* Initialise map */
function init(){
	map = new ol.Map({
		target : 'map',
		//the type of rendered we want to use.
		renderer : 'canvas',
		view : view
	});
	map.addLayer(baseLayer);
	map.addLayer(pointsLayer);
}

init();

/* //////////// ADD SELECTION */

/* add ol.collection to hold all selected features */
var select = new ol.interaction.Select();
map.addInteraction(select);
var selectedFeatures = select.getFeatures();

/* //////////// ADD DRAWING */

/* The current drawing */
var sketch;

/* Add drawing vector source */
var drawingSource = new ol.source.Vector({
	useSpatialIndex : false
});

/* Add drawing layer */
var drawingLayer = new ol.layer.Vector({
	source: drawingSource
});
map.addLayer(drawingLayer);

/* Declare interactions and listener globally so we 
	can attach listeners to them later. */
var draw;
var modify;
var listener;

// Drawing interaction
draw = new ol.interaction.Draw({
	source : drawingSource,
	type : 'Polygon',
	//only draw when Ctrl is pressed.
	condition : ol.events.condition.platformModifierKeyOnly
});
map.addInteraction(draw);

/* Deactivate select and delete any existing polygons.
	Only one polygon drawn at a time. */
draw.on('drawstart',function(event){
	drawingSource.clear();
	//selectedFeatures.clear();
	select.setActive(false);
	
	sketch = event.feature;
	
	listener = sketch.getGeometry().on('change',function(event){
		selectedFeatures.clear();
		var polygon = event.target;
		var features = pointsLayer.getSource().getFeatures();

		for (var i = 0 ; i < features.length; i++){
			if(polygon.intersectsExtent(features[i].getGeometry().getExtent())){
				selectedFeatures.push(features[i]);
			}
		}
	});
},this);


/* Reactivate select after 300ms (to avoid single click trigger)
	and create final set of selected features. */
draw.on('drawend', function(event) {
	sketch = null;
	delaySelectActivate();
	selectedFeatures.clear();

	var polygon = event.feature.getGeometry();
	var features = pointsLayer.getSource().getFeatures();

	for (var i = 0 ; i < features.length; i++){
		if(polygon.intersectsExtent(features[i].getGeometry().getExtent())){
			selectedFeatures.push(features[i]);
		}
	}
	
	
});


/* Modify polygons interaction */

var modify = new ol.interaction.Modify({
	//only allow modification of drawn polygons
	features: drawingSource.getFeaturesCollection()
});
map.addInteraction(modify);

/* Point features select/deselect as you move polygon.
	Deactivate select interaction. */
modify.on('modifystart',function(event){
	sketch = event.features;
	select.setActive(false);
	listener = event.features.getArray()[0].getGeometry().on('change',function(event){
		// clear features so they deselect when polygon moves away
		selectedFeatures.clear();
		var polygon = event.target;
		var features = pointsLayer.getSource().getFeatures();

		for (var i = 0 ; i < features.length; i++){
			if(polygon.intersectsExtent(features[i].getGeometry().getExtent())){
				selectedFeatures.push(features[i]);
			}
		}
	});
},this);

/* Reactivate select function */
modify.on('modifyend',function(event){
	sketch = null;
	delaySelectActivate();
	selectedFeatures.clear();
	var polygon = event.features.getArray()[0].getGeometry();
	var features = pointsLayer.getSource().getFeatures();

	for (var i = 0 ; i < features.length; i++){
		if(polygon.intersectsExtent(features[i].getGeometry().getExtent())){
			selectedFeatures.push(features[i]);
		}
	}

},this);


/* //////////// SUPPORTING FUNCTIONS */

function delaySelectActivate(){
	setTimeout(function(){
		select.setActive(true)
	},300);
}



/*
//Attribution
var myAttributionControl = new ol.control.Attribution({
  className:'ol-attribution', //default parameter
  target:null, //default parameter. Places attribution in a div
});
map.addControl(myAttributionControl);


//Full Screen
var myFullScreenControl = new ol.control.FullScreen();
map.addControl(myFullScreenControl);

//Rotate
var myRotateControl = new ol.control.Rotate()
map.addControl(myRotateControl);

//ScaleLine
var myScaleLine = new ol.control.ScaleLine()
map.addControl(myScaleLine);
//I often use the scale line. The default implementation looks nice.

//Zoom
var myZoom = new ol.control.Zoom();
map.addControl(myZoom);

//ZoomSlider
var myZoomSlider = new ol.control.ZoomSlider();
map.addControl(myZoomSlider);
//The zoom slider is a nice addition to your map. It is wise to have it accompany your zoom buttons.

//ZoomToExtent
var myExtentButton = new ol.control.ZoomToExtent({
    extent:undefined
});
map.addControl(myExtentButton);
*/
{
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "properties": {},
      "geometry": {
        "type": "Point",
        "coordinates": [
          0.10986328125,
          51.16556659836182
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {},
      "geometry": {
        "type": "Point",
        "coordinates": [
          -1.109619140625,
          51.46085244645549
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {},
      "geometry": {
        "type": "Point",
        "coordinates": [
          -1.8292236328125,
          50.812877010308966
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {},
      "geometry": {
        "type": "Point",
        "coordinates": [
          -2.5927734375,
          51.57365561973001
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {},
      "geometry": {
        "type": "Point",
        "coordinates": [
          -2.8619384765625,
          51.303145259199056
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {},
      "geometry": {
        "type": "Point",
        "coordinates": [
          -1.153564453125,
          51.7508394806285
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {},
      "geometry": {
        "type": "Point",
        "coordinates": [
          -0.24204254150390625,
          51.55295325509707
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {},
      "geometry": {
        "type": "Point",
        "coordinates": [
          -0.3498458862304687,
          51.518784426574925
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {},
      "geometry": {
        "type": "Point",
        "coordinates": [
          -0.28049468994140625,
          51.503400084633526
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {},
      "geometry": {
        "type": "Point",
        "coordinates": [
          -0.29422760009765625,
          51.53437713632629
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {},
      "geometry": {
        "type": "Point",
        "coordinates": [
          -0.22144317626953125,
          51.49335472541077
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {},
      "geometry": {
        "type": "Point",
        "coordinates": [
          -0.17063140869140625,
          51.52925135518991
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {},
      "geometry": {
        "type": "Point",
        "coordinates": [
          -0.12874603271484375,
          51.5023315346337
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {},
      "geometry": {
        "type": "Point",
        "coordinates": [
          -0.17749786376953125,
          51.45486265825492
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {},
      "geometry": {
        "type": "Point",
        "coordinates": [
          -0.08995056152343749,
          51.52156160130253
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {},
      "geometry": {
        "type": "Point",
        "coordinates": [
          -0.0926971435546875,
          51.49634719159713
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {},
      "geometry": {
        "type": "Point",
        "coordinates": [
          -0.07244110107421875,
          51.51066556016946
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {},
      "geometry": {
        "type": "Point",
        "coordinates": [
          -0.1091766357421875,
          51.55124542283755
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {},
      "geometry": {
        "type": "Point",
        "coordinates": [
          -0.07106781005859375,
          51.5429188223739
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {},
      "geometry": {
        "type": "Point",
        "coordinates": [
          -1.5816879272460938,
          50.87162811426564
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {},
      "geometry": {
        "type": "Point",
        "coordinates": [
          -1.702880859375,
          50.82892708961907
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {},
      "geometry": {
        "type": "Point",
        "coordinates": [
          -1.7121505737304688,
          50.88505892896862
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {},
      "geometry": {
        "type": "Point",
        "coordinates": [
          -1.5909576416015625,
          50.80701952658132
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {},
      "geometry": {
        "type": "Point",
        "coordinates": [
          -1.5442657470703125,
          50.758395778767856
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {},
      "geometry": {
        "type": "Point",
        "coordinates": [
          -1.0855865478515625,
          51.261270334309096
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {},
      "geometry": {
        "type": "Point",
        "coordinates": [
          -1.1545944213867188,
          51.21785194366128
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {},
      "geometry": {
        "type": "Point",
        "coordinates": [
          -1.229095458984375,
          51.296061416993226
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {},
      "geometry": {
        "type": "Point",
        "coordinates": [
          -2.328929901123047,
          51.38056682433329
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {},
      "geometry": {
        "type": "Point",
        "coordinates": [
          -2.3816299438476562,
          51.385923587177615
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {},
      "geometry": {
        "type": "Point",
        "coordinates": [
          -2.362403869628906,
          51.38495941613736
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {},
      "geometry": {
        "type": "Point",
        "coordinates": [
          -2.3615455627441406,
          51.38678061104849
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {},
      "geometry": {
        "type": "Point",
        "coordinates": [
          -2.380084991455078,
          51.38163822706166
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {},
      "geometry": {
        "type": "Point",
        "coordinates": [
          -2.584705352783203,
          51.4526162850283
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {},
      "geometry": {
        "type": "Point",
        "coordinates": [
          -4.351444244384766,
          53.23429727934628
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {},
      "geometry": {
        "type": "Point",
        "coordinates": [
          -3.260643482208252,
          51.520947433015124
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {},
      "geometry": {
        "type": "Point",
        "coordinates": [
          0.14681339263916013,
          52.203188285865146
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {},
      "geometry": {
        "type": "Point",
        "coordinates": [
          -2.2367477416992188,
          53.4790182281437
        ]
      }
    }
  ]
}