I want to create a widget that shows an OpenLayers map.
I’ve created an instance of QWebEngineView, and I’ve set the url to an index.html file that have the content:
QWebEngineView* m_webView;
m_webView = new QWebEngineView(this);
m_webView->load(QUrl("file:///web/index.html"));
The folder with the executable has a subfolder named web, and inside of it there’s the index.html, the main.js and the node_modules folder with ol library.
myfolder
|
|-mymap.exe
|-web/
|-index.html
|-main.js
|-node_modules
|-ol stuff
This is my index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Earthquakes in KML</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="node_modules/ol/ol.css">
</head>
<body>
<div id="map" class="map">
<div id="info"></div>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<script type="module" src="main.js"></script>
</body>
</html>
This is my main.js
import KML from 'ol/format/KML.js';
import Map from 'ol/Map.js';
import StadiaMaps from 'ol/source/StadiaMaps.js';
import VectorSource from 'ol/source/Vector.js';
import View from 'ol/View.js';
import { Circle as CircleStyle, Fill, Stroke, Style } from 'ol/style.js';
import { Tile as TileLayer, Vector as VectorLayer } from 'ol/layer.js';
const styleCache = {};
const styleFunction = function (feature) {
... a lot of stuff...
The problem is that when I try to run the application, I obtain the following error in the console, and the widget is empty:
js: Failed to load module script: The server responded with a non-JavaScript MIME type of "". Strict MIME type checking is enforced for module scripts per HTML spec.
[14212:37720:0628/124752.880:INFO:CONSOLE(0)] "Failed to load module script: The server responded with a non-JavaScript MIME type of "". Strict MIME type checking is enforced for module scripts per HTML spec.", source: file:///web/main.js (0)
I’ve think that’s something related to CORS, so I’ve created an interceptor for using it with QWebEngineView:
...
void Interceptor::interceptRequest(QWebEngineUrlRequestInfo& info) {
qDebug() << "first party url: " << info.firstPartyUrl();
info.setHttpHeader("Access-Control-Allow-Origin", "*");
}
...
auto interceptor = new Interceptor(this);
m_webView->page()->profile()->setUrlRequestInterceptor(interceptor);
m_webView->load(QUrl("file:///web/index.html"));
But nothing changes.
What I’m doing wrong? How can I show the web page correctly?
I’m using Qt 5.15.2 with Windows/Visual Studio.