5

I try to build a map with openlayers3 with a group of markers and popups. The markers and the popups work so far, but when I click on one marker (popup shown) and then -without clicking in the map again- on another one, it shows a popup with the same content as the first one. I have already done research, but can't find something helpful. So here's the part for my popups:

//popup
var element = document.getElementById('popup');

var popup = new ol.Overlay({
  element: element,
  positioning: 'bottom-center',
  stopEvent: false
});

map.addOverlay(popup);

// display popup on click
map.on('click', function(evt) { 
  var feature = map.forEachFeatureAtPixel(evt.pixel,
      function(feature, layer) {
        return feature;
      });     

  if (feature) {
    var geometry = feature.getGeometry();
    var coord = geometry.getCoordinates();
    popup.setPosition(coord);
    $(element).popover({
      'placement': 'top',
      'html': true,
      'content': feature.get('information')
    });
    $(element).popover('show');
  } else {
    $(element).popover('destroy');
  }
});

Hope somebody can help me. Thanks!

however
  • 51
  • 1
  • 3

2 Answers2

5

I was having the same issue and found my solution here https://gis.stackexchange.com/questions/137561/openlayers-3-markers-and-popovers

Try changing your 

$(element).popover({
  'placement': 'top',
  'html': true,
  'content': feature.get('information')
});

to

$(element).attr('data-placement', 'top');
$(element).attr('data-html', true);
$(element).attr('data-content', feature.get('information'));
Community
  • 1
  • 1
Steve
  • 546
  • 5
  • 18
1

I've made an example for you. Take a look!

You gotta "write" some content on each marker.

http://embed.plnkr.co/hhEAWk/preview

Jonatas Walker
  • 13,583
  • 5
  • 53
  • 82