Updating or destroying pop-ups in openlayers3
I am trying to create a map with openlayers3 with a bunch of markers and popups. Markers and popups still work, but when I click on one marker (the popup is shown) and then - without clicking on the map again - on another, the popup is displayed with the same content as the first. I've done my research already but can't find anything useful. So here are some of 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 someone can help me. Thank!
+3
source to share
2 answers
I had the same problem and found the solution here https://gis.stackexchange.com/questions/137561/openlayers-3-markers-and-popovers
Try to change
$(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'));
+3
source to share