×
Namespaces

Variants
Actions
(Difference between revisions)

Google Map Markers and QML

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= 20110306
 +
|author= [[User:Njzk2]]
 +
}}
 
[[Category:Qt]][[Category:Qt Mobility]][[Category:Qt Quick]]
 
[[Category:Qt]][[Category:Qt Mobility]][[Category:Qt Quick]]
 
This page is about using QML Map to rapidly create an application that displays markers on the Map.
 
This page is about using QML Map to rapidly create an application that displays markers on the Map.
Line 111: Line 133:
 
And voilà. Less than 50 lines for the main files.
 
And voilà. Less than 50 lines for the main files.
  
  [[Category:Code Examples]][[Category:MeeGo]] [[Category:Symbian]]
+
  [[Category:Code Snippet]][[Category:MeeGo Harmattan]] [[Category:Symbian]]

Latest revision as of 10:44, 23 July 2012

Article Metadata
Compatibility
Platform(s):
Symbian
Article
Created: njzk2 (06 Mar 2011)
Last edited: hamishwillee (23 Jul 2012)

This page is about using QML Map to rapidly create an application that displays markers on the Map.

The QML Map element is very basic. Instead, I wrote an extension that is described here : QML Map extension.

Using this Map, it is easy to use an existing Google Map Marker XML service. For this example, I use the Paris bicycle rental service, Velib.

Contents

[edit] Model

The first XML service is found here. As you can see, it is simply a list of markers containing an id and coordinates. It references the 1000+ stations.

This is a typical example for using the XMLListModel. It goes like this:

    XmlListModel {
id: stations
source: "http://www.velib.paris.fr/service/carto"
XmlRole {name: "number"; query: "@number/string()"}
XmlRole {name: "name"; query: "@name/string()"}
XmlRole {name: "lat"; query: "@lat/string()"}
XmlRole {name: "lng"; query: "@lng/string()"}
}

One thing to notice: there is no query yet. The query is to be added dynamically later, to include a filter on the lat / lng values, in order to avoid displaying to much elements.

The second service is http://www.velib.paris.fr/service/stationdetails/ + number, the number being given by the first service. A second model uses the second service:

    XmlListModel {
id: station
query: "/station"
XmlRole {name: "freeVal"; query: "free/string()"}
XmlRole {name: "availableVal"; query: "available/string()"}
}

This one does not have source, as the source depends on the number of the marker selected.

[edit] Map

This model can directly be used in the MyMap object, like this

    MyMap {
anchors.fill: parent
id: stationsMap
opacity: 0
zoomLevel: 14
 
itemMapDelegate: // To be expained later
itemsModel: stations
onViewportChanged: {
stations.query = "/carto/markers/marker[@lat < " + from.latitude + " and @lat > " + to.latitude
+ " and @lng < " + to.longitude + " and @lng > " + from.longitude + "]"
}
}

Here again, pretty simple. As said earlier, the query is set when the viewport on the map changes. "from" and "to" are coordinates defining the corners of the viewport. The query filters the stations that are to be displayed.

[edit] Marker

The itemMapDelegate is a little more complex. It uses another QML object, ThumbItem, that basically draws an icon on the map, and call a signal when clicked.

Item {
signal selected(int index)
property variant coord: Coordinate {
latitude: lat
longitude: lng
}
x: map.toScreenPosition(coord).x + map.anchors.topMargin
y: map.toScreenPosition(coord).y + map.anchors.leftMargin
Image {
anchors.left: icon.left
anchors.bottom: parent.top
source: "thumb_velib_shadow.png"
}
Image {
id: icon
anchors.horizontalCenter: parent.left
anchors.bottom: parent.top
source: (name != stationName) ? "thumb_velib.png" : "thumb_velib_select.png"
MouseArea {
anchors.fill: parent
onClicked: {
selected(index)
}
}
}
}

"stationName" is a string defined in the main file.

The use of this object mostly need a function to receive the signal, so the definition of the itemMapDelegate is as follows:

        itemMapDelegate: ThumbItem {
onSelected: {
stationName = stations.get(index).name
station.source = "http://www.velib.paris.fr/service/stationdetails/" + stations.get(index).number
}
}

The "station" model now hold data about the station (free parking spots and available bikes).

[edit] Details of a station

The station model is used via a repeater. The point of using a repeater is that it disappears is the model is empty.

    Repeater {
model: station
delegate: Label {
text: stationName + "\nFree: " + freeVal + "\nAvailable: " + availableVal
}
}

Label being simply a QML component that displays a text.

And voilà. Less than 50 lines for the main files.

This page was last modified on 23 July 2012, at 10:44.
73 page views in the last 30 days.
×