OL3 - Popup

by barbarina

HTML

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/ol3/3.14.0/ol.css">
<link rel="stylesheet" href="//cdn.rawgit.com/walkermatt/ol3-popup/master/src/ol3-popup.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/ol3/3.12.0/ol.js"></script>
<script src="//cdn.rawgit.com/walkermatt/ol3-popup/master/src/ol3-popup.js"></script>
<div id="map" class="map"></div>

CSS

html, body, .map{
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.ol-popup-content {
    border: 1px solid #ededed;
    padding: 0 0.5em;
}

JavaScript

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('singleclick', function(evt) {
    var content = '<p>If the popup content is quite long then by default it will scroll vertically.</p>';
    content += '<p>This behaviour together with the minimum width and maximum height can be changed by overriding the rules for the CSS class <code>.ol-popup-content</code> defined in <code>src/ol3-popup.css</code>.</p>';
    content += '<hr />';
    content += '<p><em>This text is here to demonstrate the content scrolling due to there being too much content to display :-)</em></p>';
    popup.show(evt.coordinate, content);
});

popup.addEventListener('mousedown', function(evt) {
  dragPan.setActive(false);
  marker.set('dragging', true);
  console.info('start dragging');
});