I am creating a WebMap using GeoServer and OpenLayers. I am trying to create a popup to show information on a specific type of point feature.

The single-click event and function work well to get the name and coordinates of the points. However, the popup does not show up as expected and I could not find any problem in the code.

Any idea where I am making the mistake?

<!DOCTYPE html>
<html lang="en">

    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- CSS only -->
    <link href="libs/bootstrap-5.1.3-dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- JavaScript Bundle with Popper -->
    <script src="libs/bootstrap-5.1.3-dist/js/bootstrap.bundle.min.js"></script>

    <script src="libs/jquery.js"></script>

    <script src="libs/v6.13.0-dist/ol.js"></script>
    <link rel="stylesheet" href="libs/v6.13.0-dist/ol.css">

    <script src="libs/ol-layerswitcher-master/dist/ol-layerswitcher.js"></script>
    <link rel="stylesheet" href="libs/ol-layerswitcher-master/dist/ol-layerswitcher.css" />

    <script src="libs/ol-geocoder/ol-geocoder.js"></script>
    <link rel="stylesheet" href="libs/ol-geocoder/ol-geocoder.css" />

    <script src="libs/ol-popup/ol-popup.js"></script>
    <link rel="stylesheet" href="libs/ol-popup/ol-popup.css" />

    <link rel="stylesheet" href="libs/jquery-ui-1.12.1/jquery-ui.css">
    <script src="libs/jquery-ui-1.12.1/external/jquery/jquery.js"></script>
    <script src="libs/jquery-ui-1.12.1/jquery-ui.js"></script>
    <link rel="stylesheet" href="style.css">


    <div id="map" class="map">
        <!-- START popup -->
        <div id="popup" class="ol-popup"> 
            <a href="#" id="popup-closer" class="ol-popoup-closer"></a>
            <div id="popup-content"></div>
        <!-- END popup -->

        <script src="main.js"></script>


// JavaScript
// START of popup
var container = document.getElementById('popup');
var content = document.getElementById('popup-content');
var closer = document.getElementById('popup-closer');

var overlay = new ol.Overlay({
    element: container,
    // offset: [0, -10],
    autoPan: {
        autoPanAnimation: {
            duration: 250,

closer.onclick = function () {
  return false;

map.on('singleclick', function(evt){
    var f = map.forEachFeatureAtPixel(evt.pixel,
        return f
    const coordinate = evt.coordinate;
    if (f){
        var n  = f.getProperties().name
        content.innerHTML = '<h7>Station Name: <strong>' + n + '</strong></h7>';


    /* START popup style: */
    position: absolute;
    background-color: rgba(255, 255, 255, 0.7);
    box-shadow: 0 1px 4px rgba(0,0,0,0.2);
    padding: 15px;
    border-radius: 10px;
    border: 1px solid #cccccc;
    bottom: 12px;
    left: -50px;
    min-width: 230px;
.ol-popup:after, .ol-popup:before {
    top: 100%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
.ol-popup:after {
    border-top-color: rgba(255, 255, 255, 0.7);
    border-width: 10px;
    left: 48px;
    margin-left: -10px;
.ol-popup:before {
    border-top-color: #cccccc;
    border-width: 11px;
    left: 48px;
    margin-left: -11px;
.ol-popup-closer {
    text-decoration: none;
    position: absolute;
    top: 2px;
    right: 8px;
    content: "✖";
/* END popup style: */


Your Answer

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

Browse other questions tagged or ask your own question.