OpenLayers 3 creating popups on a click

Question

I have an OSM map on which I display a GeoJSON file (point). I'd like to create a popup on click for each point to show attributes.

I can't find a sort of very basic step by step tutorial to do that, even on OpenLayers 3 examples.

Does anyone have some useful links?

Answer 1

Here's a tutorial that I found useful. The tutorial uses the ol3-popup by walkermatt to make the popups. I've cut and paste some code from the demo so you have an idea on what this should look like.

var map = new ol.Map({
    target: 'map',
    layers: [
        new ol.layer.Tile({
            source: new ol.source.OSM()
        })
    ],
    view: new ol.View({
        center: ol.proj.transform([-0.92, 52.96], 'EPSG:4326', 'EPSG:3857'),
        zoom: 6
    })
});

var popup = new ol.Overlay.Popup();
map.addOverlay(popup);

map.on('click', function(evt) {
    var prettyCoord = ol.coordinate.toStringHDMS(ol.proj.transform(evt.coordinate, 'EPSG:3857', 'EPSG:4326'), 2);
    popup.show(evt.coordinate, '<div><h2>Coordinates</h2><p>' + prettyCoord + '</p></div>');
});

Answer 2

The Icon example from the ol3js.org pages is fairly close to what you're after. You'll need to make sure you have the correct bootstrap css and js files included, and the important bit of JS is highlighted here: https://github.com/openlayers/ol3/blob/v3.0.0-gamma.1/examples/icon.js#L65-L84