How to auto zoom the Qml Map to fit two MapQuickItems

Question

I have Qt Qml application where I need to display the map with two MapQuickItems. One is taxi another is customer. I want to display both of them inside the map. And I want the map to automatically zoomin or zoomout as the taxi approaches the customer. There is no routing or gestures involved. User should not be able to interact with the map.

I tried to play around with map.center property. But it didn't work well when the taxi is far away.

import QtQuick 2.12
import QtQuick.Window 2.12
import QtPositioning 5.12
import QtLocation 5.5

Rectangle
{
    id: mapWindow
    visible: false
    property real taxiLatitude: 0
    property real taxiLongitude: 0
    property real customerLatitude: 0
    property real customerLongitude: 0

    Plugin
    {
        id: googleMap
        name: "googlemaps"
    }

    Map
    {
        id: map
        anchors.fill: mapWindow
        plugin: googleMap
        center: QtPositioning.coordinate(taxiLatitude, taxiLongitude) //positionSource.position.coordinate
        zoomLevel: 17
        copyrightsVisible: true

        MapQuickItem
        {
            id: markerTaxi
            anchorPoint.x: imageHuman.width/4
            anchorPoint.y: imageHuman.height
            coordinate: QtPositioning.coordinate(customerLatitude, taxiLongitude)
            sourceItem: Image
            {
                id: imageHuman
                width: 40
                height: 40
                source: "qrc:/Images/extrapics/humanIcon.png"
            }
        }

        MapQuickItem
        {
            id: markerCustomer
            anchorPoint.x: image.width/4
            anchorPoint.y: image.height
            coordinate: QtPositioning.coordinate(taxiLatitude, taxiLongitude)
            sourceItem: Image
            {
                id: image
                width: 40
                height: 40
                source: "qrc:/Images/extrapics/point.png"
            }
        }
    }
}

I need to fit both taxi and customer inside the map and map should auto zoom in as the taxi approaches the customer.

I tried to set the visible region like below. But it dint help. It shows a different region (North america). But the region which I set is on completely different continet.

visibleRegion: QtPositioning.rectangle(QtPositioning.coordinate(12.921527, 75.092244), QtPositioning.coordinate(12.726949, 75.014545))

Answer 1

Use a Timer to update the map using fitViewportToMapItems()

import QtQuick 2.12
import QtQuick.Window 2.12
import QtPositioning 5.12
import QtLocation 5.5

Rectangle
{
    id: mapWindow
    visible: false
    property real taxiLatitude: 0
    property real taxiLongitude: 0
    property real customerLatitude: 0
    property real customerLongitude: 0

    Plugin
    {
        id: googleMap
        name: "googlemaps"
    }

    Timer
    {
        id: mapRefreshtimer
        running: true
        interval: 2000
        repeat: true
        onTriggered:
        {
            map.fitViewportToMapItems()
        }
    }

    Map
    {
        id: map
        anchors.fill: mapWindow
        plugin: googleMap

        MapQuickItem
        {
            id: markerTaxi
            anchorPoint.x: imageHuman.width/4
            anchorPoint.y: imageHuman.height
            coordinate: QtPositioning.coordinate(customerLatitude, taxiLongitude)
            visible: true
            sourceItem: Image
            {
                id: imageHuman
                width: 40
                height: 40
                source: "qrc:/Images/extrapics/humanIcon.png"
            }
        }

        MapQuickItem
        {
            id: markerCustomer
            anchorPoint.x: image.width/4
            anchorPoint.y: image.height
            coordinate: QtPositioning.coordinate(taxiLatitude, taxiLongitude)
            visible: true
            sourceItem: Image
            {
                id: image
                width: 40
                height: 40
                source: "qrc:/Images/extrapics/point.png"
            }
        }

    }
}