QML: Draw geofence area on QML Map - dictionary

Question

Any ideas how to draw custom geofence area in QML (Qt Location module) similar to this:
Something similar to MapCircle or MapPolygon but filled outside of the region? And have custom filling pattern?

Answer 1

You probably can play with one of MapItems, for example MapQuickItem allows you put any QML item inside, for example I use Canvas for that:
Plugin {
id: mapPlugin
name: "osm"
}
Map {
id: map
anchors.fill: parent
plugin: mapPlugin
center: QtPositioning.coordinate(59.91, 10.75)
zoomLevel: 14
MapQuickItem {
id: marker
anchorPoint.x: image.width / 2
anchorPoint.y: image.height / 2
coordinate: map.center
sourceItem: Canvas {
id: image
width: map.width
height: map.height
onPaint: {
var ctx = getContext("2d");
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(image.width, 0);
ctx.lineTo(image.width, image.height);
ctx.lineTo(0, image.height);
ctx.lineTo(0, 0);
ctx.moveTo(image.width/2 + 50, image.height/2);
ctx.arc(image.width/2, image.height/2, 50, 0, 2 * Math.PI,0, true);
ctx.closePath();
ctx.fillStyle = Qt.rgba(1.0, 0, 0, 0.5);
ctx.strokeStyle = "red"
ctx.lineWidth = 10;
ctx.fill();
ctx.stroke();
}
}
}
}
Pay attention, the arc's counterclockwise is true to make a hole.
In the same way you can add images etc. But in a real project I would use some custom QQuickItem based item, just for better performance.