1

I created a map with OpenLayers where I am able to select markers, and make their names appear in a field.

Now here is my problem: I want to be able to select markers with a polygon, draw my polygon and make the names of all the markers contained in my polygon appear in my external field.

I succeed creating the polygon I created a drawend event on it in order to get all the data of my markers at the end of my selection, but the part that I can't resolve is how to create the function that "take back all the markers selected in the polygon and return them the name"

I already try something like load the marker feature in my function and get the name like I did the first time, but nothing, I try to find documentation too but I don't find something that works with me.

Here is my code:

var rasterLayer =  new ol.layer.Tile({
            source: new ol.source.OSM()
        });

var vectorLayer = new ol.layer.Vector({
  source: new ol.source.Vector({
    format: new ol.format.GeoJSON(),
    url: 'http://localhost/osgis-ol3-leaflet-master/ol3/data.geojson'
  }),
  style: new ol.style.Style({
    image: new ol.style.Icon(({
          anchor: [0.5, 1],
          anchorXUnits: 'fraction',
          anchorYUnits: 'fraction',
          src: 'marker-airport.png'
      }))
  })
});
 var source = new ol.source.Vector({wrapX: false});

      var vector = new ol.layer.Vector({
        source: source,
        style: new ol.style.Style({
          fill: new ol.style.Fill({
            color: 'rgba(255, 255, 255, 0.2)'
          }),
          stroke: new ol.style.Stroke({
            color: '#ffcc33',
            width: 2
          }),
          image: new ol.style.Circle({
            radius: 7,
            fill: new ol.style.Fill({
              color: '#ffcc33'
            })
          })
        })
      });

// Map creation 

var map = new ol.Map({
  layers: [rasterLayer, vectorLayer, vector],
  target: document.getElementById('map'),
 view: new ol.View({
        center: [0, 0],
          zoom: 3
    })
});   
// Call the input to show the airport code and name 
var input = document.getElementById('input-airports');

// Interactions with the map
var select_interaction = new ol.interaction.Select({ 
 style: new ol.style.Style({
    image: new ol.style.Icon(({
          anchor: [0.5, 1],
          anchorXUnits: 'fraction',
          anchorYUnits: 'fraction',
          src: 'marker-icon.png'
      }))
  }) 
});
map.addInteraction(select_interaction);

// Event for codes and names of all airports shown in the field
select_interaction.on('select', function(evt) {
  var feature = select_interaction.getFeatures();
  var value = '';
  feature.forEach(function(feature){
    value += feature.get('name') + ' ' + '(' + feature.get('code') + ')' + ', ' + ' ';
  });

  input.value = value;
});

var typeSelect = document.getElementById('type');
var  draw = new ol.interaction.Draw({
      source: myDrawSource,
      type: "Polygon",
    });

map.addInteraction(draw);

draw.on('drawend',function(e){
  myDrawSource.clear();
  mySelectionsSource.clear();
  var extent = e.feature.getGeometry().getExtent();
  var geomA = e.feature.getGeometry();
  vectorLayer.forEachFeatureInExtent(extent,function(aa){
    console.log("forEachFeatureInExtent",aa.getGeometry());
    if (polyIntersectsPoly(geomA,aa.getGeometry()) === true){
      mySelectionsSource.addFeature(aa);
    }
  });
});

/**
* check whether the supplied polygons have any spatial interaction
* @{ol.geometry.Polygon} polygeomA 
* @{ol.geometry.Polygon} polygeomB 
* @returns {Boolean} true||false
*/
function polyIntersectsPoly(polygeomA, polygeomB) {
 var geomA = new jsts.io.GeoJSONReader().read(new ol.format.GeoJSON().writeFeatureObject(
        new ol.Feature({
            geometry: polygeomA
       })
   )
   ).geometry;
var geomB = new jsts.io.GeoJSONReader().read(new ol.format.GeoJSON().writeFeatureObject(
        new ol.Feature({
            geometry: polygeomB
        })
    )
    ).geometry;
return geomA.intersects(geomB);
};
  • 1
    If you want to draw a bounding box you can solve it with just ol3 but if you want to use a polygon you need to use jsts lib on top of ol3. check this stackoverflow.com/questions/35386689/… – pavlos Jul 6 '16 at 13:00
  • i followed your advice, but when i try to use the code i'm getting an error Uncaught TypeError: vectorLayer.forEachFeatureInExtent is not a function. i don't know where this is coming from. :/ i modified my code – Inès Zarka Jul 6 '16 at 14:34
  • which ol3 version do you use? If it is an old one , upgrade to the latest – pavlos Jul 6 '16 at 14:40
  • forEachFeatureInExtent() is a method of the source, not the layer. – peter Jul 6 '16 at 17:27
  • I just upgraded my version, but still nothig. I know that is not a layer, but i still don't understand why the function doesn't work. I am sorry i'm really knew in javascript. :/ – Inès Zarka Jul 7 '16 at 6:49

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.