Zoom and Drag in Maps Android

Mariam Alshamsi

Hello everyone,

I am using Qt 6.8 for my Android Qt App with Gradle.

I am building an app with a full-screen map on a tablet, but I’m facing issues with smooth zooming and dragging.
Problems I'm Facing:

Zooming Issues: Initially, zooming out affected the entire screen, shrinking the map itself. I fixed this, but now zooming in and out isn’t smooth—it feels choppy and not natural.
Dragging Not Implemented Yet: I also haven’t implemented dragging (panning) yet, so I’d appreciate guidance on the best approach for that.

Here’s My Current Code:

Rectangle {
    id: homePage
    width: parent ? parent.width : Screen.width
    height: parent ? parent.height : Screen.height
    color: "white"

    Plugin {
        id: mapPlugin
        name: "osm"

        
    PluginParameter { name: "osm.mapping.host"; value: "https://a.tile.openstreetmap.fr/hot/" }
    }



    Map {
        id: map
        anchors.fill: parent
        plugin: mapPlugin
        zoomLevel: 15
        copyrightsVisible: false

     
        property real baseZoom: 15 
        property real lastPinchScale: 1.0 

        PinchHandler {
            target: null  

            onActiveChanged: {
                if (active) {
                    map.baseZoom = map.zoomLevel; starts
                    map.lastPinchScale = 1.0;  
                }
            }

            onScaleChanged: (scale) => {
                let scaleFactor = scale / map.lastPinchScale; 

                if (Math.abs(scaleFactor - 1) > 0.02) {
                    let newZoom = map.baseZoom * scale; 
                    map.zoomLevel = Math.max(1, Math.min(newZoom, 20));
                    map.lastPinchScale = scale;
                }
            }
        }
    }

}

osos11

This code works fine for me. I am using 6.5.3.

    Map {
        id: mapView
        anchors.fill: parent
        plugin: mapPlugin
        center: QtPositioning.coordinate(39.0, 32.0)
        zoomLevel: 25
        copyrightsVisible: true
        //Osm [0] street
        activeMapType: supportedMapTypes[0]

        PinchHandler {
            id: pinch
            target: null
            onScaleChanged: (delta) => {
               mapView.zoomLevel += Math.log2(delta)
               mapView.alignCoordinateToPoint(mapView.startCentroid, pinch.centroid.position)
            }
            onRotationChanged: (delta) => {
               mapView.bearing -= delta
               mapView.alignCoordinateToPoint(mapView.startCentroid, pinch.centroid.position)
            }
        }

        WheelHandler {
            id: wheel
            // workaround for QTBUG-87646 / QTBUG-112394 / QTBUG-112432:
            // Magic Mouse pretends to be a trackpad but doesn't work with PinchHandler
            // and we don't yet distinguish mice and trackpads on Wayland either
            acceptedDevices: Qt.platform.pluginName === "cocoa" || Qt.platform.pluginName === "wayland"
                             ? PointerDevice.Mouse | PointerDevice.TouchPad
                             : PointerDevice.Mouse
            rotationScale: 1/120
            property: "zoomLevel"
        }

        DragHandler {
            id:drag
            target: null
            //grabPermissions: DragHandler.CanTakeOverFromAnything

            onTranslationChanged:(delta) =>{
                mapView.pan(-delta.x, -delta.y)
            }
        }