How to auto zoom the Qml Map to fit two MapQuickItems - qt

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