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