×
Namespaces

Variants
Actions
(Difference between revisions)

QML Map extension

From Nokia Developer Wiki
Jump to: navigation, search
hamishwillee (Talk | contribs)
m (Hamishwillee - Addition to article of: Category:MeeGo Category:Symbian. (Add platform categories))
hamishwillee (Talk | contribs)
m (Hamishwillee - Bot update - Add ArticleMetaData)
 
(One intermediate revision by one user not shown)
Line 1: Line 1:
 +
{{ArticleMetaData <!-- v1.2 -->
 +
|sourcecode= <!-- Link to example source code e.g. [[Media:The Code Example ZIP.zip]] -->
 +
|installfile= <!-- Link to installation file (e.g. [[Media:The Installation File.sis]]) -->
 +
|devices= <!-- Devices tested against - e.g. ''devices=Nokia 6131 NFC, Nokia C7-00'') -->
 +
|sdk= <!-- SDK(s) built and tested against (e.g. [http://linktosdkdownload/ Qt SDK 1.1.4]) -->
 +
|platform= <!-- Compatible platforms - e.g. Symbian^1 and later, Qt 4.6 and later -->
 +
|devicecompatability= <!-- Compatible devices e.g.: All* (must have internal GPS) -->
 +
|dependencies= <!-- Any other/external dependencies e.g.: Google Maps Api v1.0 -->
 +
|signing= <!-- Signing requirements - empty or one of: Self-Signed, DevCert, Manufacturer -->
 +
|capabilities= <!-- Capabilities required by the article/code example (e.g. Location, NetworkServices. -->
 +
|keywords= <!-- APIs, classes and methods (e.g. QSystemScreenSaver, QList, CBase -->
 +
|language= <!-- Language category code for non-English topics - e.g. Lang-Chinese -->
 +
|translated-by= <!-- [[User:XXXX]] -->
 +
|translated-from-title= <!-- Title only -->
 +
|translated-from-id= <!-- Id of translated revision -->
 +
|review-by= <!-- After re-review: [[User:username]] -->
 +
|review-timestamp= <!-- After re-review: YYYYMMDD -->
 +
|update-by= <!-- After significant update: [[User:username]]-->
 +
|update-timestamp= <!-- After significant update: YYYYMMDD -->
 +
|creationdate= 20110221
 +
|author= [[User:Njzk2]]
 +
}}
 
[[Category:Qt]][[Category:Qt Mobility]][[Category:Qt Quick]]
 
[[Category:Qt]][[Category:Qt Mobility]][[Category:Qt Quick]]
 
This page describes an extension to Qt Mobility QML Map element.
 
This page describes an extension to Qt Mobility QML Map element.
Line 188: Line 210:
 
</code>
 
</code>
 
The zoom button is a simple rectangle.
 
The zoom button is a simple rectangle.
[[Category:Code_Examples]][[Category:MeeGo]] [[Category:Symbian]]
+
[[Category:Code Snippet]][[Category:MeeGo Harmattan]] [[Category:Symbian]]

Latest revision as of 15:13, 24 July 2012

Article Metadata
Compatibility
Platform(s):
Symbian
Article
Created: njzk2 (21 Feb 2011)
Last edited: hamishwillee (24 Jul 2012)

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

Contents

[edit] Features

[edit] 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.

[edit] Zooming

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

[edit] 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.

[edit] 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.

[edit] Delegate

A basic delegate may look like:

Item {
id: element
signal selected(int index)
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")
selected(index)
}
}
}
}

In this example, the items in the model have a coord element that contains latitude and longitude.

[edit] Use example

Rectangle {
id: root
width: 360
height: 360
ListModel {
id: photosModel
}
MyMap {
id: photosMap
opacity: 0
itemMapDelegate: ThumbItem {}
itemsModel: photosModel
onViewportChanged: loadImages(from, to)
}
}

All you need is a loadImages method that puts images in the photosModel.

[edit] Code

Here is the code for the map

import QtQuick 1.0
import QtMobility.location 1.1
 
Item {
id: myMapRoot
property Component 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
}
}
}

The zoom button is a simple rectangle.

This page was last modified on 24 July 2012, at 15:13.
90 page views in the last 30 days.

Was this page helpful?

Your feedback about this content is important. Let us know what you think.

 

Thank you!

We appreciate your feedback.

×