MapItemView Transitions (QML) | Qt Location 5.15.18

- Qt 5.15
- Qt Location
- Qt Location Examples
- MapItemView Transitions (QML)
- Qt 5.15.18 Reference Documentation

# MapItemView Transitions (QML)

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, visit Building and Running an Example.

#### 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 {
                 property: "slideIn"
                 from: 50
                 to: 0
                 duration: 500
                 easing.type: Easing.OutBounce
                 easing.amplitude: 3.0
             }
         }

         remove: Transition {
             NumberAnimation {
                 property: "opacity"
                 to: 0.1
                 duration: 50
             }
         }

         model: ListModel {
             id: markerModel
         }
         delegate: Component {
             MapQuickItem {
                 coordinate: QtPositioning.coordinate(latitude, longitude)
                 anchorPoint: Qt.point(e1.width * 0.5, e1.height + slideIn)
                 property real 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 {
                         id: c_sp1
                         strokeWidth: -1
                         fillColor: Qt.rgba(1,0,1,1.0)

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

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

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

                         PathLine { x: c_sp1.bottomLeft.x; y: c_sp1.bottomLeft.y }
                         PathLine { x: c_sp1.top.x; y: c_sp1.top.y }
                         PathLine { x: c_sp1.bottomRight.x; y: c_sp1.bottomRight.y }
                         PathLine { 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 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