MapItemGroup QML Type | Qt Location 5.15.19 (original) (raw)

The MapItemGroup type is a container for map items. More...

Import Statement: import QtLocation 5.15
Since: QtLocation 5.9

Detailed Description

Its purpose is to enable code modularization by allowing the usage of qml files containing map elements related to each other, and the associated bindings.

Note: The release of this API with Qt 5.9 is a Technology Preview.

Example Usage

The following snippet shows how to use a MapItemGroup to create a MapCircle, centered at the coordinate (63, -18) with a radius of 100km, filled in red, surrounded by an ondulated green border, both contained in a semitransparent blue circle with a MouseArea that moves the whole group. This group is defined in a separate file named PolygonGroup.qml:

import QtQuick 2.4 import QtPositioning 5.6 import QtLocation 5.9

MapItemGroup { id: itemGroup property alias position: mainCircle.center property var radius: 100 * 1000 property var borderHeightPct : 0.3

MapCircle {
    id: mainCircle
    center : [QtPositioning](qml-qtpositioning-qtpositioning.html).coordinate(40, 0)
    radius: itemGroup.radius * (1.0 + borderHeightPct)
    opacity: 0.05
    visible: true
    color: 'blue'

    MouseArea{
        anchors.fill: parent
        drag.target: parent
        id: maItemGroup
    }
}

MapCircle {
    id: groupCircle
    center: itemGroup.position
    radius: itemGroup.radius
    color: 'crimson'

    onCenterChanged: {
        groupPolyline.populateBorder();
    }
}

MapPolyline {
    id: groupPolyline
    line.color: 'green'
    line.width: 3

    function populateBorder() {
        groupPolyline.path = [] // clearing the path
        var waveLength = 8.0;
        var waveAmplitude = groupCircle.radius * borderHeightPct;
        for (var i=0; i <= 360; i++) {
            var wavePhase = (i/360.0 * 2.0 * Math.PI )* waveLength
            var waveHeight = (Math.cos(wavePhase) + 1.0) / 2.0
            groupPolyline.addCoordinate(groupCircle.center.atDistanceAndAzimuth(groupCircle.radius + waveAmplitude * waveHeight , i))
        }
    }

    Component.onCompleted: {
        populateBorder()
    }
}

}

PolygonGroup.qml is now a reusable component that can then be used in a Map as:

Map { id: map PolygonGroup { id: polygonGroup position: QtPositioning.coordinate(63,-18) } }

© 2025 The Qt Company Ltd. Documentation contributions included herein are the copyrights of their respective owners. The documentation provided herein is licensed under the terms of the GNU Free Documentation License version 1.3 as published by the Free Software Foundation. Qt and respective logos are trademarks of The Qt Company Ltd. in Finland and/or other countries worldwide. All other trademarks are property of their respective owners.