map - Get markers inside OpenLayers bounding box -

i have drawn map on page using openlayers 3.0.

and in document.ready() have drawn map , have plotted few markers on using longitude , latitude combinations.

and have added draw line,polygon , select feature on map.

my idea plot few markers on map while page load, , draw ploygon or bounding box , on clicking selections should able markers plotted inside selection, possible this
without looping, please give me suggestion accomplish this.

my html , javascript code follows

var map, layer;     var drawcontrols;     openlayers.feature.vector.style['default']['strokewidth'] = '2';     $('document').ready(function () {          console.log('in');         openlayers.proxyhost = "/proxy/?url=";         map = new openlayers.map('map');         layer = new openlayers.layer.wms("openlayers wms", "http://vmap0.tiles.osgeo.org/wms/vmap0", { layers: 'basic' });          map.addlayer(layer);         map.setcenter(new openlayers.lonlat(0, 0), 0);          var newl = new openlayers.layer.text("text", { location: "./content/textfile.txt" });         map.addlayer(newl);          var markers = new openlayers.layer.markers("markers");         map.addlayer(markers);          var size = new openlayers.size(21, 25);         var offset = new openlayers.pixel(-(size.w / 2), -size.h);         var icon = new openlayers.icon('http://www.openlayers.org/dev/img/marker.png', size, offset);         //markers.addmarker(new openlayers.marker(new openlayers.lonlat(0, 0), icon));          var halficon = icon.clone();         //markers.addmarker(new openlayers.marker(new openlayers.lonlat(0, 45), halficon));                     var latitudes = '12.98267,13.00118,12.97161,12.97977,12.92828,12.97597';         var longitudes = '80.26338,80.2565,80.24343,80.25288,80.23621,80.22121';         var latarray = latitudes.split(',');         var lonarray = longitudes.split(',');         (var g = 0; g < latarray.length; g++) {             marker = new openlayers.marker(new openlayers.lonlat(lonarray[g], latarray[g]), icon.clone());             //marker.setopacity(0.2);             marker.events.register('mousedown', marker, function (evt) { alert(this.icon.url); openlayers.event.stop(evt); });             markers.addmarker(marker);         }          //marker = new openlayers.marker(new openlayers.lonlat(90, 10), icon.clone());         //marker.setopacity(0.2);         //marker.events.register('mousedown', marker, function (evt) { alert(this.icon.url); openlayers.event.stop(evt); });         //markers.addmarker(marker);          map.addcontrol(new openlayers.control.layerswitcher());         map.zoomtomaxextent();         halficon.setopacity(0.5);          var renderer = openlayers.util.getparameters(window.location.href).renderer;         renderer = (renderer) ? [renderer] : openlayers.layer.vector.prototype.renderers;          var vectors = new openlayers.layer.vector("vector layer",         {             renderers: renderer         });         vectors.events.on(         {             'featureselected': function (feature) {                 $('counter').innerhtml = this.selectedfeatures.length;                  $('myd').innerhtml = 'this.selectedfeatures.length :' + this.selectedfeatures.length + 'this.selectedfeatures[0].geometry.bounds :' + this.selectedfeatures[0].geometry.bounds;               },             'featureunselected': function (feature) {                 $('counter').innerhtml = this.selectedfeatures.length;                                    $('myd').innerhtml = 'unsel this.selectedfeatures.length :' + this.selectedfeatures.length + 'this.selectedfeatures[0].geometry.bounds :' + this.selectedfeatures[0].geometry.bounds;              }         });          map.addlayers([layer, vectors]);         map.addcontrol(new openlayers.control.layerswitcher());          drawcontrols =         {             point: new openlayers.control.drawfeature(                 vectors, openlayers.handler.point             ),             line: new openlayers.control.drawfeature(                 vectors, openlayers.handler.path             ),             polygon: new openlayers.control.drawfeature(                 vectors, openlayers.handler.polygon             ),             select: new openlayers.control.selectfeature(                 vectors,                 {                     clickout: false, toggle: false,                     multiple: false, hover: false,                     togglekey: "ctrlkey", // ctrl key removes selection                     multiplekey: "shiftkey", // shift key adds selection                     box: true                 }             ),             selecthover: new openlayers.control.selectfeature(                 vectors,                 {                     multiple: false, hover: true,                     togglekey: "ctrlkey", // ctrl key removes selection                     multiplekey: "shiftkey" // shift key adds selection                 }             )         };          (var key in drawcontrols) {             map.addcontrol(drawcontrols[key]);         }          });    function init()    {      }      function togglecontrol(element)      {         (key in drawcontrols) {             var control = drawcontrols[key];             if (element.value == key && element.checked) {                 control.activate();             }             else {                 control.deactivate();             }         }     }      function update()      {         var clickout = document.getelementbyid("clickout").checked;         if (clickout != drawcontrols.select.clickout)          {             drawcontrols.select.clickout = clickout;         }         var box = document.getelementbyid("box").checked;         if (box != drawcontrols.select.box)          {             drawcontrols.select.box = box;             if (drawcontrols.select.active)              {                 drawcontrols.select.deactivate();                 drawcontrols.select.activate();             }         }    } 

<div id="content"></div> <h1 id="title">     markers layer example</h1> <div id="tags">     marker, event, mousedown, popup, inco</div> <div id="shortdesc">     show markers layer different markers</div> <div id="map" class="smallmap"> </div> <ul id="controltoggle">     <li>         <input type="radio" name="type" value="none" id="nonetoggle" onclick="togglecontrol(this);"             checked="checked" />         <label for="nonetoggle">             navigate</label>     </li>     <li>         <input type="radio" name="type" value="point" id="pointtoggle" onclick="togglecontrol(this);" />         <label for="pointtoggle">             draw point</label>     </li>     <li>         <input type="radio" name="type" value="line" id="linetoggle" onclick="togglecontrol(this);" />         <label for="linetoggle">             draw line</label>     </li>     <li>         <input type="radio" name="type" value="polygon" id="polygontoggle" onclick="togglecontrol(this);" />         <label for="polygontoggle">             draw polygon</label>     </li>     <li>         <input type="radio" name="type" value="selecthover" id="selecthovertoggle" onclick="togglecontrol(this);" />         <label for="selecthovertoggle">             select features on hover</label>     </li>     <li>         <input type="radio" name="type" value="select" id="selecttoggle" onclick="togglecontrol(this);" />         <label for="selecttoggle">             select feature (<span id="counter">0</span> features selected)</label>         <ul>             <li>                 <input id="box" type="checkbox" checked="checked" name="box" onchange="update()" />                 <label for="box">                     select features in box</label>             </li>             <li>                 <input id="clickout" type="checkbox" name="clickout" onchange="update()" />                 <label for="clickout">                     click out unselect features</label>             </li>         </ul>     </li> </ul> <div id="myd"> </div> 

this may helpful.

i have found complete details @ below location:

https://gis.stackexchange.com/questions/115500/how-to-find-markers-in-selected-dragbox-openlayers-3 

you can check live demo here:

http://jsfiddle.net/gfarkas/fk1mqq25/1/