Adding more than one popup marker - Openlayers map

Question

I have created a marker with a popup using openlayers. It all works fine but I cen't figure out how to add another marker in a different location. Here is my JS:

var marker = new ol.layer.Vector({
    source: new ol.source.Vector({
        features: [
        new ol.Feature({
            geometry: new ol.geom.Point(ol.proj.fromLonLat([-2.123666, 52.504650]))
        })
        ]
    })
});

var container = document.getElementById('popup');
 var content = document.getElementById('popup-content');
 var closer = document.getElementById('popup-closer');

 var overlay = new ol.Overlay({
     element: container,
     autoPan: true,
     autoPanAnimation: {
         duration: 250
     }
 });
 map.addOverlay(overlay);

 closer.onclick = function() {
     overlay.setPosition(undefined);
     closer.blur();
     return false;
 };
 
 map.on('singleclick', function (event) {
     if (map.hasFeatureAtPixel(event.pixel) === true) {
         var coordinate = event.coordinate;

         content.innerHTML = '<b>Barrow Hill and Tansey Green</b><br />I am a popup.';
         overlay.setPosition(coordinate);
     } else {
         overlay.setPosition(undefined);
         closer.blur();
     }
 });

and my html:

<div id="mymap">
<div id="popup" class="ol-popup">
     <a href="#" id="popup-closer" class="ol-popup-closer"></a>
     <div id="popup-content"></div>

Answer 1

There are may ways to do this. To add multiple markers based on your existing code, add additional features to the array of features, with an additional property for the popup content (assuming you want it to vary by the location):

var marker = new ol.layer.Vector({
  source: new ol.source.Vector({
    features: [
      new ol.Feature({
        geometry: new ol.geom.Point(ol.proj.fromLonLat([-2.123666, 52.504650])),
        html: '<b>Barrow Hill and Tansey Green</b><br />I am a popup.'
      }),
      new ol.Feature({
        geometry: new ol.geom.Point(ol.proj.fromLonLat([-2.12, 52.504])),
        html: '<b>Marker 2</b><br />I am a popup.'
      }),
      new ol.Feature({
        geometry: new ol.geom.Point(ol.proj.fromLonLat([-2.13, 52.51])),
        html: '<b>Marker 3</b><br />I am a popup.'
      })
    ]
  })
});

Then change your popup opener function to find the data from the clicked location and display it in the popup:

map.on('singleclick', function(event) {
  if (map.hasFeatureAtPixel(event.pixel) === true) {
    var coordinate = event.coordinate;
    var features = map.getFeaturesAtPixel(event.pixel);
    content.innerHTML = features[0].getProperties().html;
    overlay.setPosition(coordinate);
  } else {
    overlay.setPosition(undefined);
    closer.blur();
  }
});

proof of concept fiddle

code snippet:

var marker = new ol.layer.Vector({
  source: new ol.source.Vector({
    features: [
      new ol.Feature({
        geometry: new ol.geom.Point(ol.proj.fromLonLat([-2.123666, 52.504650])),
        html: '<b>Barrow Hill and Tansey Green</b><br />I am a popup.'
      }),
      new ol.Feature({
        geometry: new ol.geom.Point(ol.proj.fromLonLat([-2.12, 52.504])),
        html: '<b>Marker 2</b><br />I am a popup.'
      }),
      new ol.Feature({
        geometry: new ol.geom.Point(ol.proj.fromLonLat([-2.13, 52.51])),
        html: '<b>Marker 3</b><br />I am a popup.'
      })
    ]
  })
});
//OSM layer creation
var OSMmap = new ol.layer.Tile({ // TileLayer({
  source: new ol.source.OSM(),
});
//Map initiation
var map = new ol.Map({
  target: 'mymap',

  layers: [OSMmap, marker], //cities],

  view: new ol.View({
    center: ol.proj.fromLonLat([15, 0]),
    zoom: 2
  }),

});

var container = document.getElementById('popup');
var content = document.getElementById('popup-content');
var closer = document.getElementById('popup-closer');

var overlay = new ol.Overlay({
  element: container,
  autoPan: true,
  autoPanAnimation: {
    duration: 250
  }
});
map.addOverlay(overlay);

closer.onclick = function() {
  overlay.setPosition(undefined);
  closer.blur();
  return false;
};

map.on('singleclick', function(event) {
  if (map.hasFeatureAtPixel(event.pixel) === true) {
    var coordinate = event.coordinate;
    var features = map.getFeaturesAtPixel(event.pixel);
    content.innerHTML = features[0].getProperties().html;
    overlay.setPosition(coordinate);
  } else {
    overlay.setPosition(undefined);
    closer.blur();
  }
});
map.getView().fit(marker.getSource().getExtent(), {
  padding: [40, 16, 40, 16]
});

/* Always set the map height explicitly to define the size of the div
 * element that contains the map. */

#mymap {
  height: 100%;
}


/* Optional: Makes the sample page fill the window. */

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

#popup {
  background: #FFFFFF;
  border: black 1px solid;
}

<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
<script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.5.0/build/ol.js"></script>
<link rel="stylesheet" href="https://openlayers.org/en/v6.5.0/css/ol.css" type="text/css">
<div id="mymap">
  <div id="popup" class="ol-popup">
    <a href="#" id="popup-closer" class="ol-popup-closer"></a>
    <div id="popup-content"></div>
  </div>
</div>

Another way to do it