QWebEngine and leaflet



  • I make a simple test application to draw polygon and circle. Code are below. The Test.html file works perfectly on Google Chrome; however, it does not do anything when I change modeShape = ModeShape.circle to draw a circle! The line myMap.dragging.disable() in the script seem not working in that mousedown event. It works outside of the event. Even so, the circle code still not working.

    The polygon works fine though... I tried to debug through Chrome developer mode (using --remote-debugging-port), but since the javascript run on Qt side, I cannot set a break point and see how it work. I have a feeling that the mouse down and mouse up event did not get registered with QWebEngine...Anyone has any idea?

    main.cpp

    #include <QGuiApplication>
    #include <QQmlApplicationEngine>
    #include <QtWebEngine/qtwebengineglobal.h>
    
    int main(int argc, char *argv[])
    {
        QGuiApplication app(argc, argv);
    
        QtWebEngine::initialize();
        QQmlApplicationEngine engine;
        engine.load(QUrl(QStringLiteral("qrc:/main.qml")));
        if (engine.rootObjects().isEmpty())
            return -1;
    
        return app.exec();
    }
    

    main.qml

    import QtQuick 2.6
    import QtQuick.Window 2.2
    
    Window {
        visible: true
        width: 640
        height: 480
        title: qsTr("Geo Location")
    
        MainForm {
            anchors.fill: parent
    
        }
    }
    

    MainForm.ui.qml

    import QtQuick 2.6
    import QtWebEngine 1.5
    import QtQuick.Layouts 1.3
    import QtQuick.Controls 2.0
    
    Rectangle {
    
        width: 500
        height: 360
    
        GridLayout {
            id: grid
            rows: 2
            anchors.fill: parent
    
            Button {
                Layout.row: 0
                Layout.preferredHeight: 50
                text: "hi"
                Layout.fillWidth: true
            }
    
            WebEngineView {
                id: webView
                Layout.fillWidth: true
                Layout.fillHeight: true
                Layout.row: 1
                url: "file:///debug/EMnetGeoCoding/Test.html"
                //url:"http://www.google.com"
            }
        }
    }
    

    Test.html

    <html>
    <head>
    	
        <title>EMnet - GeoCoding</title>
    
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script src="https://unpkg.com/leaflet@1.2.0/dist/leaflet.js" integrity="sha512-lInM/apFSqyy1o6s89K4iQUKg6ppXEgsVxT35HbzUupEVRh2Eu9Wdl4tHj7dZO0s1uvplcYGmt3498TtHq+log==" crossorigin=""></script>
        <link rel="stylesheet" href="https://unpkg.com/leaflet@1.2.0/dist/leaflet.css" integrity="sha512-M2wvCLH6DSRazYeZRIm1JnYyh22purTM+FDB5CsyxtQJYeKq83arPe5wgbNmcFXGqiSH2XR8dT/fJISVA1r/zQ==" crossorigin=""/>
    	    
    </head>
    <body>
    
    
    
    <div id="mapid" style="width: 100%; height: 100%;"></div>
    
    <script>
    	var myMap = L.map('mapid').setView([28.0986386,-80.6644167], 13);
    
    	L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
    	
    		maxZoom: 18,
    		attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' +
    			'<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
    			'Imagery © <a href="http://mapbox.com">Mapbox</a>',
    		id: 'mapbox.streets'
    	}).addTo(myMap);
    
    	// Create new empty polyline and add it to the map
    	var userDefinedPolygon = L.polygon([]).addTo(myMap);
    	
    	// Create new empty circle and add it to the map
    	var userDefinedCircle = L.circle([28.0986386,-80.6644167],{radius:0, opacity:0}).addTo(myMap);
    	
    	ModeShape = {polygon:1, circle:2};
    	
    	//
    	// Change mode here
    	//
    	var modeShape = ModeShape.circle;
    	
    	function onMapClick(e) {		
    		if (modeShape == ModeShape.polygon)
    		{		
    			// Add coordinate to the polyline
    			userDefinedPolygon.addLatLng(e.latlng);		
    		}
    	}
    	
    	myMap.on('click', onMapClick);
    	
    	myMap.on({
            mousedown: function (e) {
    			if (modeShape == ModeShape.circle){
    				//
    				// Temporary stop map from panning when mouse dragging
    				//
    				myMap.dragging.disable();
    				
    				//
    				// Reset the location of the circle
    				//
    				userDefinedCircle.setLatLng(e.latlng);
    				userDefinedCircle.setRadius(0);
    				
    				isNewCircle = false;
    				
    				//
    				// Register mouse move event to  change the circle radius
    				//
    				myMap.on('mousemove', function (e) {				  
    					var newRadius = myMap.distance(userDefinedCircle.getLatLng(),e.latlng);					
    					userDefinedCircle.setRadius(newRadius);
    				});
    			};
            }       
    	});
    	
    	myMap.on('mouseup',function(e){
    		if (modeShape == ModeShape.circle)
    		{
    			//
    			// Unregister the mouse move event
    			//
    			myMap.removeEventListener('mousemove');
    			
    			//
    			// Enable panning when mouse dragging
    			//
    			myMap.dragging.enable();
    		}
    	})
    </script>
    
    </body>
    </html>
    

  • Moderators

    Hi! I can reproduce that behavior. But mouse events work just fine (e.g. using jQuery). I googled "leaflet mousedown" and found a couple of bug reports from around 2014. So too me, this looks very much like a leaflet bug.



  • @Wieland said in QWebEngine and leaflet:

    "leaflet mousedown"

    Thank your for your response. I will research more on the mouse event of leaflet...
    However, the html file works perfectly on Chrome browser, and even better under IE11. Is this relate to the QWebEngine does not use latest Chromium? https://forum.qt.io/topic/82992/chromium-update


  • Moderators

    @TonyN Don't know. The bug report I saw was about IE. Maybe the "fix" checks for the user agent or something like that.


  • Moderators

    Oh, one more thing: just tested your HTML page with QupZilla browser, which is built on QWebEngine. And your page works with that. Version 2 of QupZilla uses QWebEngine. But I have an older version installed (1.8.9) which is based on Webkit.



  • @Wieland I just downloaded QupZilla version 2.2, and it behaves exactly like QWebEngine! (not working...)



  • Maybe this relates to this https://bugreports.qt.io/browse/QTBUG-43602


Log in to reply
 

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