Add Multiple Markers in OpenLayers 5

markersopenlayersoverlay

I'm using OpenLayers 5 to show a map and add markers to it.
I can see the map without any problems but only the last marker is shown. I saw an answer about using .clone() method on the marker that's being added to solve this issue(apparently markers were being recycled) bu i do not know how to do this in OpenLayers 5. Here is my code:

var map = new ol.Map({
        target: 'map',
        layers: [
            new ol.layer.Tile({
                source: new ol.source.OSM()
            })
        ],
        view: new ol.View({
            projection:"EPSG:4326",
            center: [24.038085,31.780256],
            zoom: 6,
            minzoom: 6,
            maxzoom: 12            
        })
    });

I add markers like this:

for (var i = 0; i < 10; i++) {                        
                    var marker = new ol.Overlay({
                        position: [i, i],
                        positioning: 'center-center',
                        element: document.getElementById('marker'),
                        stopEvent: false
                    });
                    map.addOverlay(marker);

my marker element is defined as:

<div id="marker" title="Marker"><img src="https://cdn.mapmarker.io/api/v1/fa/stack?size=50&color=DC4C3F&icon=fa-microchip&hoffset=1" /></div>

Best Answer

You will need new div for each marker

for (var i = 0; i < 10; i++) {
                    var element = document.createElement('div');
                    element.innerHTML = '<img src="https://cdn.mapmarker.io/api/v1/fa/stack?size=50&color=DC4C3F&icon=fa-microchip&hoffset=1" />';
                    var marker = new ol.Overlay({
                        position: [i, i],
                        positioning: 'center-center',
                        element: element,
                        stopEvent: false
                    });
                    map.addOverlay(marker);
Related Question