2

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.

Improve this question

1 Answer 1

Reset to default
2

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.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.