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);
});