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