OpenLayers: La superposición no funciona

Question

Estoy siguiendo un tutorial de OpenLayers y en mi lección actual queríamos agregar una superposición al mapa web y cuando hago clic en el mapa me da las coordenadas de ese punto en el mapa. Sin embargo, para mí no funciona y creo que copié correctamente el código del tutorial.

Ese es el código js:

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;
    })

El mapa funciona. Puedo ver el mapa, pero el evento de clic con la superposición no funciona. No puedo ver el problema...

Aquí también está el código html:

    Título

Estoy usando OpenLayers 6.1.1

Lo siento, estoy bastante seguro de que el problema es estúpido pero no lo veo.

Answer 1

Probablemente verás algunos números pero no estilizados como un pop-up. Solo has definido

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

pero necesitas ambos

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

entonces

popupContainerElement.innerHTML = clickedCoordinate;

debería ser

popupCoordinatesElement.innerHTML = clickedCoordinate;

También necesitarás algo de css para el pop-up.