CODEWITHSUNDEEP
qtopenlayersqwebengineview
Roberto Garcia
Roberto Garcia

Reputation: 23

QWebEngineView not load Openlayers

I have tried to do a basic example with QWebEngineView and Openlayers but it does not work.

My steps:

  1. I created the basic example in HTML from Openlayers

<!doctype html>
<html lang="en">
  <head>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.5.0/css/ol.css" type="text/css">
    <style>
      .map {
        height: 400px;
        width: 100%;
      }
    </style>
    <script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.5.0/build/ol.js"></script>
    <title>OpenLayers example</title>
  </head>
  <body>
    <h2>My Map</h2>
    <div id="map" class="map"></div>
    <script type="text/javascript">
      var map = new ol.Map({
        target: 'map',
        layers: [
          new ol.layer.Tile({
            source: new ol.source.OSM()
          })
        ],
        view: new ol.View({
          center: ol.proj.fromLonLat([37.41, 8.82]),
          zoom: 4
        })
      });
    </script>
  </body>
</html>

This works on Chrome. I created a new Project in QT with webenginewidgets in pro file. In MainWindow, I put the following code:



    QWebEngineView *view = new QWebEngineView(parent);
    view->page()->settings()->setAttribute(QWebEngineSettings::LocalContentCanAccessRemoteUrls, true);
    view->page()->settings()->setAttribute(QWebEngineSettings::AutoLoadImages, true);
    view->page()->settings()->setAttribute(QWebEngineSettings::AllowGeolocationOnInsecureOrigins, true);
    view->page()->settings()->setAttribute(QWebEngineSettings::AllowRunningInsecureContent, true);
    view->page()->settings()->setAttribute(QWebEngineSettings::AllowWindowActivationFromJavaScript, true);
    view->load(QUrl::fromLocalFile("C:/TEST/test_webeng/openlayers.html"));
    view->show();

I tried to put all these attributes because without them I get messages of this type: Access to image at 'https://a.tile.openstreetmap.org/4/10/8.png' from origin 'file: //' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. ", Source: file: /// C: /TEST/test_webeng/openlayers.html

With or without attributes, the map images are not displayed.

Any solution?

Upvotes: 1

Views: 413

Answers (1)

eyllanesc
eyllanesc

Reputation: 244202

The problem is similar to the one in this post but with openlayers instead of openstreetmap, so the solution is to create a QWebEngineUrlRequestInterceptor that injects the Accept-Language header.

class Interceptor: public QWebEngineUrlRequestInterceptor{
public:
    using QWebEngineUrlRequestInterceptor::QWebEngineUrlRequestInterceptor;
    void interceptRequest(QWebEngineUrlRequestInfo & info){
        info.setHttpHeader("Accept-Language", "en-US,en;q=0.9,es;q=0.8,de;q=0.7");
    }
};

Interceptor *interceptor = new Interceptor(view);
view->page()->profile()->setUrlRequestInterceptor(interceptor);
view->load(QUrl::fromLocalFile("C:/TEST/test_webeng/openlayers.html"));

enter image description here

Upvotes: 1

Related Questions