openlayers markers with popup

Question

I am trying to display a map with markers. I want the ability to click these markers such that extra information can be displayed (similiar to the way it works in google earth). I have the map and the markers (or features) but can not get the "popup" with extra information to work.

The JS:

function init(){
    var northSeaLonLat = [4.25, 52.05];
    var centerWebMercator = ol.proj.fromLonLat(northSeaLonLat);

    var tileLayer = new ol.layer.Tile({ source: new ol.source.OSM() });
    markerLayer = new ol.layer.Vector({ source: new ol.source.Vector({ features: [], projection: 'EPSG:3857' }) });


    var map = new ol.Map({
        controls: ol.control.defaults().extend([
            new ol.control.MousePosition({
                coordinateFormat: ol.coordinate.createStringXY(3),
                projection: 'EPSG:4326',
                undefinedHTML: ' ',
                className: 'custom-mouse-position',
                target: document.getElementById('custom-mouse-position'),
            })
        ]),
        layers: [tileLayer, markerLayer],
        target: 'map',
        view: new ol.View({
            projection: 'EPSG:3857',
            center: centerWebMercator,
            zoom: 7
        })
    });

    // Add marker
    var circle = new ol.style.Style({
        image: new ol.style.Circle({
            radius: 4,
            fill: new ol.style.Fill({
                color: 'rgba(200,0,0,0.9)',
            }),
            stroke: new ol.style.Stroke({
                color: 'rgba(100,0,0,0.9)',
                width: 2
            })
        })
    });

    coordinates = [[4.25, 52.05], [4.21, 52.01], [4.29, 52.29], [5.25, 52.05], [4.25, 51.05]];
    for (i = 0; i < coordinates.length; i++) { 
        var feature = new ol.Feature(
            new ol.geom.Point(ol.proj.transform(coordinates[i], 'EPSG:4326', 'EPSG:3857'))
        );
        feature.description = 'Coordinates: '+coordinates[i][0]+','+coordinates[i][1]+'\nBla';
        feature.setStyle(circle);
        markerLayer.getSource().addFeature(feature);
    }

    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) {
            popup.setPosition(evt.coordinate);
            $(element).popover({
                'placement': 'top',
                'html': true,
                'content': feature.get('description')
            });
            $(element).popover('show');
        } else {
            $(element).popover('destroy');
        }
    });
}

The code I got from an example on the website: http://openlayers.org/en/v3.11.1/examples/icon.html

It works there but I can't get my version to work. Any idea why?

Answer 1

popover isn't part of OpenLayers but contained in Bootstrap: http://getbootstrap.com/javascript/#popovers

Also see the OpenLayers example on overlays: https://openlayers.org/en/latest/examples/overlay.html