(Difference between revisions)

Display Facebook Friend position with Nokia Maps API for Qt

From Nokia Developer Wiki
Jump to: navigation, search
somnathbanik (Talk | contribs)
(Somnathbanik -)
somnathbanik (Talk | contribs)
(Somnathbanik -)
Line 21: Line 21:
<gallery widths=185px heights=300px>
File: FacebookFriends_NokiaMap1.png| Facebook Login Page
File: FacebookFriends_NokiaMap1.png| Facebook Login Page
File: FacebookFriends_NokiaMap2.png| Facebook Friend list
File: FacebookFriends_NokiaMap2.png| Facebook Friend list
File: FacebookFriends_NokiaMap3.png| Facebook Friends on Nokia Map
File: FacebookFriends_NokiaMap3.png| Facebook Friends on Nokia Map

Revision as of 16:46, 31 January 2012

This article demonstrates how to display Facebook friends on Nokia Map using Nokia Map API for Qt.

Article Metadata
Code ExampleTested with
Devices(s): N9/ N950
Platform(s): Symbian^3 and later/MeeGo, Qt 4.7.3 and later
Device(s): GPS
Platform Security
Signing Required: Self-Signed
Capabilities: NetworkServices
Keywords: Facebook, Map
Created: somnathbanik (31 Jan 2014)
Last edited: somnathbanik (31 Jan 2012)



The example combines gets information about Facebook friends and display the location of the friends on Nokia Map using pushpin. We create dynamic pushpins with friend’s image using Dynamic Object Management in QML. This article also talk about Facebook login and authentication using OAuth.

File: FacebookFriends_NokiaMap1.png| Facebook Login Page File: FacebookFriends_NokiaMap2.png| Facebook Friend list File: FacebookFriends_NokiaMap3.png| Facebook Friends on Nokia Map


We create two pages in MainPage.qml, one is for displaying Facebook friend list and the other is to display friends on Nokia Map. When we start the application we load the Facebook login dialog in the first screen, which calls the Facebook login page <html code> https://www.facebook.com/dialog/oauth?client_id=<Your Key>&redirect_uri=https://www.facebook.com/connect/login_success.html </html> By default the application will ask for the authentication of basic information about the user in Facebook. As we use user location and other information we need to request for more permission from the user, which can be done with the scope parameter. So our URL should look like this

<html code> https://www.facebook.com/dialog/oauth?client_id=<Your Key>&redirect_uri=https://www.facebook.com/connect/login_success.html&scope=user_hometown,friends_hometown,user_location,friends_location,email,publish_stream,offline_access,read_stream,user_status,user_photos,friends_photos,friends_status,user_checkins,friends_checkins,user_events </code> The login page is an HTML page, so we display it on QML WebView

WebView {
id: webView
anchors.fill: parent
preferredHeight: height
preferredWidth: Math.max(parent.width,640)
url: "https://www.facebook.com/dialog/oauth?client_id=<Your Key>&redirect_uri=https://www.facebook.com/connect/login_success.html&scope=user_hometown,friends_hometown,user_location,friends_location,email,publish_stream,offline_access,read_stream,user_status,user_photos,friends_photos,friends_status,user_checkins,friends_checkins,user_events";//&display=touch";
onLoadFinished: {
loginDialog.finished( webView.url );
onLoadFailed: {
Once the user is authenticated and authorizes the application, the browser will get an alpha-numeric  number  in the code parameter of  its response. We parse the code for further use. 
onFinished: {
if(url.indexOf("code=")>0) {
login.visible = false;
friendsList.visible= true;
var codeStart = url.indexOf("code=");
//CODE from facebook
var code = url.substring(codeStart + 5);
//get the access token
console.log("Code: "+code);

getAccessToken() function pass the code as its parameter and calls the URL to get the access token.

function getAccessToken(code) {
//access token URL request
var url = "https://graph.facebook.com/oauth/access_token?client_id=<Your Key>&redirect_uri=https://www.facebook.com/connect/login_success.html&client_secret=<Your Secret>&code=" +code;
doWebRequest("GET", url, "", parseAccessToken);

And then we parse the access token from the response

//parse the access token
function parseAccessToken(response) {
accessToken = "access_token=" + parseParameter(response, "access_token");
//load friends on list

loadFriends() gets friends information from Facebook and load the information on ListModel

function parseFriends(response) {
var data = eval("[" + response + "]")[0].data;
data = data.sort(sortByName);
for(var i in data) {
var user = data[i];
if(user.location.id !== "" || user.location.name !== null )
//save friends data in model
"id": user.id,
"name": user.name,
// "profileImageUrl":"https://graph.facebook.com/" + user.id + "/picture",
"profileImageUrl":user.picture ,
"lid": (user.location!==undefined ? user.location.id : ""),
"lname": (user.location!==undefined ? user.location.name : ""),
//count number of content in the list model
friendsCount= friendsModel.count;
console.log("parseFriends : "+friendsCount);

Once the informations are loaded in the ListModel, we display the list of Facebook friends on the page

//display friends in list view
FriendsList {
id: friendsList
friendsModel: friendsModel
y: commonTools.height
height: parent.height - commonTools.height

On clicking the menu “Friends on Map” we call the function startcalculatingfrineds(), which first calculates the number of friends loaded in the model and then get the location name of each friends

function parseFriendsLocation()
//when friend list is more then zero
// get information about each friend from the model
if( i <friendsNumber)
fid = friendsModel.get(i).id;
fname = friendsModel.get(i).name;
fprofileImageUrl = friendsModel.get(i).profileImageUrl;
flid = (friendsModel.get(i).lid!==undefined ? friendsModel.get(i).lid : "" );
flname = (friendsModel.get(i).lname!==undefined ? friendsModel.get(i).lname :"");
if(flname !== "" || flid!== "" )
//pass friend location to get the latitude and longitude
feedModel.locationName = flname;
//no user
console.log("no location for the user");
//count else
console.log("Stopped : "+friendsNumber);

As the Facebook API we used here doesn’t provide the latitude and longitude information of friends in the friend list, so we will use Google API to get the latitude and longitude of each location individually.

XmlListModel {
id: feedModel
property string access_Token: ""
property string xmlData:"";
property string locationID:"";
property string locationName:""
// using Google API to get latitude and longitude of a location
query:"/GeocodeResponse/result/geometry/location" //google query
//get latitude and longitude
XmlRole { name: "lat"; query: "lat/string()" }
XmlRole { name: "lng"; query: "lng/string()" }

And then calls the addPushPin() function which first creates instances of PushPin.qml component dynamically using Dynamic Object Management in QML. Each instance is a MapImage with properties latitude,longitude,name and image. When the instances are ready we call the method addMapObject() to add the instance on the Map.

</code javascript>

function addPushPin( latitude, longitude,name,friendImage) {

            count = map.markers.length
    component = Qt.createComponent("PushPin.qml");
   console.log(" Call "+component.status + " " + Component.Null);
   //create pushpin object
    object = component.createObject(container,
                                       { "latid": latitude,  "longit": longitude,"name":name, "friendImage":friendImage}
   if (object.status == Component.Ready)
       console.log("Component ready");
        myArray = new Array()
                for (var i = 0; i<count; i++){
                map.markers = myArray
   else // when status is ready add the pushpin on the map

} //add pushpn on the map function addRemoteImages() {

  //     console.log("addRemoteImages");
            myArray = new Array()
                for (var i = 0; i<count; i++){
                map.markers = myArray


</code> We also put the entire pushpins object into an Array, so that we can have a track of all the pushpin plotted on the Map.

So when ever user switches from Facebook friend list to Map it will display the friends location on the Nokia Map.


This article shows the use of Nokia Map API along with Facebook API. It also talks about how to create a Map Object Dynamically using Dynamic Object Management in QML.

Source Code

The full source code of the example is available here: File:FacebookFriends NokiaMap.zip

337 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.