While working on one of my current projects I came across the need for a map/geo browser.

From start, Qt Quick’s QML Map Element (using the nokia plugin) looked like the best option by a large margin and for all the good and sane reasons.

The problem is that the map element itself is quite simple/raw. At first I was expecting the Map Element to provide all the panning/pinch-zooming logic/functionality built in but it doesn’t.

Looking around for people with the same problem, I found this example from mlong (Huge thanks, that’s what got me started!). Seemed pretty good at first glance but I soon started missing some features. That example gives you the minimal shell around the Map QML element and is a great starting point.

The essential features I was still looking for were:

  1. Pinch-zooming centred at the pinch centre, not at the screen/map centre.
  2. While panning around, any minimal panning will trigger tile loading for the newly uncovered map regions (i.e. tiles adjacent to the on-screen map section are not pre-loaded as they could be)
  3. Zooming (on the original QML Map) is discrete (I confess this one was the one that bothered me more!). Your all human pinch gesture is translated to a dumb “Zoom In/Out” action just like old-style “+/-” buttons would..
  4. Flicking. The original QML Map’s  panning feels static and non-natural
  5. two-finger panning! Ok, this is a big one… As far as my world model goes, if while pinch-zooming(in/out) the user moves both fingers together, that means he’s panning/scrolling too! This is specially handy when you are looking for a place and you started the pinch gesture in a screen corner, it makes sense to bring that map section to the centre of the screen while zooming doesn’t it? It is a fact though that this is not a common feature in most mapping apps I tried (e.g. N8 and n950 Maps).
  6. Adapted to Portrait/Landscape nicely.

In short, the goal is that same pinch zooming behaviour that you get on the n950′s web browser.

As one can see it’s not just a “quick fix”. I kept thinking about this for a while and then it occurred to me that I could throw the Map element inside a Flickable and making the actual Map Element bigger than the screen. With this approach you’d solve the buffering/loading problems when panning and even get flickering for free. Then it also occurred me that I could use QML’s standard “scale” property to fill the gaps in between the different discrete zoom levels..

So, after quite a bit of hacking, I came up with this (.deb if you want to try it right away):

/*
*
* This file is part of the Push Snowboarding Project, More info at:
* www.pushsnowboading.com
*
* Author: Clovis Scotti <scotti@ieee.org>
*
* This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU General Public License as published by
* the Free Software Foundation, either version 3 of the License, or
* (at your option) any later version.
*
* See full license at http://www.gnu.org/licenses/gpl-3.0.html
*/
import QtQuick 1.1
import com.meego 1.0
import QtMobility.location 1.2
import Qt.labs.gestures 1.0
Flickable {
    id: mapFlickable
    property alias map: map
    property double defaultLatitude: 51.5111
    property double defaultLongitude: -0.0822898
    property int  defaultZoomLevel: 8
    /*
      zoomLevel gives powers of two.
     */
    property double centeredContentX: map.size.width*0.75
    property double centeredContentY: map.size.height*0.75
    contentWidth: map.size.width*2
    contentHeight: map.size.height*2
    anchors.fill: parent
    flickableDirection: Flickable.HorizontalAndVerticalFlick
    pressDelay: 500//doesn't really matter because I'm using the click
    //normal panning happens at this level
    //but if we're close to the end of the map, we need
    //to extend the panning to the map api.
    states: [
        State {
            name: "inLandscape"
            when: !rootWindow.inPortrait
            StateChangeScript {
                name: "updateToLandscape"
                script: updateSizes("inLandscape")
            }
        },
        State {
            name: "inPortrait"
            when: rootWindow.inPortrait
            StateChangeScript {
                name: "updateToPortrait"
                script: updateSizes("inPortrait")
            }
        }
    ]
    function updateSizes(newOrient)
    {
//        console.log("transformOrigin = " + map.transformOrigin)
//        console.log("now in " + newOrient)
        if(newOrient === "inPortrait") {
            map.size.width = map.smallSize
            map.size.height = map.bigSize-36*2
        } else {
            map.size.width = map.bigSize
            map.size.height = map.smallSize-36*2
        }
////        now in inPortrait
////        updateSizes, size = 970x1708
////                updateSizes, mapFlickable.size = 480x818 (status bar is 36px High)
////        now in inLandscape
////        updateSizes, size = 1708x970
////                updateSizes, mapFlickable.size = 854x444 (status bar is 36px high)
        map.pos.x = map.size.width/2
        map.pos.y = map.size.height/2
//        map.center.latitude = defaultLatitude
//        map.center.longitude = defaultLongitude
        centeredContentX = map.size.width*0.75
        centeredContentY = map.size.height*0.75
        contentX = centeredContentX
        contentY = centeredContentY
        contentWidth = map.size.width*2
        contentHeight = map.size.height*2
        map.transformOrigin = Item.Center
        map.scenter.x = map.width/2.0
        map.scenter.y = map.height/2.0
        console.log("tform at: " + map.scenter.x + " , " + map.scenter.y)
        updateViewPort()
    }
    Component.onCompleted: {
if(inPortrait) {
updateSizes("inPortrait")
} else {
updateSizes("inLandscape")
}
        contentX = centeredContentX
        contentY = centeredContentY
        map.pos.x = map.size.width/2
        map.pos.y = map.size.height/2
        flickDeceleration = 6000
        maximumFlickVelocity = 4000
    }
    function updateViewPort() {
        //one pass, pans map and updtes content(X|Y) accordingly
        map.pan((contentX-centeredContentX)/map.getSkale,(contentY-centeredContentY)/map.getSkale)
        //Division by scale rationale:
        /*
              content(X|Y)-centerContent(X|Y) distance is independent of scale.
              scale === 1:
                map's top-left corner sits on top of content(X,Y)
              scale === 1.5:
                map is stretched, its top-left corner sits way outside
              */
        contentX = centeredContentX
        contentY = centeredContentY
    }
    onMovementEnded: {
        updateViewPort()
    }
    Map {
        smooth: true
        id: map
        property int smallSize: 2*480
        property int bigSize: 2*854
        //this values are constant and independent from scaling.
        size.width: smallSize//mapFlickable.width*2//2*w;2*480//2*480//
        size.height: bigSize //mapFlickable.height*2//2*h;2*854//2*854//
        //this should stay constant at all times so that 2x zooming-in is possible
        //            pos.x: size.width/2
        //            pos.y: size.height/2
        //            scale: 0.1
        /*
              854 × 480
              */
        //            anchors.fill: parent
        zoomLevel: defaultZoomLevel
        plugin: Plugin { name: "nokia" }
        mapType: Map.StreetMap
        connectivityMode: Map.OfflineMode
        center: Coordinate {
            latitude: defaultLatitude
            longitude:defaultLongitude
        }
        property alias scenter: tform.origin
        property alias getSkale: tform.xScale
        function setSkale(v) {
            tform.xScale = v
            tform.yScale = v
        }
        transform: Scale{
            id: tform
        }
    }
    PinchArea {
        id: pincharea
        anchors.fill: parent
        property double initScale
        property double p1toC_X
        property double p1toC_Y
        property double contentInitX
        property double contentInitY
        onPinchStarted: {
            initScale = map.getSkale
            p1toC_X = (pinch.center.x-map.size.width)
            p1toC_Y = (pinch.center.y-map.size.height)
            contentInitX = mapFlickable.contentX
            contentInitY = mapFlickable.contentY
        }
        onPinchFinished: {
            mapFlickable.updateViewPort()
        }
        onPinchUpdated: {
            var contentDriftX = ((1-pinch.scale)*p1toC_X)
            var contentDriftY = ((1-pinch.scale)*p1toC_Y)
            //pinch.center.(x|y) drifts from to content, term in parenthesis offsets this back
            //startCenter does not drift.
            var tCenterDriftX = (pinch.center.x-(mapFlickable.contentX-contentInitX) - pinch.startCenter.x)
            var tCenterDriftY = (pinch.center.y-(mapFlickable.contentY-contentInitY) - pinch.startCenter.y)
            //test all two!
            mapFlickable.contentX = contentInitX-contentDriftX-tCenterDriftX
            mapFlickable.contentY = contentInitY-contentDriftY-tCenterDriftY
            if(initScale*pinch.scale <= 0.75 && map.zoomLevel > 2) {
                console.debug("zumUp")
                map.zoomLevel -= 1
                map.setSkale(1.5)
                initScale = map.getSkale/pinch.scale
                console.log("zoomUp to " + map.zoomLevel)
            } else if(initScale*pinch.scale >= 1.5 && map.zoomLevel < 18) {
                map.zoomLevel += 1
                map.setSkale(0.75)
                //map.scale 1.5 --> 0.75
                //initScale_i*pinch = 1.5(map.scale_0)
                //-> initScale_f*pinch = 0.75(map.scale_1)
                // |{pinch = x} initScale = map.scale_1/pinch
                initScale = map.getSkale/pinch.scale
                console.log("zoomDown to " + map.zoomLevel)
            } else {
                if(! ((map.zoomLevel == 18 && (initScale*pinch.scale) > 2.0)
                      || (map.zoomLevel == 2 && (initScale*pinch.scale) < 0.85))) {
                    map.setSkale(initScale*pinch.scale)
                }
            }
//            console.log("S = " + map.scale + ", L = " + map.zoomLevel + ", I = " + initScale + ", C = " + mapFlickable.contentX + " , " + mapFlickable.contentY)
        }
    }
    MouseArea {
        anchors.fill: parent
        onClicked: {
            var coord = map.toCoordinate(Qt.point(mouseX-map.pos.x,mouseY-map.pos.y))
            console.log("(long,lat) = (" + coord.latitude + " , " + coord.longitude + ")")
        }
        onPressed: {
            console.log("(delay) pressed at " + mouseX + " , " + mouseY)
        }
    }
}

The “continuous” zoom works by actually scaling the Map element (using transform: Scale{}..) until the next level of discrete zoom (Map.zoomLevel) is reached. The map would then switch to that new zoomLevel (upper or lower) and fix the Map scale accordingly.

If you look at the source you’ll notice that I’m not using the usual “Map.scale” property. I had to use the transform: Scale{..} . The problem is that when the screen orientation changes the whole map+flickable+content are changed too to fit it but then the scale transformOrigin (the point that stays in place when you scale something) wouldn’t change accordingly no matter how hard I tried; it would stay fixed to the first Item.Centre point where the scale was first changed.

The two finger zooming uses the pinch.center point and makes sure that point stays still in relation to the screen; for all pinchUpdates, the map is panned around to offset two types of drifts. The first is that the pinch.center coordinate will normally drift away due to the scaling point not being at the pinch.center, the second is due to the user actually moving the “pinch” around and thus moving the centre (this is what mekes the two-finger scrolling/panning work).

To use it, all you need is to include that Item in your page, like this:

Page {
    id: mapPage

//considering you saved the previous item in a file named: "ContinuousMap.qml"
    ContinuousMap {
        id: mapFrame

        //onMap landmarks can be added from cpp or directly here.
    }

//You can layer your own buttons/UI on top of the map by adding them here.
}
//....

Hope you find this helpful.