OpenLayers Overlay – How to Fix Overlay Doesn’t Work in OpenLayers

openlayers

I'm following an OpenLayers tutorial and in my current lesson we wanted to add an overlay to the webmap and when I click on the map it gives me the coordinates of that map. However, for me it doesn't work and I believ I copied the tutorial code properly.

That's the js code: 

window.onload = init;

function init(){
    const map = new ol.Map({
        view: new ol.View({
            center: [0, 0],
            zoom: 2
        }),
        layers: [
            new ol.layer.Tile({
                source: new ol.source.OSM()
            })
        ],
        target: 'js-map'
    });

    var popupContainerElement = document.getElementById('popup-coordinates');
    var popup = new ol.Overlay({
        element: popupContainerElement,
        positioning: 'top-right'
    })

    map.addOverlay(popup);

    map.on('click', function(e){
        var clickedCoordinate = e.coordinate;
        popup.setPosition(undefined);
        popup.setPosition(clickedCoordinate);
        popupContainerElement.innerHTML = clickedCoordinate;
    })

The map works. I can see the map, but the click event with the overlay doesn't work. I can't see the problem…

Here is also the html code: 

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name = "viewport" content = "width=device-width, initial-scale=1.0">
    <title>Title</title>
    <link rel="stylesheet" href="./lib/OpenLayers/ol.css">
    <link rel="stylesheet" href="./style.css">
</head>
<body>
    <div id='popup-container'>
        <p id='popup-coordinates'></p>
    </div>
    <div id="js-map" class="map"> </div>
    <script src='./lib/OpenLayers/ol.js'> </script>
    <script src='./Main.js'> </script>
</body>
</html>

I am using OpenLayers 6.1.1

Sorry, I'm pretty sure the issue is stupid but I don't see it.

Best Answer

You will probably see some numbers but not styled as a popup. You have defined only

popupContainerElement = document.getElementById('popup-coordinates');

but you need both

popupContainerElement = document.getElementById('popup-container');
popupCoordinatesElement = document.getElementById('popup-coordinates');

then

popupContainerElement.innerHTML = clickedCoordinate;

should become

popupCoordinatesElement.innerHTML = clickedCoordinate;

You will also need some css for the popup.

Related Question