0

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>
2

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

Your Answer

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

Not the answer you're looking for? Browse other questions tagged or ask your own question.