Important: Please read the Qt Code of Conduct -

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 = 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?


    #include <QGuiApplication>
    #include <QQmlApplicationEngine>
    #include <QtWebEngine/qtwebengineglobal.h>
    int main(int argc, char *argv[])
        QGuiApplication app(argc, argv);
        QQmlApplicationEngine engine;
        if (engine.rootObjects().isEmpty())
            return -1;
        return app.exec();


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


    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"


        <title>EMnet - GeoCoding</title>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script src="" integrity="sha512-lInM/apFSqyy1o6s89K4iQUKg6ppXEgsVxT35HbzUupEVRh2Eu9Wdl4tHj7dZO0s1uvplcYGmt3498TtHq+log==" crossorigin=""></script>
        <link rel="stylesheet" href="" integrity="sha512-M2wvCLH6DSRazYeZRIm1JnYyh22purTM+FDB5CsyxtQJYeKq83arPe5wgbNmcFXGqiSH2XR8dT/fJISVA1r/zQ==" crossorigin=""/>
    <div id="mapid" style="width: 100%; height: 100%;"></div>
    	var myMap ='mapid').setView([28.0986386,-80.6644167], 13);
    	L.tileLayer('{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
    		maxZoom: 18,
    		attribution: 'Map data &copy; <a href="">OpenStreetMap</a> contributors, ' +
    			'<a href="">CC-BY-SA</a>, ' +
    			'Imagery © <a href="">Mapbox</a>',
    		id: 'mapbox.streets'
    	// 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 =[28.0986386,-80.6644167],{radius:0, opacity:0}).addTo(myMap);
    	ModeShape = {polygon:1, circle:2};
    	// Change mode here
    	var modeShape =;
    	function onMapClick(e) {		
    		if (modeShape == ModeShape.polygon)
    			// Add coordinate to the polyline
    	myMap.on('click', onMapClick);
            mousedown: function (e) {
    			if (modeShape =={
    				// Temporary stop map from panning when mouse dragging
    				// Reset the location of the circle
    				isNewCircle = false;
    				// Register mouse move event to  change the circle radius
    				myMap.on('mousemove', function (e) {				  
    					var newRadius = myMap.distance(userDefinedCircle.getLatLng(),e.latlng);					
    		if (modeShape ==
    			// Unregister the mouse move event
    			// Enable panning when mouse dragging

  • 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?

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

  • 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

Log in to reply