Multiple Selection

Question

I implemented a map with markers pointing to airports, and when I click on a marker the name of the airport appears in a field. (All date included in a GEOJson external file). I just have a last problem that I can't resolve :

I can only select one marker at a time, and i want to be able to select multiples layers, and make all the name appears in the field. I think that my problem are that I need to change the calling my features, but i don't know what to write instead. I already tried to change my function from "forEachFeatureAtPixel" to "forFeatureAtPixel" or things like that, but every time I break my map.
I'm a beginner in javascript :/ Here is my JS code,

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

// Define a GeoJSON source that will load features via a http call. By
// specifying the projection of the map's view OL3 will transform the coordinates
// for display
var planningAppsSource = new ol.source.GeoJSON({
    'projection': map.getView().getProjection(),
    'url': 'http://localhost/osgis-ol3-leaflet-master/ol3/data.geojson'
});

// Create a vector layer to display the features within the GeoJSON source and
// applies a simple icon style to all features
var planningAppsLayer = new ol.layer.Vector({
    source: planningAppsSource,

    style: new ol.style.Style({
        image: new ol.style.Icon(({
            anchor: [0.5, 40],
            anchorXUnits: 'fraction',
            anchorYUnits: 'pixels',
            src: 'marker-icon.png'
        }))
    })      
});

// Add the layer to the map
map.addLayer(planningAppsLayer);

var input = document.getElementById('input-airports');

map.on('click', function(evt) {
  var feature = map.forEachFeatureAtPixel(
        evt.pixel, function(ft, l) { return ft; });
  if (feature) {
    console.log(feature.getProperties());

    input.value = feature.get('name');
  }
});
map.on('pointermove', function(e) {
  if (e.dragging) return;
  var hit = map.hasFeatureAtPixel(map.getEventPixel(e.originalEvent));
});


var vector = new ol.layer.Vector("Features");

Answer 1

Add an ol.interaction.Select to your map. It allows multi-selects (shift+click), and sends an array of selected and deselected features in its 'select' event. It uses an ol.Collection to store selection results.

For instance:

var int_select = new ol.interaction.Select({
  features: new ol.Collection();
});

map.addInteraction(int_select);

int_select.on('select',
  function(event) {
    var selected='';
    int_select.getFeatures().forEach(
      function(feature,index,collection){
        if (selected!='') { selected=selected+', '}
        selected=selected+feature.get('name');
      }
      ,this
    );
    console.log(selected);
  },this
);