Blocked Javascript in QWebView and WebView (QML)



  • Hello,
    I have tried to render HTML-Code with Javascript in QML. It should show a map from Openstreetmap(local file).
    The problem I am facing now is that in Qt (QWebView) the map isn't shown but the clear button is shown. In QML the map is shown but when I click the clear button nothing happens. the clear button should clear start and destination point from the map, which added via mouse click. Does someone know if there are any blocked functionalities from Javascript in Qt and QML ? I tried same example in Google Chrome and Safari and it works fine. I am using Qt-5.4.0 on OS X 10.9.5 (64 Bit).

    The following HTML-Code is not working correctly in WebView and QWebView:

    <html>
      <head>
      <title>ol3 pgRouting client</title>
      <meta charset="utf-8">
      <link href="ol3/ol.css" rel="stylesheet">
      <style>
      #map {
        width: 400px;
        height: 400px;
      }
      </style>
      </head>
      <body>
      <div id="map"></div>
    <button id="clear">clear</button>
      <script src="http://openlayers.org/en/v3.0.0/build/ol.js"></script>
      <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: [-13657275.569447909, 5699392.057118396],
          zoom: 10
        }),
        controls: ol.control.defaults({
          attributionOptions: {
            collapsible: false
          }
        })
      });
    
    map.getView().getCenter();
    map.getView().setCenter([-29686, 6700403]);
    
    
    var params = {
      LAYERS: 'pgrouting:pgrouting',
      FORMAT: 'image/png'
    };
    
    // The "start" and "destination" features.
    var startPoint = new ol.Feature();
    var destPoint = new ol.Feature();
    
    // The vector layer used to display the "start" and "destination" features.
    var vectorLayer = new ol.layer.Vector({
      source: new ol.source.Vector({
        features: [startPoint, destPoint]
      })
    });
    map.addLayer(vectorLayer);
    
    // A transform function to convert coordinates from EPSG:3857
    // to EPSG:4326.
    var transform = ol.proj.getTransform('EPSG:3857', 'EPSG:4326');
    
    // Register a map click listener.
    map.on('click', function(event) {
      if (startPoint.getGeometry() == null) {
        // First click.
        startPoint.setGeometry(new ol.geom.Point(event.coordinate));
      } else if (destPoint.getGeometry() == null) {
        // Second click.
        destPoint.setGeometry(new ol.geom.Point(event.coordinate));
        // Transform the coordinates from the map projection (EPSG:3857)
        // to the server projection (EPSG:4326).
        var startCoord = transform(startPoint.getGeometry().getCoordinates());
        var destCoord = transform(destPoint.getGeometry().getCoordinates());
        var viewparams = [
          'x1:' + startCoord[0], 'y1:' + startCoord[1],
          'x2:' + destCoord[0], 'y2:' + destCoord[1]
        ];
        params.viewparams = viewparams.join(';');
        result = new ol.layer.Image({
          source: new ol.source.ImageWMS({
            url: 'http://pgrouting.org/geoserver/pgrouting/wms',
            params: params
          })
        });
        map.addLayer(result);
      }
    });
    
    
    
      </script>
      </body>
    </html>
    

    This is how I load HTML in QWebView:

    #include "mainwindow.h"
    #include "ui_mainwindow.h"
    
    
    MainWindow::MainWindow(QWidget *parent) :
        QMainWindow(parent),
        ui(new Ui::MainWindow)
    {
        m_pWebView = new QWebView(this);
        //set position and size
        m_pWebView->setGeometry(0,0,800,800);
        m_pWebView->load(QUrl("file:///Users/nenadbiresev/Documents/ol3/ol3.html"));
    
    }
    
    MainWindow::~MainWindow()
    {
        delete ui;
    }
    

    This is how I load HTML in QML:

    import QtQuick 2.4
    import QtQuick.Controls 1.3
    import QtQuick.Window 2.2
    import QtQuick.Dialogs 1.2
    import QtWebKit 3.0
    ApplicationWindow {
        title: qsTr("Hello World")
        width: 800
        height: 800
        visible: true
    
        WebView {
            id: webView
            anchors.fill: parent
            url: "file:///Users/nenadbiresev/Documents/ol3/ol3.html"
        }
    }
    

    Regards
    Gram


Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.