MapQuickItem not visible in QML Map

Question

I want to draw a circle dynamically (through C++) on a QML Map, But depending on the the zoomLevel, the circle may not be visible. MapCircle does not have a zoomLevel property. So I am first creating a MapQuickItem and trying to put a MapCircle as its sourceItem. in QML I have

function add_point(lat, lng){
    var circle = Qt.createQmlObject('import QtLocation 5.3; MapCircle { }', map, "dynamic");
    circle.center = QtPositioning.coordinate(lat, lng);
    circle.radius = 5.0;
    circle.color = 'blue';
    circle.border.width = 1;
    var item = Qt.createQmlObject('import QtLocation 5.3; MapQuickItem{}', map, "dynamic");
    item.anchorPoint.x = 2.5;
    item.anchorPoint.y = 2.5;
    item.coordinate = QtPositioning.coordinate(lat, lng);
    item.sourceItem = circle;
    item.zoomLevel = 19.0
    map.addMapItem(item);
    map.points.push(item);
    return true;
}

If I just draw the MapCircle a circle is visible on the map, However with the above code nothing appears on screen on any zoomLevel, I have tried removing the zoomLevel property, but still nothing appears.

Answer 1

MapQuickItem is used to add standard QQuickItems to the map. While a MapCircle is a QQuickItem, it is not something you are supposed to put in there. If you want to add a circle to the map by mean of MapQuickItem, you should add a Rectangle as source item, with the appropriate radius. Both of the following approaches work

var item = Qt.createQmlObject('import QtQuick 2.7; import QtLocation 5.3; MapQuickItem{}', map, "dynamic");
item.anchorPoint = Qt.point(2.5,2.5)
item.coordinate = QtPositioning.coordinate(lat, lng);
item.zoomLevel = 10
var circle = Qt.createQmlObject('import QtQuick 2.7; Rectangle{ width: 32; height: 32; radius: 16}', map);
item.sourceItem = circle
map.addMapItem(item);

and

var item = Qt.createQmlObject('import QtQuick 2.7; import QtLocation 5.3; MapQuickItem{ sourceItem: Rectangle{ width: 32; height: 32; radius: 16}}', map, "dynamic");
item.anchorPoint = Qt.point(2.5,2.5)
item.coordinate = QtPositioning.coordinate(lat, lng);
item.zoomLevel = 10
map.addMapItem(item);

Keep in mind that the rectangle size means size in pixel. When you set zoomLevel to the MapQuickItem, it becomes pixels at that zoom level. Meaning that at zoom level 10 the rectangle will be 32 pixels wide. At zoom level 9 it will be 16 and so on. By the way, if you want to control the visibility depending on the zoom level, you should rather script the visible property. Something like:

item.visible: map.zoomLevel > 10