MapItemView Transitions (QML) | Qt Location (original) (raw)

How to use transitions together with MapItemView.

MapItemView Transitions demonstrates how to use the Map item to render a map. It shows the minimum amount of code needed to display the map, and can be used as a basis for further experimentation.

Running the Example

To run the example from Qt Creator, open the Welcome mode and select the example from Examples. For more information, see Qt Creator: Tutorial: Build and run.

QML Code

In main.qml, two MapItemView elements are used, to add to the map the administrative districts for the Oslo region, and to add a marker upon long-press.

MapItemView { id: mivMarker

add: Transition {
    [NumberAnimation](qml-qtquick-numberanimation.html) {
        property: "slideIn"
        from: 50
        to: 0
        duration: 500
        easing.type: Easing.OutBounce
        easing.amplitude: 3.0
    }
}

remove: Transition {
    [NumberAnimation](qml-qtquick-numberanimation.html) {
        property: "opacity"
        to: 0.1
        duration: 50
    }
}

model: ListModel {
    id: markerModel
}
delegate: Component {
    [MapQuickItem](qml-qtlocation-mapquickitem.html) {
        coordinate: QtPositioning.coordinate(latitude, longitude)
        anchorPoint: Qt.point(e1.width * 0.5, e1.height + slideIn)
        property [real](qml-real.html) slideIn : 0
        sourceItem: Shape {
            id: e1
            vendorExtensionsEnabled: false
            width: 32
            height: 32
            visible: true

            transform: Scale {
                origin.y: e1.height * 0.5
                yScale: -1
            }

            [ShapePath](qml-qtquick-shapes-shapepath.html) {
                id: c_sp1
                strokeWidth: -1
                fillColor: Qt.rgba(1,0,1,1.0)

                property [real](qml-real.html) half: e1.width * 0.5
                property [real](qml-real.html) quarter: e1.width * 0.25
                property [point](qml-point.html) center: Qt.point(e1.x + e1.width * 0.5 , e1.y + e1.height * 0.5)

                property [point](qml-point.html) top: Qt.point(center.x, center.y - half )
                property [point](qml-point.html) bottomLeft: Qt.point(center.x - half, center.y + half )
                property [point](qml-point.html) bottomRight: Qt.point(center.x + half, center.y + half )

                startX: center.x;
                startY: center.y + half

                [PathLine](qml-qtquick-pathline.html) { x: c_sp1.bottomLeft.x; y: c_sp1.bottomLeft.y }
                [PathLine](qml-qtquick-pathline.html) { x: c_sp1.top.x; y: c_sp1.top.y }
                [PathLine](qml-qtquick-pathline.html) { x: c_sp1.bottomRight.x; y: c_sp1.bottomRight.y }
                [PathLine](qml-qtquick-pathline.html) { x: c_sp1.center.x; y: c_sp1.center.y + c_sp1.half }
            }
        }
    }
}

}

The marker view specifies both the add and the remove transition, to create a bouncing marker effect.

MapItemView { id: miv model: OsloListModel { id: osloListModel } add: Transition { NumberAnimation { property: "animationScale" from: 0.2 to: 1 duration: 800 easing.type: Easing.OutCubic } } delegate: Component { MapPolygon { function fromMercator(l, centroid) { var res = [] for (var i = 0; i < l.length; i++) { var vtx = l[i] var offset = Qt.point((vtx.x - centroid.x) * animationScale, (vtx.y - centroid.y) * animationScale) var pt = Qt.point(centroid.x + offset.x, centroid.y + offset.y) res.push( QtPositioning.mercatorToCoord(pt) ) } return res; }

        path: fromMercator(osloListModel.geometries[name+"_"+adminLevel]
                           , osloListModel.centroids[name+"_"+adminLevel] )
        color: ((adminLevel > 4) ? "lightsteelblue" : 'firebrick')
        property [real](qml-real.html) animationScale : 1
        opacity: ((adminLevel < 9) ? 0.1 : 0.8)
        visible: true
    }
}

}

The administrative districts view specifies only the add transition, to create a district growing effect.

Requirements

The example requires a working internet connection to download OpenStreetMap map tiles. An optional system proxy should be picked up automatically.

Example project @ code.qt.io

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