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:
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:
Is it possible to launch the overlay option for Openlayers map offline?
The good alternative for import
can be found here:
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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.