QML Map Smooth Zooming using Buttons-CodePudding

I am trying to create a map of a small area. On this map I have 2 buttons, one is for zooming in and the other is for out. I have created 2 buttons and 1 loader, then connected these together to make it work. My code for buttons and loader:

Loader.qml

Loader {
    id: mapLoader
    
    source: "map.qml"

    function reload () {
        source = ""
        source = "map.qml"
        
        console.log("Map Updated")
    }
}

Buttons.qml

// This button zooms in 1 unit
// get_Zoomlevel() works on C  ; therefore, it isn'T affected from qml reloads.

Button {
    ...

    onClicked: {
        map.setZoomLevel(map.get_ZoomLevel()   1)
        mapLoader.reload()
    }

    ...
}

After all, it works as expected, I can zoom in and out easily. However, since the loader loads all the map components from scratch it takes a little longer for a normal and smooth user experience. Therefore, I am looking for a better way of loading or any other advice. Thanks in advance.

CodePudding user response：

I have found the answer and I want to share for the future. I thought that zoomLevel property of QML Map was only for reading, but I noticed I can also write; therefore, when I noticed it just becomes easy.

I created a variable,

property int zoomLv = 15 // default zoom level

and whenever I zoomed in/ out using buttons I just edited this variable instead of reloading the full map Item.

onClicked: {
    zoomLv  = 1
}