Introduction to the development of cartographic and geolocation mobile applications using QtMobility.location

This post participates in the competition “ Smart Phones for Smart Posts ”.

I have never had to participate in the development of cartographic and geolocation mobile applications, therefore this competition topic has become interesting to me both in terms of professional growth and in terms of ordinary human curiosity. Naturally, I suspected that QtQuick would greatly facilitate the task of studying the subject, but he again pleasantly surprised me with the elegant simplicity of solving the problem.


It's about QtMobility.location . By the way, the application shown in the screenshot contains less than a page of QML code and not a single line in C ++.

---

Probably, it’s worth starting according to tradition with the minimal “Hello, World !!!” applications. However, this "Hello, World !!!" slightly different from the usual. This is no longer the squeak of a newly hatched chick in a dark, unfriendly console, but rather his little victorious cry when flying to a neighboring yard. It looks like this (a screenshot of this application was given above):

1. import QtQuick 1.1
2. import QtMobility.location 1.2
3.  
4. Item {
5.     id: page
6.     anchors.fill: parent
7.     focus: true
8.  
9. TitleBar { id: titleBar; appname: "Hello World"; z: 5; width: parent.width; height: 40; opacity: 0.8 }
10.  
11. Rectangle {
12.         id: dataArea
13.         anchors.top: titleBar.bottom
14.         anchors.bottom: parent.bottom
15.         width: parent.width
16.         color: "#343434"
17.         Map {
18.             id: map
19.             plugin: Plugin {
20.                 name : "nokia"
21.             }
22.             anchors.fill: parent
23.             size.width: parent.width
24.             size.height: parent.height
25.             zoomLevel: 6
26.             center: Coordinate {latitude: 55; longitude: 73.12}
27.             mapType: Map.StreetMap
28.         } // map
29.     }
30. } // page

The main element that interests us here is, of course, the Map element . I will tell you about it in more detail. He is responsible for loading and displaying the map. The main work in this element is done by the plugin described by the Plugin element .

The center property - coordinates of the center of the displayed map. To “jump” to a new location on the map, you just need to change the values ​​of the center property of the Map element . You can move around the map not only abruptly, but also smoothly, using the map.pan (dx, dy) function . dx, dy - left / right shift and up \ down relative to the previous position.

zoomLevelresponsible for the scale of the map. By changing the value of this property, you can zoom in / out. The minimum and maximum values ​​are subtracted from the minimumZoomLevel and maximumZoomLevel properties .

mapType is a map type. The following types:
• Map.StreetMap
• Map.SatelliteMapDay
• Map.SatelliteMapNight
• Map.TerrainMap
• Map.HybridMap
• Map.TransitMap
• Map.GrayStreetMap
• Map.MobileStreetMap
• Map.MobileTerrainMap
• Map.MobileHybridMap
• Map.MobileTransitMap
• the Map .MobileGrayStreetMap
For proper display, the card type must, of course, be supported by the provider.

In the screenshot above, the map type Map.StreetMap is used .
In the screenshot below - Map.SatelliteMapDay :

---

Various elements, such as MapRectangle, MapCircle, MapText, MapImage, MapPolygon, MapPolyline , etc. can be added as child entities of the Map element to the map . These items will be displayed automatically at the specified position. They are very convenient to use to set various labels on the map, display routes, areas and everything that you might need. For example, this is how you can display text on a map in the position we need:

1. MapText {
2.                 id: texts
3.                 coordinate: Coordinate {latitude: 54.914; longitude: 73.313}
4.                 color: "yellow"
5.                 text: "Samarka"
6.                 font.pixelSize: 10
7. }

Or, like this - with a yellow circle you can mark the current user coordinates on the map:

1. MapCircle {
2.     id: userPosition
3.     color: "yellow"
4.     radius: 10
5.     center: userPositionSource.position.coordinate
6. }

But to mark the coordinates of the user, you must first find them out. With QtMobility, this is also done elementarily. And the QML PositionSource Element will help us with this . Through it, you can get information about things like your current coordinates, altitude and speed.



The following piece of code demonstrates what and how to get out of this element:

1. import Qt 4.7
2. import QtMobility.location 1.2
3. Rectangle {
4.     id: page
5.     width: 350
6.     height: 350
7.     PositionSource {
8.         id: positionSource
9.         updateInterval: 1000
10.         active: true
11.         // nmeaSource: "nmealog.txt"
12.     }
13.     Column {
14.         Text {text: "<==== PositionSource ====>"}
15.         Text {text: "positioningMethod: " + printableMethod(positionSource.positioningMethod)}
16.         Text {text: "nmeaSource: "         + positionSource.nmeaSource}
17.         Text {text: "updateInterval: "     + positionSource.updateInterval}
18.         Text {text: "active: "     + positionSource.active}
19.         Text {text: "<==== Position ====>"}
20.         Text {text: "latitude: "  + positionSource.position.coordinate.latitude}
21.         Text {text: "longitude: "  + positionSource.position.coordinate.longitude}
22.         Text {text: "altitude: "  + positionSource.position.coordinate.altitude}
23.         Text {text: "speed: " + positionSource.position.speed}
24.         Text {text: "timestamp: " + positionSource.position.timestamp}
25.         Text {text: "altitudeValid: " + positionSource.position.altitudeValid}
26.         Text {text: "longitudeValid: " + positionSource.position.longitudeValid}
27.         Text {text: "latitudeValid: " + positionSource.position.latitudeValid}
28.         Text {text: "speedValid: "     + positionSource.position.speedValid}
29.     }
30.     function printableMethod(method) {
31.         if (method == PositionSource.SatellitePositioningMethod)
32.             return "Satellite";
33.         else if (method == PositionSource.NoPositioningMethod)
34.             return "Not available"
35.         else if (method == PositionSource.NonSatellitePositioningMethod)
36.             return "Non-satellite"
37.         else if (method == PositionSource.AllPositioningMethods)
38.             return "All/multiple"
39.         return "source error";
40.     }
41. }

---

I was also interested in how to get the global coordinates of an object already displayed on the screen. It turned out - with QtMobility, this is also done very simply. The map.toCoordinate () function translates the screen coordinates of the object into global. We touched an object on the screen - got the coordinates:

1. onPressed: {
2.   console.log('latitude = '+ (map.toCoordinate(Qt.point(mouse.x,mouse.y))).latitude);
3.   console.log('longitude = '+ (map.toCoordinate(Qt.point(mouse.x,mouse.y))).longitude);
4. }

---

In conclusion, I would like to briefly mention acquaintance with the OVI Maps API . Using the OVI Maps API, you can easily organize in the application a search for a location by its name and many, many other things. For example, in the screenshot below, points “A” and “B” are set and the OVI Maps API gives a route from one to another. The maps in it are managed through JavaScript. And as you know - the best friend of QML is JavaScript, which can be directly embedded in the code. Thus, the QML-JavaScript-OVI Maps API combination seemed to me a very powerful tool for creating cartographic and geolocation mobile applications of any complexity. And QtQuick has once again demonstrated all its power and graceful simplicity.

OVI Maps API Playground: