×
Namespaces

Variants
Actions
(Difference between revisions)

Google Landmarks on a Nokia Map using Qt Quick

From Nokia Developer Wiki
Jump to: navigation, search
somnathbanik (Talk | contribs)
(Somnathbanik - - MapDelegate.qml)
hamishwillee (Talk | contribs)
m (Hamishwillee - Bot update - Fix metadata and links)
 
(35 intermediate revisions by 3 users not shown)
Line 1: Line 1:
[[Category:Porting]][[Category:Nokia Maps]][[Category:MeeGo]][[Category:Qt Quick]][[Category:Symbian]][[Category:Code Snippet]][[Category:Code Examples]]
+
[[Category:HERE Maps]][[Category:Qt Quick]][[Category:Code Examples]][[Category:MeeGo Harmattan]]
{{Abstract|This article demonstrates how to plot nearby landmark using [https://www.developer.nokia.com/Develop/Maps/Maps_API_for_Qt.xhtml Nokia Map API for Qt].}}
+
{{Abstract|This article demonstrates how to plot landmarks on a Nokia Map using [http://www.developer.nokia.com/Develop/Maps/Maps_API_for_Qt.xhtml Nokia Map API for Qt].}}
{{ArticleMetaData
+
{{SeeAlso|[[Google Landmarks on a Bing Map for WP7]]}}
|sourcecode= [[Media: NearByQML.zip]]<!-- Link to example source code e.g. [[Media:The Code Example ZIP.zip]] -->
+
{{ArticleMetaData <!-- v1.2 -->
 +
|sourcecode= [[Media:GoogleLandmarksQt v 1.1.zip]]
 
|installfile= <!-- Link to installation file (e.g. [[Media:The Installation File.sis]]) -->
 
|installfile= <!-- Link to installation file (e.g. [[Media:The Installation File.sis]]) -->
|devices= N950  <!-- Devices tested against - e.g. ''devices=N95, N8'') -->
+
|devices= N9/N950  <!-- Devices tested against - e.g. ''devices=N95, N8'') -->
|sdk= [https://www.developer.nokia.com/info/sw.nokia.com/id/da8df288-e615-443d-be5c-00c8a72435f8/Qt_SDK.html Nokia Qt SDK]
+
|sdk= [http://www.developer.nokia.com/info/sw.nokia.com/id/da8df288-e615-443d-be5c-00c8a72435f8/Qt_SDK.html Qt SDK v1.1.4]
 
|platform= Symbian/ MeeGo<!-- Compatible platforms - e.g. Symbian^1 and later, Qt 4.6 and later -->
 
|platform= Symbian/ MeeGo<!-- Compatible platforms - e.g. Symbian^1 and later, Qt 4.6 and later -->
 
|devicecompatability= <!-- Compatible devices e.g.: All* (must have internal GPS) -->
 
|devicecompatability= <!-- Compatible devices e.g.: All* (must have internal GPS) -->
|signing=<!-- Signing requirements - empty or one of: Self-Signed, DevCert, Manufacturer -->
+
|dependencies= <!-- Any other/external dependencies e.g.: Google Maps Api v1.0 -->
|capabilities=<!-- Capabilities required by the article/code example (e.g. Location, NetworkServices. -->
+
|signing= Self Signed<!-- Signing requirements - empty or one of: Self-Signed, DevCert, Manufacturer -->
|keywords= Nokia Map/ LandMark <!-- APIs, classes and methods (e.g. QSystemScreenSaver, QList, CBase -->
+
|capabilities= NetworkServices<!-- Capabilities required by the article/code example (e.g. Location, NetworkServices. -->
|id= <!-- Article Id (Knowledge base articles only) -->
+
|keywords= Nokia Maps, Location, LandMark
|creationdate= 30th  December, 2011<!-- Format YYYYMMDD -->
+
|language= <!-- Language category code for non-English topics - e.g. Lang-Chinese -->
|author= [[User:somnathbanik]] <!-- Display as link [[User:username]] -->
+
|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= 20111230
 +
|author= [[User:somnathbanik]]
 
}}
 
}}
 
==Introduction==
 
==Introduction==
  
Using [https://www.developer.nokia.com/Develop/Maps/Maps_API_for_Qt.xhtml Nokia Map API for Qt] we  can create location-based applications that  has cross platform mapping experience. In this article we will see  some steps required  to locate user location and to plot multiple  pushpin on the [http://doc.qt.nokia.com/qtmobility-1.2/qml-map.html Map] in a different way.
+
The example combines gets information about local landmarks using the [http://code.google.com/apis/maps/documentation/places/ Google Place API] and plots them on a [https://www.developer.nokia.com/Develop/Maps/Maps_API_for_Qt.xhtml Nokia Map] using pushpin . We create the pushpins dynamically using [http://doc.qt.nokia.com/4.7-snapshot/qdeclarativedynamicobjects.html Dynamic Object Management in QML]. When user clicks on any of the pushpins the application displays a popup with the landmark information and the distance of the landmark from user’s location.  
  
 +
<gallery widths=185px heights=300px>
 +
File:NearByQML1.png| Land Mark Category
 +
File:NearByQML4.png| Pushpin on Landmarks
 +
File:NearByQML3.png| Land Mark information detail
 +
</gallery>
  
{| class="wikitable"
 
|-
 
! Nokia N9 !! Nokia N9!! Nokia N9
 
|-
 
|
 
[[Image: NearByQML1.png|thumb|185px| Land Mark Category ]]
 
||
 
[[Image: NearByQML4.png|thumb|185px| Pushpin on Landmarks ]]
 
||
 
[[Image: NearByQML3.png|thumb|185px| Land Mark information detail ]]
 
 
 
|-
 
| Nokia Map|| Nokia Map || Nokia Map
 
|}
 
 
==Objective==
 
For our educational purpose  and to get a real live scenario we combined both [https://www.developer.nokia.com/Develop/Maps/Maps_API_for_Qt.xhtml Nokia Map API] and [http://code.google.com/apis/maps/documentation/places/ Google Place API] to create this application. We will get the coordinates of the landmark from [http://code.google.com/apis/maps/documentation/places/ Google Place API] and plot them on Nokia  Map with Pushpin. When user clicks on any of the Pushpin it displays a popup with the landmark information and the distance of the landmark from user’s location.
 
 
 
.
 
 
[[Category:Location]]
 
 
==Implementation ==
 
==Implementation ==
We create two page item in {{Icode|main.qml}} file, the first page item has a list of landmark category and the second page displays the [http://doc.qt.nokia.com/qtmobility-1.2/qml-map.html Map] with the landmarks.  
+
We create two page items in the {{Icode|main.qml}} file. The first page item lists available landmark categories while the second page displays the [http://doc.qt.nokia.com/qtmobility-1.2/qml-map.html Nokia Map] with the landmarks.  
  
 
===page 1 in main.qml===
 
===page 1 in main.qml===
<code cpp>
+
<code cpp-qt>
 
//page 1
 
//page 1
 
     Rectangle {
 
     Rectangle {
Line 106: Line 97:
 
</code>
 
</code>
 
===page 2 in main.qml===
 
===page 2 in main.qml===
<code cpp>
+
<code cpp-qt>
  
 
//page 2
 
//page 2
Line 134: Line 125:
 
     }
 
     }
 
</code>
 
</code>
It also has a the back button, which is visible when the [http://doc.qt.nokia.com/qtmobility-1.2/qml-map.html Map] displays
+
The page also has a "back" button, which is visible when the [http://doc.qt.nokia.com/qtmobility-1.2/qml-map.html Map] displays
<code cpp>
+
<code cpp-qt>
  
 
// menu bar
 
// menu bar
Line 151: Line 142:
 
</code>
 
</code>
  
When user clicks on any of the landmark category it calls the {{Icode|loadLandMark()}} function, which uses the [http://code.google.com/apis/maps/documentation/places/ Google Places API] to get the near by landmark information.
+
When an user clicks on any of the landmark categories the application calls the {{Icode|loadLandMark()}} function, which uses the [http://code.google.com/apis/maps/documentation/places/ Google Places API] to get the near by landmark information. To access the [http://code.google.com/apis/maps/documentation/places/ Google Places API] please get the key from [https://code.google.com/apis/console/ here] and replace  ''' <Your Google API Key>'''  with the key in the below code.
<code cpp>
+
<code javascript>
 
function loadLandMark(landmarkname)
 
function loadLandMark(landmarkname)
 
     {
 
     {
Line 159: Line 150:
 
       console.log("latitude:" +myLatitude + "longitude:" +myLongitude+ "landmark:"+landmarkname );
 
       console.log("latitude:" +myLatitude + "longitude:" +myLongitude+ "landmark:"+landmarkname );
 
       var url =
 
       var url =
           "https://maps.googleapis.com/maps/api/place/search/xml?location="+myLatitude+","+myLongitude+"&radius=1000&name="+landmarkname+"&sensor=false&key=AIzaSyBGw0MB3DkFlveLwnCmAv2MlG5DJYxZt2s";
+
           "https://maps.googleapis.com/maps/api/place/search/xml?location="+myLatitude+","+myLongitude+"&radius=1000&name="+landmarkname+"&sensor=false&key=<Your Google API Key>";
 
         var doc = new XMLHttpRequest();
 
         var doc = new XMLHttpRequest();
 
         doc.onreadystatechange = function() {
 
         doc.onreadystatechange = function() {
Line 180: Line 171:
  
 
</code>
 
</code>
In this case we are using [http://doc.qt.nokia.com/4.7-snapshot/qml-xmllistmodel.html XmlListModel] instead of [http://doc.qt.nokia.com/qtmobility-1.2/qml-landmarkmodel.html LandmarkModel] for storing the data. The [http://code.google.com/apis/maps/documentation/places/ Google Places API] is a {{Icode|HTTPS}} request so , first we download all the data through {{Icode|loadLandMark ()}} function and then pass the data to the  '''xml''' property of [http://doc.qt.nokia.com/4.7-snapshot/qml-xmllistmodel.html XmlListModel] leaving the '''source''' property empty.
+
[http://doc.qt.nokia.com/qtmobility-1.2/qml-map.html#details QML Map Element] has a default model called [http://doc.qt.nokia.com/qtmobility-1.2/qml-landmarkmodel.html LandmarkModel ] which provides a model of landmarks from the landmarks store. But in this case we will use [http://doc.qt.nokia.com/4.7-snapshot/qml-xmllistmodel.html XmlListModel] instead of [http://doc.qt.nokia.com/qtmobility-1.2/qml-landmarkmodel.html LandmarkModel] for storing the landmarks data. The [http://code.google.com/apis/maps/documentation/places/ Google Places API] is a {{Icode|HTTPS}} request so, first we download all the landmarks data through {{Icode|loadLandMark()}} function and then pass the data to the  '''xml''' property of [http://doc.qt.nokia.com/4.7-snapshot/qml-xmllistmodel.html XmlListModel] leaving the '''source''' property empty.
  
 
=== RssModelMap.qml===
 
=== RssModelMap.qml===
<code cpp>
+
<code cpp-qt>
 
XmlListModel {
 
XmlListModel {
 
     id: feedModelMap
 
     id: feedModelMap
Line 206: Line 197:
 
}
 
}
 
</code>
 
</code>
When the data loading is being completed in [http://doc.qt.nokia.com/4.7-snapshot/qml-xmllistmodel.html XmlListModel] it generates a signal which than fetch each landmark information from the [http://doc.qt.nokia.com/4.7-snapshot/qml-xmllistmodel.html XmlListModel] and calls the function {{Icode|addPushPin()}} to plot the coordinates on the [http://doc.qt.nokia.com/qtmobility-1.2/qml-map.html Map] element dynamically.
+
When the data loading is finished the [http://doc.qt.nokia.com/4.7-snapshot/qml-xmllistmodel.html XmlListModel] generates a signal which then fetches landmark information from the [http://doc.qt.nokia.com/4.7-snapshot/qml-xmllistmodel.html XmlListModel] and calls the function {{Icode|addPushPin()}} to plot the coordinates on the [http://doc.qt.nokia.com/qtmobility-1.2/qml-map.html Map] dynamically.
  
 
=== MapDelegate.qml===
 
=== MapDelegate.qml===
<code cpp>
+
<code cpp-qt>
 
onXmlReadyChanged: {
 
onXmlReadyChanged: {
 
                     console.log("******", feedModelMap.count);
 
                     console.log("******", feedModelMap.count);
Line 217: Line 208:
 
                         var name = feedModelMap.get(i).name;
 
                         var name = feedModelMap.get(i).name;
 
                         var address = feedModelMap.get(i).vicinity
 
                         var address = feedModelMap.get(i).vicinity
                         var latitude =feedModelMap.get(i).lat;
+
                         var latitude =feedModelMap.get(i).lat;
                         var longitude =feedModelMap.get(i).lng;
+
                         var longitude =feedModelMap.get(i).lng;
 
                         console.log("******",name, latitude, longitude);
 
                         console.log("******",name, latitude, longitude);
                         map.addPushPin(latitude , longitude,  name, address);
+
                         map.addPushPin(latitude, longitude,  name, address);
 
                     }
 
                     }
 
                 }
 
                 }
  
 
</code>
 
</code>
{{Icode|addPushPin()}} function creates instances of {{Icode|PushPin.qml}} component dynamically, which is a [http://doc.qt.nokia.com/qtmobility-1.2/qml-mapimage.html MapImage], and then calls the method {{Icode|addMapObject()}} to add the map object to the [http://doc.qt.nokia.com/qtmobility-1.2/qml-map.html Map].
+
{{Icode|addPushPin()}} function is our point of attraction, here we create dynamic pushpin for each landmarks using [http://doc.qt.nokia.com/4.7-snapshot/qdeclarativedynamicobjects.html Dynamic Object Management in QML]. {{Icode|addPushPin()}} function creates instances of {{Icode|PushPin.qml}} component dynamically. Each instance is a [http://doc.qt.nokia.com/qtmobility-1.2/qml-mapimage.html MapImage] with properties ''latitude'',''longitude'',''name'' and ''address''. We also put all the pushpin object into an Array, so that we can have a track of all the pushpin plotted on the [http://doc.qt.nokia.com/qtmobility-1.2/qml-map.html#details Map]. The method [http://doc.qt.nokia.com/qtmobility-1.2/qml-map.html#addMapObject-method addMapObject()]  adds the map object on the [http://doc.qt.nokia.com/qtmobility-1.2/qml-map.html Map].
<code cpp>
+
<code javascript>
 
             function addPushPin( latitude, longitude,name,address ) {
 
             function addPushPin( latitude, longitude,name,address ) {
                         var myArray
+
                         var myArray
 
                         var count = map.markers.length
 
                         var count = map.markers.length
 
                         counter++
 
                         counter++
Line 255: Line 246:
  
 
=== PushPin.qml===
 
=== PushPin.qml===
<code cpp>
+
<code cpp-qt>
 
MapImage {
 
MapImage {
 
     id:mapMarker
 
     id:mapMarker
Line 276: Line 267:
 
</code>
 
</code>
  
When user click on the pushpin it displays a popup message with Landmark Name, Address and the approximate distance of the landmark from User location.
+
When users click on the pushpin it displays a popup message with landmark's name, address and the approximate distance of the landmark from user location.
  
 
=== MapDelegate.qml===
 
=== MapDelegate.qml===
<code cpp>
+
<code javascript>
 
+
function pushPinClicked(aLat, aLng,aName,aAddress)
function pushPinClicked(aLat , aLng,aName,aAddress)
+
 
             {
 
             {
 
                 myLatitude =  positionSource.position.coordinate.latitude;
 
                 myLatitude =  positionSource.position.coordinate.latitude;
Line 294: Line 284:
 
             }
 
             }
 
</code>
 
</code>
 +
Every time we select a new landmark from the category list, we need to make sure the pushpins of the previous landmark should not be there in the  [http://doc.qt.nokia.com/qtmobility-1.2/qml-map.html Map]. To do this we need to delete all the previous pushpins from the [http://doc.qt.nokia.com/qtmobility-1.2/qml-map.html Map] before plotting pushpins for the new landmark. The {{Icode|deleteAllPushPin()}} method does the same, it calls the {{Icode|destroy()}} method to delete each pushpin item dynamically.
 +
<code javascript>
  
It also has the Pinch Zoom In/Out feature. The user can go back with the back key and select other landmark from the category . We also need to keep in mind that when we add  map object on the [http://doc.qt.nokia.com/qtmobility-1.2/qml-map.htm Map] we also need to remove map object.  Here {{Icode|deleteAllPushPin()}} method does the same.
+
                function deleteAllPushPin(){
 +
                        var count = map.markers.length
 +
                        for (var i = 0; i<count; i++){
 +
                            map.removeMapObject(map.markers[i])
 +
                            map.markers[i].destroy()
 +
                        }
 +
                        map.markers = []
 +
                        counter = 0
 +
                    }
 +
 
 +
</code>
 +
 
 +
The application also has the Pinch Zoom In/Out feature. The user can go back with the back key and select other landmarks from the category.  
  
 
==Summary==  
 
==Summary==  
This is a basic [https://www.developer.nokia.com/Develop/Maps/Maps_API_for_Qt.xhtml Nokia Map API] operation, but  in a different way. This article also focus on how to use [http://doc.qt.nokia.com/4.7-snapshot/qml-xmllistmodel.html XmlListModel] instead of  [http://doc.qt.nokia.com/qtmobility-1.2/qml-landmarkmodel.html LandmarkModel] in Map element , handling {{Icode|HTTPS}} request from [http://code.google.com/apis/maps/documentation/places/ Google Places API] and [http://doc.qt.nokia.com/4.7-snapshot/qdeclarativedynamicobjects.html Creating a Map Object Dynamically].  
+
This is a basic [http://www.developer.nokia.com/Develop/Maps/Maps_API_for_Qt.xhtml Nokia Map API] operation. This article also focus on how to use [http://doc.qt.nokia.com/4.7-snapshot/qml-xmllistmodel.html XmlListModel] instead of  [http://doc.qt.nokia.com/qtmobility-1.2/qml-landmarkmodel.html LandmarkModel] in [http://doc.qt.nokia.com/qtmobility-1.2/qml-map.html Map] element, handling {{Icode|HTTPS}} request from [http://code.google.com/apis/maps/documentation/places/ Google Places API] and Creating a Map Object Dynamically using  [http://doc.qt.nokia.com/4.7-snapshot/qdeclarativedynamicobjects.html Dynamic Object Management in QML].
*You can find the Windows Phone 7 version of the application [http://www.developer.nokia.com/Community/Wiki/Near_By_Landmark_for_WP7 here]
+
  
 
==Source Code==
 
==Source Code==
The full source code of the example is available here: [[File: NearByQML.zip]]
+
The full source code of the example is available here: [[File: GoogleLandmarksQt v 1.1.zip]]
 +
 
 +
 
 +
==Related Article==
 +
*[[Display Facebook Friend position with Nokia Maps API for Qt]]

Latest revision as of 09:25, 24 April 2013

This article demonstrates how to plot landmarks on a Nokia Map using Nokia Map API for Qt.

Article Metadata
Code ExampleTested with
Devices(s): N9/N950
Compatibility
Platform(s): Symbian/ MeeGo
Platform Security
Signing Required: Self Signed
Capabilities: NetworkServices
Article
Keywords: Nokia Maps, Location, LandMark
Created: somnathbanik (30 Dec 2011)
Last edited: hamishwillee (24 Apr 2013)

Contents

[edit] Introduction

The example combines gets information about local landmarks using the Google Place API and plots them on a Nokia Map using pushpin . We create the pushpins dynamically using Dynamic Object Management in QML. When user clicks on any of the pushpins the application displays a popup with the landmark information and the distance of the landmark from user’s location.

[edit] Implementation

We create two page items in the main.qml file. The first page item lists available landmark categories while the second page displays the Nokia Map with the landmarks.

[edit] page 1 in main.qml

//page 1
Rectangle {
id: page1
width: parent.width
color: "black"
height: parent.height
RssModel {id: feedModelLandmark}
ListView {
id: list
width: parent.width ;
height: parent.height-111;
y:111
model: feedModelLandmark
delegate: CategoryListDelegate {}
}
Rectangle{
id:titleRect
color: "white"
Text {
id: tileText
width:300
height: 40
y:32
text: qsTr("Near Me")
color: "green"
font.pixelSize: 80
}
}
Image {
id: titleImage
source: "maps-icon.png"
height: 80
width: 80
y:30
x:340
}
Rectangle
{
id:underline
color: "white"
y:106
height: 2
width:parent.width
}
states:
State {
name: "Item"; when: appWindow.inFirstScreen == true
PropertyChanges { target: page1; x: 0 }
PropertyChanges { target: page2; x: -(parent.width * 1.5) }
PropertyChanges { target: commonTools; visible:false }
}
transitions: Transition {
NumberAnimation { properties: "x"; duration: 700; easing.type: Easing.InOutQuad }
}
}

[edit] page 2 in main.qml

//page 2
Item {
id: page2
width: parent.width
height: parent.height
//display the map
Rectangle{
id: mapRect
anchors.fill: parent
signal xmlMapReady
onXmlMapReady: container.xmlReady = !container.xmlReady
RssModelMap {id: feedModelMap}
MapDelegate {id: container }
}
states:
State {
name: "Item"; when: appWindow.inSecondScreen == true
PropertyChanges { target: page2; x: 0 }
PropertyChanges { target: page1; x: -(parent.width * 1.5) }
PropertyChanges { target: commonTools; visible:true }
}
transitions: Transition {
NumberAnimation { properties: "x"; duration: 700; easing.type: Easing.InOutQuad }
}
}

The page also has a "back" button, which is visible when the Map displays

// menu bar
ToolBarLayout {
id: commonTools
visible: false
ToolIcon {
platformIconId: "toolbar-back"
anchors.bottom: (parent === undefined) ? undefined : parent.bottom
onClicked: {
loadFirst()
}
}
}

When an user clicks on any of the landmark categories the application calls the loadLandMark() function, which uses the Google Places API to get the near by landmark information. To access the Google Places API please get the key from here and replace <Your Google API Key> with the key in the below code.

function loadLandMark(landmarkname)
{
myLatitude = positionSource.position.coordinate.latitude;
myLongitude = positionSource.position.coordinate.longitude;
console.log("latitude:" +myLatitude + "longitude:" +myLongitude+ "landmark:"+landmarkname );
var url =
"https://maps.googleapis.com/maps/api/place/search/xml?location="+myLatitude+","+myLongitude+"&radius=1000&name="+landmarkname+"&sensor=false&key=<Your Google API Key>";
var doc = new XMLHttpRequest();
doc.onreadystatechange = function() {
if (doc.readyState == XMLHttpRequest.HEADERS_RECEIVED) {
}
else if (doc.readyState == XMLHttpRequest.DONE) {
console.log("HttpRequest DONE");
var status = doc.status;
if(status!=200) {
return;
}
var data = doc.responseText;
//console.log("Google Data:\n"+data);
feedModelMap.xmlData = data;
}
}
doc.open("GET", url);
doc.send();
}

QML Map Element has a default model called LandmarkModel which provides a model of landmarks from the landmarks store. But in this case we will use XmlListModel instead of LandmarkModel for storing the landmarks data. The Google Places API is a HTTPS request so, first we download all the landmarks data through loadLandMark() function and then pass the data to the xml property of XmlListModel leaving the source property empty.

[edit] RssModelMap.qml

XmlListModel {
id: feedModelMap
property string xmlData:"";
source:""
xml: xmlData
query: "/PlaceSearchResponse/result"
namespaceDeclarations: ""
XmlRole { name: "name"; query: "name/string()" }
XmlRole { name: "vicinity"; query: "vicinity/string()" }
XmlRole { name: "type"; query: "type/string()" }
XmlRole { name: "lat"; query: "geometry/location/lat/string()" }
XmlRole { name: "lng"; query: "geometry/location/lng/string()" }
XmlRole { name: "reference"; query: "reference/string()" }
XmlRole { name: "id"; query: "id/string()" }
onStatusChanged: {
if (status === XmlListModel.Ready) {
console.log("xmlModel OK - count =", count);
mapRect.xmlMapReady();
}
}
}

When the data loading is finished the XmlListModel generates a signal which then fetches landmark information from the XmlListModel and calls the function addPushPin() to plot the coordinates on the Map dynamically.

[edit] MapDelegate.qml

onXmlReadyChanged: {
console.log("******", feedModelMap.count);
var locationCount = feedModelMap.count;
for(var i=0; i<locationCount; i++ )
{
var name = feedModelMap.get(i).name;
var address = feedModelMap.get(i).vicinity
var latitude =feedModelMap.get(i).lat;
var longitude =feedModelMap.get(i).lng;
console.log("******",name, latitude, longitude);
map.addPushPin(latitude, longitude, name, address);
}
}

addPushPin() function is our point of attraction, here we create dynamic pushpin for each landmarks using Dynamic Object Management in QML. addPushPin() function creates instances of PushPin.qml component dynamically. Each instance is a MapImage with properties latitude,longitude,name and address. We also put all the pushpin object into an Array, so that we can have a track of all the pushpin plotted on the Map. The method addMapObject() adds the map object on the Map.

            function addPushPin( latitude, longitude,name,address ) {
var myArray
var count = map.markers.length
counter++
var component = Qt.createComponent("PushPin.qml");
console.log(component.status + " " + Component.Null);
var object = component.createObject(container,
{ "latid": latitude, "longit": longitude,"name":name, "address":address}
);
if (object.status == Component.Ready) {
console.log("Component ready");
map.addMapObject(object);
object.clicked.connect(pushPinClicked);
myArray = new Array()
for (var i = 0; i<count; i++){
myArray.push(markers[i])
}
myArray.push(object)
markers = myArray
}
if (object.status == Component.Error) {
console.log("Error: " + component.errorString());
}
}

[edit] PushPin.qml

MapImage {
id:mapMarker
width: 35
signal clicked(double lat, double lon,string name, string address)
source: "pushpin.png"
property alias latid: mapMarkerCordinate.latitude
property alias longit: mapMarkerCordinate.longitude
property string name:""
property string address:""
coordinate: Coordinate
{
id: mapMarkerCordinate;
}
MapMouseArea {
onClicked: mapMarker.clicked(coordinate.latitude, coordinate.longitude,name,address)
}
}

When users click on the pushpin it displays a popup message with landmark's name, address and the approximate distance of the landmark from user location.

[edit] MapDelegate.qml

function pushPinClicked(aLat, aLng,aName,aAddress)
{
myLatitude = positionSource.position.coordinate.latitude;
myLongitude = positionSource.position.coordinate.longitude;
var dist= distance(myLatitude,myLongitude,aLat,aLng);
popup.text = aName + "\n";
popup.text1 =aAddress;
popup.text2 ="You are around "+dist+" away";
popup.posX = 250;
popup.posY = 350;
popup.show();
}

Every time we select a new landmark from the category list, we need to make sure the pushpins of the previous landmark should not be there in the Map. To do this we need to delete all the previous pushpins from the Map before plotting pushpins for the new landmark. The deleteAllPushPin() method does the same, it calls the destroy() method to delete each pushpin item dynamically.

                function deleteAllPushPin(){
var count = map.markers.length
for (var i = 0; i<count; i++){
map.removeMapObject(map.markers[i])
map.markers[i].destroy()
}
map.markers = []
counter = 0
}

The application also has the Pinch Zoom In/Out feature. The user can go back with the back key and select other landmarks from the category.

[edit] Summary

This is a basic Nokia Map API operation. This article also focus on how to use XmlListModel instead of LandmarkModel in Map element, handling HTTPS request from Google Places API and Creating a Map Object Dynamically using Dynamic Object Management in QML.

[edit] Source Code

The full source code of the example is available here: File:GoogleLandmarksQt v 1.1.zip


[edit] Related Article

This page was last modified on 24 April 2013, at 09:25.
557 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.

×