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.
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