MapItemView Transitions (QML)

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