Google Map Markers and QML - Revision history

Hamishwillee: Hamishwillee - Bot update - Add ArticleMetaData

2012-07-23T07:44:07Z

Hamishwillee - Bot update - Add ArticleMetaData

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

2012-06-13T10:53:21Z

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

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

2012-02-15T05:37:18Z

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

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

2011-04-01T00:56:48Z

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

Hamishwillee: Added category Category:Maemo. (Adding Maemo to all Qt for Maemo topics in preparation for ontology change)

2011-03-31T05:29:32Z

Added category Category:Maemo. (Adding Maemo to all Qt for Maemo topics in preparation for ontology change)

Njzk2: Created page with 'Category:QtCategory:Qt for MaemoCategory:Qt for SymbianCategory:Qt MobilityCategory:Qt Quick This page is about using QML Map to rapidly create an application…'

2011-03-06T20:15:20Z

Created page with 'Category:Qt Category:Qt for Maemo Category:Qt for Symbian Category:Qt Mobility Category:Qt Quick This page is about using QML Map to rapidly create an application…'

New page

[[Category:Qt]][[Category:Qt for Maemo]][[Category:Qt for Symbian]][[Category:Qt Mobility]][[Category:Qt Quick]]
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, [http://www.velib.paris.fr/ Velib].

= Model =
The first XML service is found [http://www.velib.paris.fr/service/carto 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:
<code javascript>
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()"}
}
</code>
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:
<code javascript>
XmlListModel {
id: station
query: "/station"
XmlRole {name: "freeVal"; query: "free/string()"}
XmlRole {name: "availableVal"; query: "available/string()"}
}
</code>
This one does not have source, as the source depends on the number of the marker selected.

= Map =
This model can directly be used in the MyMap object, like this
<code javascript>

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 + "]"
}
}
</code>
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.

= 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.
<code javascript>
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)
}
}
}
}
</code>
"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:
<code javascript>
itemMapDelegate: ThumbItem {
onSelected: {
stationName = stations.get(index).name
station.source = "http://www.velib.paris.fr/service/stationdetails/" + stations.get(index).number
}
}
</code>
The "station" model now hold data about the station (free parking spots and available bikes).

= 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.
<code javascript>
Repeater {
model: station
delegate: Label {
text: stationName + "\nFree: " + freeVal + "\nAvailable: " + availableVal
}
}
</code>
Label being simply a QML component that displays a text.

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

[[Category:Code Examples]]

@@ Line 1: / Line 1: @@
 [[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.
@@ Line 111: / Line 133: @@
 And voilà. Less than 50 lines for the main files.
-  [[Category:Code Examples]][[Category:MeeGo Harmattan]] [[Category:Symbian]]
+  [[Category:Code Snippet]][[Category:MeeGo Harmattan]] [[Category:Symbian]]

← Older revision		Revision as of 10:53, 13 June 2012
Line 111:		Line 111:
	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 Examples]][[Category:MeeGo Harmattan]] [[Category:Symbian]]

← Older revision		Revision as of 05:37, 15 February 2012
Line 111:		Line 111:
	And voilà. Less than 50 lines for the main files.		And voilà. Less than 50 lines for the main files.

−	[[Category:Code Examples]]	+	[[Category:Code Examples]][[Category:MeeGo]] [[Category:Symbian]]

← Older revision		Revision as of 05:29, 31 March 2011
Line 111:		Line 111:
	And voilà. Less than 50 lines for the main files.		And voilà. Less than 50 lines for the main files.

−	[[Category:Code Examples]]	+	[[Category:Code Examples]] [[Category:Maemo]]