<!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
]
}
}
]
}