Multiple Markers?

Question

I'm working with OpenLayers 3.20.

I'm able to add one marker on click. And then when I click somewhere else, that previously placed marker is destroyed and the new marker gets placed.

Problem is that I can't figure out how to add multiple markers to the map. Every tutorial and example I can find shows how to add one marker to the map or just simply displaying a marker (not on click).

So basically I need to add a marker to the point on the map every time it's clicked.

Does anyone have a reference guide or tutorial for that?

This is the code that I'm using to create the single marker.

  // Create marker
  var iconGeometry = new ol.geom.Point([637125.42195, 8172199.19090669]);

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

  var view = new ol.View({
      center: [637125.42195, 8172199.19090669],
      zoom: 14
  });
  var iconFeature = new ol.Feature({
      geometry: iconGeometry
  });

  var iconStyle = new ol.style.Style({
    image: new ol.style.Icon(({
      anchor: [0.4, 1],
      size: [75, 130],
      offset: [30, 0],
      opacity: 1,
      scale: 0.3,
      src: Drupal.settings.usgs_map_locator.basepath + '/images/icon-map-marker.png'
    }))
  });

  iconFeature.setStyle(iconStyle);

  var vectorSource = new ol.source.Vector({
      features: [iconFeature]
  });

  var vectorLayer = new ol.layer.Vector({
      source: vectorSource
  });

  map.on('click', function (evt) {
      iconGeometry.setCoordinates(evt.coordinate);
      map.addLayer(vectorLayer);
  });

Answer 1

After looking for hours, I found a very good basic fiddle that shows how to add multiple markers on click. Just like I was looking.

https://jsfiddle.net/jonataswalker/ckfd9d1L/

Thanks to this guy for doing this fiddle. I've not been able to find any other examples.

var 
    vectorSource = new ol.source.Vector(),
    vectorLayer = new ol.layer.Vector({
      source: vectorSource
    }),
    olview = new ol.View({
        center: [0, 0],
        zoom: 2,
        minZoom: 2,
        maxZoom: 20
    }),
    map = new ol.Map({
        target: document.getElementById('map'),
        view: olview,
        layers: [
            new ol.layer.Tile({
                style: 'Aerial',
                source: new ol.source.MapQuest({ layer: 'osm' })
            }),
            vectorLayer
        ]
    })
;

var iconStyle = new ol.style.Style({
    image: new ol.style.Icon({
        anchor: [0.5, 46],
        anchorXUnits: 'fraction',
        anchorYUnits: 'pixels',
        opacity: 0.75,
        src: '//openlayers.org/en/v3.8.2/examples/data/icon.png'
    }),
    text: new ol.style.Text({
        font: '12px Calibri,sans-serif',
        fill: new ol.style.Fill({ color: '#000' }),
        stroke: new ol.style.Stroke({
            color: '#fff', width: 2
        }),
        text: 'Some text'
    })
});
map.on('click', function(evt){
    var feature = new ol.Feature(
        new ol.geom.Point(evt.coordinate)
    );
    feature.setStyle(iconStyle);
    vectorSource.addFeature(feature);
});