Can't get width of MapCircle before changing zoom - qt

Question

I need to get width of MapCircle in my Map element, because I need to place MapQuickItem above MapCircle, and I can do it with toCoordinate() function on Map element. But I can't get width of MapCircle before I change zoom, but after what, there is correct number.
I can't get width even when I use mapReady property of Map
onMapReadyChanged: {
if (mapReady){
console.log(mapReady+" width = "+testCircle.width)
}
}
Even though width and height of rectangle inside MapQuickItem are equal to width of MapCircle.
import QtQuick 2.0
import QtQuick.Window 2.0
import QtLocation 5.6
import QtPositioning 5.6
Window {
width: 1200
height: 1200
visible: true
Plugin {
id: mapPlugin
name: "esri" // "mapboxgl", "esri", ...
}
Map {
id: _map
anchors.fill: parent
plugin: mapPlugin
center: QtPositioning.coordinate(59.91, 28.6)
zoomLevel: 9
Component.onCompleted: {
console.log("on completed "+testCircle.width)
}
MapCircle {
id: testCircle
center: parent.center
radius: 50000.0
color: '#8000FF00'
border.width: 3
border.color: "orange"
}
MapQuickItem {
id: testItem
coordinate: parent.center
sourceItem: Rectangle {
id:testR
width: testCircle.width
height: width
color: "pink"
}
}
onMapReadyChanged: {
if (mapReady){
console.log(mapReady+" width = "+testCircle.width)
}
}
onZoomLevelChanged: {
console.log(" width = "+testCircle.width+" "+testCircle.implicitWidth)
}
}
}
How can I get right result before changing zoom? Is it possible? Here is console output of this code before zoom
qml: on completed 0
qml: true width = 0
but after zooming Map there is fine result
qml: width = 658.222013399468 0
qml: width = 605.3187684634481 0
I can't get why I don't receive correct number before zooming, even though when I assign sizes of rectangle in MapQuickItem equal to width of mapCircle, there is correct picture in Map.

Answer 1

If your goal is to place the MapQuickItem on top of the MapCircle it is only necessary to set the appropriate offset:
// ...
MapQuickItem {
id: testItem
coordinate: parent.center
sourceItem: Rectangle {
id:testR
x: - width/2 // <---
y: - height/2 // <---
width: testCircle.width
height: width
color: "pink"
}
}
// ...