Using the map and position APIs on Ubuntu

We know that the map and position APIs are very important interfaces in modern handsets. So how do we use them on Ubuntu phones? More information on map and position can be found on our developer website: http://developer.ubuntu.com/api/qml/sdk-1.0/QtLocation.PositionSource/

1) using the Map interface
We can use the following QML map directly to achieve the function of map:

            Map {
                Id:map
                plugin:plugin {
                    name: "OSM"
                }
                anchors.fill:parent
                zoomlevel:15
                Center: Qtpositioning.coordinate (39.9289, 116.3883)

                Label {
                        anchors {top:parent.top; left:parent.left; margins: Units.gu (2)}
                        text: "Position is: (" + Me.position.coordinate.latitude + "," +
                                Me.position.coordinate.longitude + ")";
                        FontSize: "Large"
                        color: "Red"
                    }
            }

Here we use our great motherland's Beijing address latitude and longitude coordinates (39.9289,116.3883). At the same time we must point out that we must use the plugin interface called "OSM". Nokia's phone used to be a plugin named "Nokia". In order to use this interface correctly, we must call the following library in the Qml file:

Import qtlocation 5.0
Import qtpositioning 5.0

If you want to run on your phone, we must add the appropriate security policy.


Running our program, we can see the following results:



2) using the position interfaceWe can get to where we are in the following ways:

            Positionsource {
                 id:me
                 active:true
                 updateinterval:1000
                 onpositionchanged: {
                     console.log ("lat : "+ Position.coordinate.latitude +" Longitude: "+
                                 position.coordinate.longitude);
                     Console.log (position.coordinate)
                 }
             }

To be able to show where we are, we can also make a change to our program above. We can set the central location of the map to the current position we get. The modified program is:

            Map {
                Id:map
                plugin:plugin {
                    name: "OSM"
                }
                anchors.fill:parent
                zoomlevel:12
                Center: Me.position.coordinate
//                center:QtPositioning.coordinate (39.9289, 116.3883)

                Label {
                        Anchors { Top:parent.top; Left:parent.left; Margins:units.gu (2)}
                        text: "Position is: (" + Me.position.coordinate.latitude + "," +
                                me.position.coordinate . Longitude + ")";
                        FontSize: "Large"
                        color: "Red"
                    }
            }

At the same time we display the current position in a red font in map. The results of the run are shown in the following figure. We can change zoomlevel to look at different sizes:


3) Use Mapcircle to display the center point
Although we have used the map above to show the current position, we still want to display the current position with a clear flag. Here we use mapcircle to do this thing. So our code is as follows:

           Map {
                Id:map
                plugin:plugin {
                    name: "OSM"
                }
                anchors.fill:parent
                zoomlevel:12
                Center: Me.position.coordinate
                //                center:QtPositioning.coordinate (39.9289, 116.3883)

                mapcircle {
                    Center:me.position.coordinate
                    radius:units.gu ()
                    color: "Red"
                }

                Label {
                    anchors {top: Parent.top; Left:parent.left; Margins:units.gu (2)}
                    text: "Position is: (" + Me.position.coordinate.latitude + "," +
                          me.position.coordinate . Longitude + ")";
                    FontSize: "Large"
                    color: "Red"
                }
            }

The results of the operation are as follows:


Source code can be found at the following URL:
Https://github.com/liu-xiao-guo/map
The display image running on the MX4 phone is:



This shows the photo in the vicinity of my home, should be the exact address. I am using WiFi to locate.