Openlayers - trying to create the Overlay feature on the map

Question

I am struggling with creating the overlay on my map. I want to incorporate the example like here:

https://openlayers.org/en/latest/examples/overlay.html

https://openlayers.org/en/latest/apidoc/module-ol_Overlay-Overlay.html

but I cannot use the import statement, because I am getting an error:

Uncaught SyntaxError: Cannot use import statement outside a module

which has an explanation here:

https://github.com/TypeStrong/ts-node#syntaxerror

and here:

Why examples don't work? (a struggle with imports)

"Uncaught SyntaxError: Cannot use import statement outside a module" when importing ECMAScript 6

I tried to do sth like this:

      <script type="module" src="./layers/overlay.js" type="text/javascript"></script>

but an error still comes out and now it's related to the CORS policy:

Access to script at 'file:///C:/Users.../layers/overlay.js' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, chrome-untrusted, https.

Unfortunately I need this feature offline.

In this thread I found, that there is an alternative to the import feature:

https://gis.stackexchange.com/questions/310482/unexpected-token-identifier-error-import-openlayers/310501#310501

and I tried to adjust my code into it, which looks like this:

   var fromLonLat = ol.proj.fromLonLat

   var pos = fromLonLat([-0.21005,52.08093]);


   var overlay = new ol.Overlay({
   element: container,
   autoPan: true,
   autoPanAnimation: {
   duration: 250,
   },
  });

   var popup = new overlay({
   element: document.getElementById('popup'),
  });
   map.addOverlay(popup);

  // Vienna marker
  var marker = new overlay({
  position: pos,
  positioning: 'center-center',
  element: document.getElementById('marker'),
  stopEvent: false,
  });
  map.addOverlay(marker);

 // Vienna label
 var vienna = new overlay({
 position: pos,
 element: document.getElementById('vienna'),
 });
 map.addOverlay(vienna);

 map.on('click', function (evt) {
 var element = popup.getElement();
 var coordinate = evt.coordinate;
 var hdms = toStringHDMS(toLonLat(coordinate));

  $(element).popover('dispose');
  popup.setPosition(coordinate);
  $(element).popover({
  container: element,
  placement: 'top',
  animation: false,
  html: true,
  content: '<p>The location you clicked was:</p><code>' + hdms + '</code>',
  });
  $(element).popover('show');
   });

and now I am getting an error like this:

Uncaught TypeError: overlay is not a constructor at overlay.js:15

similar to the issue here:

openlayers3 undefined is not a constructor error on ol.source.StaticVector

Regarding this I found:

https://github.com/Viglino/ol-ext

including all relevant extensions for OpenLayers. Unfortunately after attaching the relevant scripts, the problem is still the same.

My another approaching was to replace everywhere the new overlay with the new ol.Overlay. In this event the console says nothing, but I can't see an overlay at all.

The code might be specicif, because it comes from the QGIS2web plugin. The major script with map as well as the index.html file you can find in this fiddle link below:

https://jsfiddle.net/2adv41bs/

Many sources refers me to the newest ol package

https://openlayers.org/download/

but since I superseded the link in my HTML code it's still doesn't work at all

I am also not familiar with creating the bundle in openlayers

https://openlayers.org/en/latest/doc/tutorials/bundle.html

A similar thread is here:

https://gis.stackexchange.com/questions/380382/incorporating-overlay-for-the-openlayers-map-generated-by-qgis2web-plugin

Is it possible to launch the overlay option for Openlayers map offline?

Answer 1

The good alternative for import can be found here:

https://gis.stackexchange.com/questions/310482/unexpected-token-identifier-error-import-openlayers/310501#310501

which changes the situation completely, because now the final code can look as this:

HTML

   <div id="map" class="map">
        <div id="popup" class="ol-popup">
            <a href="#" id="popup-closer" class="ol-popup-closer"></a>
            <div id="popup-content"></div>
        </div>
    </div>
    <div style="display: none;">
    <!-- Clickable label for Vienna -->
    <a class="overlay" id="vienna" target="_blank" 
    href="http://en.wikipedia.org/wiki/Vienna">Vienna</a>
    <div id="marker" title="Marker"></div>
   
    <!-- Popup -->
    <div id="popup" title="Welcome to OpenLayers"></div>
   </div>

Next, our CSS

   #marker {
    width: 20px;
    height: 20px;
    border: 1px solid #088;
    border-radius: 10px;
    background-color: #0FF;
    opacity: 0.5;
   }
    #vienna {
    text-decoration: none;
    color: white;
    font-size: 11pt;
    font-weight: bold;
    text-shadow: black 0.1em 0.1em 0.2em;
   }

   .popover-body {
     min-width: 276px;
   }

and the JS

    var fromLonLat = ol.proj.fromLonLat

    var pos = fromLonLat([-0.19610,52.07769]);

    var popup = new ol.Overlay({
    element: document.getElementById('popup'),
    });
    map.addOverlay(popup);

    var marker = new ol.Overlay({
    position: pos,
    positioning: 'center-center',
    element: document.getElementById('marker'),
    stopEvent: false,
    });
    map.addOverlay(marker);

    var vienna = new ol.Overlay({
    position: pos,
    element: document.getElementById('vienna'),
    });
    map.addOverlay(vienna);

    map.on('click', function (evt) {
    var element = popup.getElement();
    var coordinate = evt.coordinate;
    var hdms = toStringHDMS(toLonLat(coordinate));

    $(element).popover('dispose');
    popup.setPosition(coordinate);
    $(element).popover({
    container: element,
    placement: 'top',
    animation: false,
    html: true,
    content: '<p>The location you clicked was:</p><code>' + hdms + '</code>',
    });
    $(element).popover('show');
    });

Obviously, both CSS and JS files must be attached to the main index.html file if we want it working.