QML Google Map Blur Effect

tacdin

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?

qtprogrammer123

Hi,
It's gaussian or fast blur?

kindid

@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
    }
}

qtprogrammer123

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

tacdin

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