QML Map extension - Revision history

Hamishwillee: Hamishwillee - Bot update - Add ArticleMetaData

2012-07-24T12:13:54Z

Hamishwillee - Bot update - Add ArticleMetaData

Hamishwillee: Text replace - "Category:MeeGo" to "Category:MeeGo Harmattan"

2012-06-13T10:56:47Z

Text replace - "Category:MeeGo" to "Category:MeeGo Harmattan"

Hamishwillee: Hamishwillee - Addition to article of: Category:MeeGo Category:Symbian. (Add platform categories)

2012-02-15T05:49:34Z

Hamishwillee - Addition to article of: Category:MeeGo Category:Symbian. (Add platform categories)

Hamishwillee: Remove Qt for Maemo and Qt for Symbian categories (only need specifier if there is some platform specific behaviour)

2011-03-31T09:43:56Z

Remove Qt for Maemo and Qt for Symbian categories (only need specifier if there is some platform specific behaviour)

Njzk2 at 17:45, 25 February 2011

2011-02-25T17:45:39Z

Njzk2 at 14:16, 21 February 2011

2011-02-21T14:16:16Z

Njzk2: Created page with 'Category:QtCategory:Qt MobilityCategory:Qt Quick This page describes an extension to Qt Mobility QML Map element. It features map scrolling (flicking), zooming, landm…'

2011-02-21T14:12:58Z

Created page with 'Category:Qt Category:Qt Mobility Category:Qt Quick This page describes an extension to Qt Mobility QML Map element. It features map scrolling (flicking), zooming, landm…'

New page

[[Category:Qt]][[Category:Qt Mobility]][[Category:Qt Quick]]
This page describes an extension to Qt Mobility QML Map element.
It features map scrolling (flicking), zooming, landmark move-along.

= Features =
== Flicking ==
The trick here is to use a Flickable on top of the Map.

The Flickable is very large in order to avoid bouncing on the walls.

The movementEnded signal is connected to reseting the position in the Flickable to its center ''without moving the map'', which is obtained by locking the access to the panMap function.

The Flickable movements are connected to the map pan function.

== Zooming ==
Zooming is rather easy. Simply adding two buttons, connecting a MouseArea to the Map zoom property.

== Landmark move-along ==
As of now, I could not find a trivial way to have items drawn on the Map move as the map is panned. So, here is the trick used: the model used in the repeater is reset as the map is moved around.

Also, the map is displayed with a margin. This margin is used to make sure the elements from the list are displayed when they are slightly out of the screen (an item drawn out of its parent is not drawn). An item slightly out of the screen may still need to be drawn if the icon is large.

= Use =
3 elements are mandatory to use this map:
* a delegate to draw the items on the map
* a model for the delegate to be repeated on
* a receiver for the signal viewPortChanged, which is called when the zoom changes and when a movement on the map is complete. This signal is useful if your model contains elements based on the viewport.
== Delegate ==
A basic delegate may look like:
<code javascript>
Component {
Item {
id: element
x: map.toScreenPosition(coord).x + map.anchors.topMargin
y: map.toScreenPosition(coord).y + map.anchors.leftMargin
Image {
id: bg
anchors.horizontalCenter: parent.left
anchors.bottom: parent.top
source: "images/bg.png"
MouseArea {
anchors.fill: parent
onClicked: {
console.log("Landmark clicked")
}
}
}
}
}
</code>
In this example, the items in the model have a coord element that contains latitude and longitude.

== Use example ==
<code javascript>
Rectangle {
id: root
width: 360
height: 360
ListModel {
id: photosModel
}
MyMap {
id: photosMap
opacity: 0
itemMapDelegate: ThumbItem {}
itemsModel: photosModel
onViewportChanged: loadImages(from, to)
}
}
</code>
All you need is a loadImages method that puts images in the photosModel.

= Code =
Here is the code for the map
<code javascript>
import QtQuick 1.0
import QtMobility.location 1.1

Item {
id: myMapRoot
property variant itemMapDelegate
property variant itemsModel
signal viewportChanged(variant from, variant to)
anchors.fill: parent
onOpacityChanged: {
if (opacity == 1) {
updateViewport();
}
}
function updateViewport() {
viewportChanged(
map.toCoordinate(Qt.point(-map.anchors.leftMargin,-map.anchors.topMargin)),
map.toCoordinate(Qt.point(map.size.width + map.anchors.rightMargin,
map.size.height + map.anchors.bottomMargin)))
}

PositionSource {
id: me
active: true
updateInterval: 1000
onPositionChanged: console.log(position.coordinate)
}
Map {
id: map
anchors.fill: parent
anchors.margins: -80
zoomLevel: 4

plugin: Plugin { name : "nokia" }
center: me.position.coordinate

onZoomLevelChanged: {
myMapRoot.updateViewport()
}
onCenterChanged: {
var tmp = pinpointView.model
pinpointView.model = null
pinpointView.model = tmp
}
onSizeChanged: {
var tmp = pinpointView.model
pinpointView.model = null
pinpointView.model = tmp
}
}
Flickable {
id: flickable
anchors.fill: parent
contentWidth: 8000
contentHeight: 8000

Component.onCompleted: setCenter()
onMovementEnded: {
setCenter()
myMapRoot.updateViewport()
}
function setCenter() {
lock = true
contentX = contentWidth / 2
contentY = contentHeight / 2
lock = false
prevX = contentX
prevY = contentY
}

onContentXChanged: panMap()
onContentYChanged: panMap()
property double prevX: 0
property double prevY: 0
property bool lock: false
function panMap() {
if (lock) return
map.pan(contentX - prevX, contentY - prevY)
prevX = contentX
prevY = contentY
}
}
ZoomButton {
id: plus
value: "+"
}
ZoomButton {
id: minus
value: "-"
anchors.right: plus.left
}
MouseArea {
anchors.fill: plus
onClicked: {
map.zoomLevel += 1
}
}
MouseArea {
anchors.fill: minus
onClicked: {
map.zoomLevel -= 1
}
}
Item {
id: pinpointViewContainer
Repeater {
id: pinpointView
model: itemsModel
delegate: itemMapDelegate
}
}
}
</code>
The zoom button is a simple rectangle.

@@ Line 1: / Line 1: @@
 [[Category:Qt]][[Category:Qt Mobility]][[Category:Qt Quick]]
 This page describes an extension to Qt Mobility QML Map element.
@@ Line 188: / Line 210: @@
 </code>
 The zoom button is a simple rectangle.
-[[Category:Code_Examples]][[Category:MeeGo Harmattan]] [[Category:Symbian]]
+[[Category:Code Snippet]][[Category:MeeGo Harmattan]] [[Category:Symbian]]

@@ Line 188: / Line 188: @@
 </code>
 The zoom button is a simple rectangle.
-[[Category:Code_Examples]][[Category:MeeGo]] [[Category:Symbian]]
+[[Category:Code_Examples]][[Category:MeeGo Harmattan]] [[Category:Symbian]]

@@ Line 188: / Line 188: @@
 </code>
 The zoom button is a simple rectangle.
-[[Category:Code_Examples]]
+[[Category:Code_Examples]][[Category:MeeGo]] [[Category:Symbian]]

@@ Line 29: / Line 29: @@
 A basic delegate may look like:
 <code javascript>
-Component {
+Item {
-    Item {
+    id: element
-        id: element
+    signal selected(int index)
-        x: map.toScreenPosition(coord).x + map.anchors.topMargin
+    x: map.toScreenPosition(coord).x + map.anchors.topMargin
-        y: map.toScreenPosition(coord).y + map.anchors.leftMargin
+    y: map.toScreenPosition(coord).y + map.anchors.leftMargin
-        Image {
+    Image {
-            id: bg
+        id: bg
-            anchors.horizontalCenter: parent.left
+        anchors.horizontalCenter: parent.left
-            anchors.bottom: parent.top
+        anchors.bottom: parent.top
-            source: "images/bg.png"
+        source: "images/bg.png"
-            MouseArea {
+        MouseArea {
-                anchors.fill: parent
+            anchors.fill: parent
-                onClicked: {
+            onClicked: {
-                    console.log("Landmark clicked")
+                console.log("Landmark clicked")
+                 selected(index)
+             }
+         }
@@ Line 79: / Line 79: @@
 Item {
      id: myMapRoot
-     property variant itemMapDelegate
+     property Component itemMapDelegate
      property variant itemsModel
      signal viewportChanged(variant from, variant to)