Search code examples
qtgeolocationqmlqtlocationqt5.12

QML map zoom only verticaly


Does map in Qt have a property, so it doesn't move center if I move mouse cursor on random place on map and try to change zoom level with mouse wheel? Because on default, map zooms, but moves existing center towards mouse cursor location (example on picture below; if cursor is on shown position and we try to change zoom, geotag picture will move in arrow direction). I just need it to zoom straight up from designated center of map, regardless of mouse cursor location.

Map description: https://doc-snapshots.qt.io/qt5-5.9/qml-qtlocation-map.html

QML code

import QtQuick 2.0
import QtQuick.Window 2.0
import QtLocation 5.6
import QtPositioning 5.6

Item{
    id: itemControl
    objectName: "itemControl"
    width: 512
    height: 512
    visible: true

Plugin {
    id: mapPlugin
    PluginParameter { name: "osm.useragent"; value: "usermap" }
    name: "esri"
}

Map {
    id:map
    gesture.enabled: true
    gesture.acceptedGestures: MapGestureArea.PinchGesture | MapGestureArea.PanGesture
    objectName: "map"
    anchors.fill: parent
    bearing: 0
    width: 512
    height: 512
    plugin: mapPlugin
    center {
        latitude: 45.525180446
        longitude: 13.5575992170
    }
    zoomLevel: 15

    //If user doubleclicks on map update coordinates of pixel to coordinates on UI
    signal qmlSignalUpdateLat(string msg)
    signal qmlSignalUpdateLon(string msg)

    MouseArea
    {
        id: mousearea
        hoverEnabled: true
        anchors.fill: parent
        acceptedButtons: Qt.LeftButton
        onDoubleClicked: {
            map.center.latitude = map.toCoordinate(Qt.point(mouseX,mouseY)).latitude
            map.center.longitude = map.toCoordinate(Qt.point(mouseX,mouseY)).longitude
            map.qmlSignalUpdateLat(map.center.latitude)
            map.qmlSignalUpdateLon(map.center.longitude)
        }
    }

    function updateMap(lat,lon,bear){
        map.center.latitude = lat;
        map.center.longtitude = lon;
        map.bearing = bear;
    }

}
}

Example of cursor on screen and center movement


Solution

  • Probably there should be more elegant solutions, but here is your code simplified:

    import QtQuick 2.0
    import QtQuick.Window 2.0
    import QtLocation 5.6
    import QtPositioning 5.6
    
    Window {
        width: 512
        height: 512
        visible: true
        Plugin {
            id: mapPlugin
            PluginParameter { name: "osm.useragent"; value: "usermap" }
            name: "esri"
        }
        Location {
            // Define location that will be "center" of map
            id: mapCenter
            coordinate {
                latitude: 45.525180446
                longitude: 13.5575992170
            }
        }
        Map {
            id: map
            anchors.fill: parent
            plugin: mapPlugin
            center: mapCenter.coordinate
    
            onCenterChanged: {
                // As soon as map center changed -- we'll check if coordinates differs from our
                //   mapCenter coordinates and if so, set map center coordinates equal to mapCenter
                if (map.center != mapCenter.coordinate) {
                    map.center = mapCenter.coordinate
                }
            }
    
            MapCircle {
                // Circle just for ability to check if it zooms correctly
                center: mapCenter.coordinate
                radius: 500.0
                color: "green"
                border.width: 3
            }
        }
    }
    

    Main idea behind this is to take control over each change of map's center. In case if it changes -- check weather it equal to our center. If it is not equal to our desired center mapCenter -- we change it.

    As a result:

    Static map center example