Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

QML Google Map Blur Effect



  • hi everyone, I want to blur a google map using QML blur effect. It happens when I try it on a image, but not on a dynamic object like a map, I guess. Is there anyone who can help me with this?



  • Hi,
    It's gaussian or fast blur?



  • @tacdin We may need more information. Are you using the QML Map/Location components or an embedded web page to access Google Maps. The first "works for me". Qt 5.15.2, MacOS, QML Positioning, OSM maps. I doubt the map provider would make any difference. Here's a code example.

    import QtQuick 2.15
    import QtQuick.Window 2.15
    import QtGraphicalEffects 1.15
    import QtLocation 5.15
    import QtPositioning 5.15
    
    Window {
        width: 640
        height: 480
        visible: true
        title: qsTr("Map Blur")
        Plugin {
            id: mapPlugin
            name: "osm"
            PluginParameter { name: "osm.mapping.highdpi_tiles"; value: true }
        }
        Map {
            id: map
            anchors.fill: parent
            plugin: mapPlugin
            center: QtPositioning.coordinate(52.0669, 0.47692)
            zoomLevel: 15.5
            visible: false
        }
        GaussianBlur {
            anchors.fill: map
            source: map
            radius: 20
            samples: radius * 2 + 1
        }
    }
    


  • Ofc provider make diffrence, others os are 100 years behind Apple in optymalization, so probobly TomTom works well :)
    Try https://doc.qt.io/qt-5/qml-qtgraphicaleffects-fastblur.html
    Mayby looks worse than gaussian, but its fast



  • Hi! I tried the Blur effects types. I experimented with Gaussian Blur. The result I got was slightly different. When I apply it on the map, there is an iteration. As in the image, the effect repeats 6 times.
    I added it as a link because the image size is large.

    https://www.hizliresim.com/mn1jrfb

    Here is the code block.

    import QtQuick 2.15
    import QtQuick.Window 2.15
    import QtGraphicalEffects 1.15
    import QtLocation 5.15
    import QtPositioning 5.15

    Map {
    id: _map

    gesture.acceptedGestures:   MapGestureArea.PinchGesture | MapGestureArea.PanGesture | MapGestureArea.FlickGesture
    gesture.flickDeceleration:  3000
    plugin:                     Plugin { name: "QGroundControl" }
    
    opacity:                    0.99
    

    Item {
    id: test
    width:1280
    height: 800

        Rectangle {
    
        id: rect
        anchors.centerIn: parent
        color:"grey"
        opacity: 0.6
        width: test.width*1/2
        height: test.height*1/2
    
        }
    
    
    
    }
    

    ShaderEffectSource {

    id: shader
    anchors.fill: test
    sourceItem: test
    sourceRect: Qt.rect(x,y,width,height)

    }

    GaussianBlur {
    radius: 80
    anchors.fill: test
    source: _map
    samples: 1 + radius * 2
    }

    readonly property real  maxZoomLevel: 20

Log in to reply