×
Namespaces

Variants
Actions
(Difference between revisions)

MapPlacesDemo - Plotting multiple POI on Nokia Maps

From Nokia Developer Wiki
Jump to: navigation, search
avnee.nathani (Talk | contribs)
(Avnee.nathani - removed draft)
hamishwillee (Talk | contribs)
m (Hamishwillee - Change to use new video player which works with Lumia 920 and other mobile browsers)
(7 intermediate revisions by 2 users not shown)
Line 1: Line 1:
[[Category:Qt Quick]][[Category:Location]][[Category:Symbian]][[Category:Nokia Maps]]
+
[[Category:Qt Quick]][[Category:Nokia Maps]][[Category:Code Examples]][[Category:MeeGo Harmattan]][[Category:Symbian]]
{{Abstract|This article illustrates how to '''show multiple points of interests (POI)''' around you on Nokia Maps using QtQuick.}}
+
{{Abstract|This article illustrates how to '''show multiple points of interests (POI)''' around you on Nokia Maps using Qt Quick.}}
  
{{ArticleMetaData
+
{{ArticleMetaData <!-- v1.1 -->
 +
|sourcecode=[http://projects.developer.nokia.com/locationdemos locationdemos]
 +
|installfile= <!-- Link to installation file (e.g. [[Media:The Installation File.sis]]) -->
 
|devices= Nokia C7-00
 
|devices= Nokia C7-00
|sdk= Nokia Qt SDK 1.1
+
|sdk= [http://www.developer.nokia.com/info/sw.nokia.com/id/da8df288-e615-443d-be5c-00c8a72435f8/Qt_SDK.html Qt SDK 1.1.4]
 
|platform= Symbian S60 5th Edition and later
 
|platform= Symbian S60 5th Edition and later
 
|devicecompatability= must have internal GPS
 
|devicecompatability= must have internal GPS
|author= [[User:avnee.nathani]]
+
|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 -->
 +
|id= <!-- Article Id (Knowledge base articles only) -->
 +
|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=20111231
 +
|author=[[User:Avnee.nathani]]
 
}}
 
}}
  
Line 17: Line 33:
  
 
A video demonstration of MapPlacesDemo is shown below,
 
A video demonstration of MapPlacesDemo is shown below,
{{#ev:youtube|6U_BTJPJTcQ}}
+
<mediaplayer>http://www.youtube.com/watch?v=6U_BTJPJTcQ</mediaplayer>
  
 
==Map Places API ==
 
==Map Places API ==
Line 35: Line 51:
  
 
A HTTP GET request is done to the above url to get XML response,
 
A HTTP GET request is done to the above url to get XML response,
<code cpp>
+
<code cpp-qt>
 
void MapPlacesRequestor::GetPlaces(QString lat, QString lng)
 
void MapPlacesRequestor::GetPlaces(QString lat, QString lng)
 
{
 
{
Line 52: Line 68:
 
</code>
 
</code>
 
Once the XML response is received, we use parseResponse function, which uses Qt Dom parser and creates a list of Places. The Places class has attributes like lat, lng, name, vicinity and type of place; which will be presented to the user.
 
Once the XML response is received, we use parseResponse function, which uses Qt Dom parser and creates a list of Places. The Places class has attributes like lat, lng, name, vicinity and type of place; which will be presented to the user.
<code cpp>
+
<code cpp-qt>
 
class Places{
 
class Places{
 
public:
 
public:
Line 68: Line 84:
 
</code>
 
</code>
 
<tt>parseResponse</tt> creates a list of places (<tt>QList<Places*></tt>) as shown below,
 
<tt>parseResponse</tt> creates a list of places (<tt>QList<Places*></tt>) as shown below,
<code cpp>
+
<code cpp-qt>
 
int MapPlacesRequestor::parseResponse(QString PlacesData)
 
int MapPlacesRequestor::parseResponse(QString PlacesData)
 
{
 
{
Line 154: Line 170:
 
== Plotting multiple POIs on Nokia Map ==  
 
== Plotting multiple POIs on Nokia Map ==  
 
MapPlacesDemo plots first 6 places received from Google Places API on a Nokia Map. A HTTP GET request of a map displaying one or more points of interest is done by providing the corresponding geo-coordinates in the request parameters as shown below:
 
MapPlacesDemo plots first 6 places received from Google Places API on a Nokia Map. A HTTP GET request of a map displaying one or more points of interest is done by providing the corresponding geo-coordinates in the request parameters as shown below:
<code cpp>
+
<code cpp-qt>
 
void MapPlacesRequestor::getPlacesImage()
 
void MapPlacesRequestor::getPlacesImage()
 
{
 
{
Line 180: Line 196:
  
 
The next screen displays a listview with all the places, received from the Google places API. The model is exposed to QML from getPlacesNameList() function.  
 
The next screen displays a listview with all the places, received from the Google places API. The model is exposed to QML from getPlacesNameList() function.  
<code cpp>
+
<code cpp-qt>
 
QStringList MapPlacesRequestor::getPlacesNameList(){
 
QStringList MapPlacesRequestor::getPlacesNameList(){
 
     QStringList list;
 
     QStringList list;

Revision as of 07:46, 30 January 2013

This article illustrates how to show multiple points of interests (POI) around you on Nokia Maps using Qt Quick.

Article Metadata
Code Example
Source file: locationdemos
Tested with
Devices(s): Nokia C7-00
Compatibility
Platform(s): Symbian S60 5th Edition and later
Symbian
Device(s): must have internal GPS
Article
Created: avnee.nathani (31 Dec 2011)
Last edited: hamishwillee (30 Jan 2013)

MapPlacesDemo Homescreen.png MapPlacesDemo AroundMe.png MapPlacesDemo ListViewReal.png

Contents

Introduction

This article showcases a demo app - MapPlacesDemo - which shows the user - places around him, on Nokia Map. The app uses the current position of the user (lat-long from the integrated GPS receiver), get the places / points of interest (POI) around the user within 1 km range and displays them on map - using Nokia Map Image API. The app also gives the user more details like type, vicinity, etc of the point of interest; and flexibility to see each POI individually on map.

A video demonstration of MapPlacesDemo is shown below, The media player is loading...

Map Places API

MapPlacesDemo uses the Google Places API for fetching points of interest around the current position. The service provides list of POIs around a specified position (latitude and longitude) and withing a given radius (distance). The format for Google Places API request is:

   QString url="https://maps.googleapis.com/maps/api/place/search/"+FORMAT+"?location="+lat+","+lng+"&radius="+RADIUS+"&sensor="+SENSOR+"&key="+GOOGLE_API_KEY;

Where,

  • FORMAT: json/xml

json indicates output in JavaScript Object Notation (JSON) xml indicates output as XML MapPlacesDemo uses an xml format.

  • SENSOR: Indicates whether or not the Place Details request came from a device using a location sensor (e.g. a GPS). This value must be either true or false.
  • GOOGLE_API_KEY: Your application's API key. This key identifies your application for purposes of quota management so that places added from your application are made immediately available to your app. You can visit the Google APIs Console to create an API Project and obtain your key.

A HTTP GET request is done to the above url to get XML response,

void MapPlacesRequestor::GetPlaces(QString lat, QString lng)
{
 
QString url = "https://maps.googleapis.com/maps/api/place/search/"
+FORMAT+"?location="
+lat+","
+lng+"&radius="
+RADIUS+
"&sensor="+
SENSOR+
"&key="
+GOOGLE_API_KEY;
nam->get(QNetworkRequest(QUrl(url)));
}

Once the XML response is received, we use parseResponse function, which uses Qt Dom parser and creates a list of Places. The Places class has attributes like lat, lng, name, vicinity and type of place; which will be presented to the user.

class Places{
public:
Places(QString aname, QString avicinity, QString atype, QString alat, QString alng)
{
name = aname;
vicinity = avicinity;
lat = alat;
lng = alng;
type = atype;
}
QString name, vicinity, type;
QString lat, lng;
};

parseResponse creates a list of places (QList<Places*>) as shown below,

int MapPlacesRequestor::parseResponse(QString PlacesData)
{
iPlacesList.clear();
QDomDocument doc;
 
if( !doc.setContent(PlacesData))
{
return -2;
};
 
QDomElement root = doc.documentElement();
 
QDomNode n = root.firstChild();
 
while( !n.isNull() )
{
QDomElement e = n.toElement();
 
if (e.tagName()=="result")
{
// Attributes of a place
QString pname, pvicinity, plat, plng, ptype;
QDomNode result_n = e.firstChild();
 
while(!result_n.isNull())
{
QDomElement result_e = result_n.toElement();
 
if (result_e.tagName() == "name")
{
pname = result_e.text();
}
else if (result_e.tagName() == "vicinity")
{
pvicinity = result_e.text();
}
else if (result_e.tagName() == "type")
{
if (ptype.length()==0)
{
ptype= result_e.text();
}
}
else if( result_e.tagName() == "geometry")
{
QDomNode geometry_n = result_e.firstChild();
 
QDomElement geometry_e = geometry_n.toElement();
 
if(geometry_e.tagName() == "location")
{
QDomNode location_n = geometry_n.firstChild();
 
while(!location_n.isNull())
{
QDomElement location_e = location_n.toElement();
 
if(location_e.tagName()== "lat")
{
plat = location_e.text();
}
 
if(location_e.tagName()== "lng")
{
plng = location_e.text();
}
// Go to the next sibling
location_n = location_n.nextSibling();
}
}
}
// Next sibling
result_n = result_n.nextSibling();
}
// Add a place to the list
iPlacesList.append(new Places(pname, pvicinity,ptype, plat, plng));
}
n = n.nextSibling();
}
return 0;
}

Plotting multiple POIs on Nokia Map

MapPlacesDemo plots first 6 places received from Google Places API on a Nokia Map. A HTTP GET request of a map displaying one or more points of interest is done by providing the corresponding geo-coordinates in the request parameters as shown below:

void MapPlacesRequestor::getPlacesImage()
{
QString url("http://m.nokia.me/?poi=");
for (int i =0; i<iPlacesList.count(); i++)
{
if (i==6)
{
break;
}
url.append(iPlacesList.at(i)->lat);
url.append(",");
url.append(iPlacesList.at(i)->lng);
url.append(",");
}
url.append("&h="
+ MAP_HEIGHT + ",&w="
+ MAP_WIDTH + "&nopoim");
nam->get(QNetworkRequest(QUrl(url)));
}

When the map response is received, it is passed to QML UI for displaying. The QML UI for the AroundMe map view is available here.

POI Views

The next screen displays a listview with all the places, received from the Google places API. The model is exposed to QML from getPlacesNameList() function.

QStringList MapPlacesRequestor::getPlacesNameList(){
QStringList list;
for (int i =0; i<iPlacesList.count(); i++)
{
list.append(iPlacesList.at(i)->name);
}
return list;
}

The code for listview component is shown below,

// List of places around
ListView{
id: listview
width: parent.width
height: parent.height - backButton_aroundMeListView.height - infoText_AroundMe.height
clip: true
anchors.top: infoText_AroundMe.bottom
model: listmodel
delegate: Rectangle {
width: parent.width
height: 50
color: "lightsteelblue"
Image{
id: icon
width: 40
height: 40
source: MapPlacesRequestor.getIcon(index);
anchors.left: parent.left
anchors.leftMargin: 10
}
Text {
id: listItemtext
text: modelData
anchors.left: icon.right
anchors.leftMargin: 10
font.pixelSize: 20
color: "darkblue"
}
Rectangle{
width: parent.width
height: 1
color: "darkgreen"
anchors.top: icon.bottom
anchors.topMargin: 5
}
MouseArea{
anchors.fill: parent
onClicked: {
detailView.visible = true;
selectedIndex = index;
MapPlacesRequestor.getPoiMap(index);
}
}
}
}

Selecting a place from the list, shows a detail view for the place.

MapPlacesDemoPOIDetailView.png MapPlacesDemo Map.png

The above view also allows to view that place inidividually on a Nokia map. This is done, as explained in the article MyMapDemo - Using Nokia Map Image API with QtQuick. This view also allows the user to zoom in, zoom out and refresh the map as shown in the video/screenshot.

Source code

Related Article

198 page views in the last 30 days.