×
Namespaces

Variants
Actions
(Difference between revisions)

HERE Maps API - Route planning and journey plotting

From Nokia Developer Wiki
Jump to: navigation, search
jackdenial (Talk | contribs)
(Jackdenial - - Unfolding the magic)
jackdenial (Talk | contribs)
(Jackdenial - - Unfolding the magic)
Line 41: Line 41:
 
}
 
}
 
);
 
);
 +
map.objects.addAll([ route, imageMarker]);
 
</code>
 
</code>
  
[[File:gps_car.jpg]]
+
[[File:gps_car.jpg]] We are now ready with the car and the route, what we need now is continuous coordinates from the GPS device to track the position of car on the map. To access GPS device we have to use nokia.maps.positioning.Manager() Nokia API.
 +
 
 +
We will be using watchPosition method to continuously get feed of the GPS sensor coordinates to position the car icon.
 +
 
 +
'''watchPosition''' (successCallback, errorCallback, options) returns a  Number
 +
''Starts periodically watching the positioning sensor and fires events containing the data, if there are changes ocurring''
 +
 
 +
<code javascript>
 +
/* The positioning manager is only available if the browser used supports
 +
* W3C geolocation API
 +
*/
 +
if (nokia.maps.positioning.Manager) {
 +
var positioning = new nokia.maps.positioning.Manager();
 +
 +
// Monitors current position, if available the first given callback function is executed periodically else the second
 +
positioning.watchPosition(
 +
// If a position is provided by W3C geolocation API of the browser
 +
function (position) {
 +
var coords = position.coords;
 +
marker.set("coordinate", coord);
 +
// Force immediate re-render of the map display
 +
map.update(-1, true);
 +
},
 +
// Something went wrong we wee unable to retrieve the GPS location
 +
function (error) {
 +
var errorMsg = "Location could not be determined: ";
 +
 +
// We determine what caused the error and generate error message
 +
if (error.code == 1) errorMsg += "PERMISSION_DENIED";
 +
else if (error.code == 2) errorMsg += "POSITION_UNAVAILABLE";
 +
else if (error.code == 3) errorMsg += "TIMEOUT";
 +
else errorMsg += "UNKNOWN_ERROR";
 +
 +
// Throw an alert with error message
 +
alert(errorMsg);
 +
}
 +
);
 +
}
 +
 
 +
</code>

Revision as of 02:24, 30 December 2011

Introduction

You have read many articles, you have seen many examples but what actually you are looking for is here. We are going to create a small Page, which will use the GPS system and will help the user to reach to the destination.

Unfolding the magic

Lets first have a CAR and a route ready for the Journey. :)

// Get the DOM node to which we will append the map
var mapContainer = document.getElementById("mapContainer");
// Create a map inside the map container DOM node
var map = new nokia.maps.map.Display(mapContainer, {
// Initial center and zoom level of the map
center: [52.51, 13.45],
zoomLevel: 13,
components:[
new nokia.maps.map.component.ZoomBar(),
new nokia.maps.map.component.TypeSelector(),
new nokia.maps.positioning.component.Positioning(),
new nokia.maps.map.component.Behavior()
]
});
 
var routeArr = [52.53805, 13.4205, 52.53765, 13.42156, 52.53811, 13.42188, 52.53862, 13.42232, 52.53929, 13.42283, 52.53921, 13.42333, 52.53908, 13.42406, 52.53902, 13.4243, 52.53896, 13.4245, 52.53888, 13.42469, 52.5388, 13.42493, 52.53873, 13.42511, 52.53867, 13.42528, 52.53867, 13.42529, 52.53855, 13.42563, 52.53849, 13.42582, 52.53846, 13.42594, 52.53843, 13.42604, 52.53837, 13.4262, 52.53833, 13.42634, 52.53811, 13.427, 52.53791, 13.4276, 52.53766, 13.4283, 52.53752, 13.42868, 52.53733, 13.42931, 52.53709, 13.42996, 52.53662, 13.43133, 52.53613, 13.43275, 52.53601, 13.43305, 52.53569, 13.43384, 52.53542, 13.4344, 52.53475, 13.43576, 52.53429, 13.43667, 52.53402, 13.43727, 52.53333, 13.43876, 52.53206, 13.44128, 52.53198, 13.44142, 52.53177, 13.44167, 52.53142, 13.44204, 52.53118, 13.4423, 52.53029, 13.44325, 52.52946, 13.44411, 52.52956, 13.44444, 52.53017, 13.44612, 52.53058, 13.44723, 52.53056, 13.44727, 52.53007, 13.44781, 52.52989, 13.448, 52.52968, 13.44821, 52.52878, 13.44914, 52.52804, 13.44997, 52.52738, 13.45069, 52.52719, 13.45082, 52.52698, 13.45096, 52.52736, 13.45238, 52.52627, 13.45313, 52.5265, 13.45408, 52.52689, 13.45563, 52.52714, 13.45654, 52.52611, 13.45753, 52.52601, 13.45763, 52.52557, 13.45817, 52.52551, 13.45825, 52.52544, 13.45835, 52.52538, 13.45848, 52.52529, 13.45867, 52.52497, 13.4594, 52.52484, 13.4597, 52.52476, 13.45995, 52.52467, 13.4602, 52.52458, 13.46049, 52.5244, 13.46108, 52.52366, 13.46423, 52.52361, 13.46449, 52.52311, 13.46679, 52.52304, 13.46714, 52.52296, 13.4674, 52.52287, 13.46774, 52.52282, 13.46788, 52.5227, 13.4682, 52.5226, 13.46841, 52.5225, 13.46858, 52.52243, 13.46867, 52.52195, 13.46916, 52.52188, 13.46924, 52.5218, 13.46929, 52.52168, 13.46937, 52.52157, 13.46942, 52.52144, 13.46945, 52.52132, 13.46949, 52.52041, 13.46955, 52.51981, 13.46995, 52.51834, 13.47097, 52.51713, 13.47181, 52.51691, 13.47196, 52.51606, 13.47256, 52.51591, 13.47267, 52.51492, 13.47338, 52.51465, 13.47338, 52.51398, 13.47338, 52.51391, 13.47338, 52.51378, 13.47336, 52.51368, 13.47333, 52.51225, 13.47286, 52.51213, 13.47281, 52.51082, 13.47144, 52.51025, 13.47085, 52.50884, 13.46935, 52.50782, 13.4718, 52.50642, 13.47047, 52.5062, 13.47029, 52.50616, 13.47036, 52.50614, 13.47041, 52.50612, 13.47044, 52.50601, 13.47054, 52.50583, 13.47072, 52.50554, 13.47099, 52.50546, 13.47105, 52.50539, 13.47112, 52.50517, 13.47132, 52.50451, 13.47194, 52.50422, 13.47219, 52.50382, 13.47249, 52.50344, 13.47279, 52.50327, 13.47296, 52.50322, 13.47301, 52.50318, 13.47311, 52.50315, 13.47324, 52.5031, 13.47353, 52.50275, 13.47529, 52.50274, 13.47533, 52.50274, 13.47538, 52.50273, 13.47542, 52.5027, 13.47546, 52.50268, 13.47548, 52.50274, 13.47562, 52.50274, 13.47582, 52.50276, 13.47647, 52.50283, 13.47799, 52.50288, 13.47933, 52.5031, 13.48069, 52.50317, 13.48107, 52.50265, 13.48129, 52.50251, 13.48133, 52.50204, 13.48145, 52.5019, 13.47958];
 
// We create a polygon route, marker and a circle
var route = new nokia.maps.map.Polyline(
new nokia.maps.geo.Strip(
routeArr,
"values lat lng"),
{ color: "#00FF", width: 5 }
),
imageMarker = new nokia.maps.map.Marker(
route.path.get(0),
{
icon: "http://xxxxxxxxxxxxxxxxxxxxxxxxx/images/car.png",
$id: "marker",
anchor: {x: 22, y: 8}
}
);
map.objects.addAll([ route, imageMarker]);

Gps car.jpg We are now ready with the car and the route, what we need now is continuous coordinates from the GPS device to track the position of car on the map. To access GPS device we have to use nokia.maps.positioning.Manager() Nokia API.

We will be using watchPosition method to continuously get feed of the GPS sensor coordinates to position the car icon.

watchPosition (successCallback, errorCallback, options) returns a Number Starts periodically watching the positioning sensor and fires events containing the data, if there are changes ocurring

/* The positioning manager is only available if the browser used supports
* W3C geolocation API
*/

if (nokia.maps.positioning.Manager) {
var positioning = new nokia.maps.positioning.Manager();
 
// Monitors current position, if available the first given callback function is executed periodically else the second
positioning.watchPosition(
// If a position is provided by W3C geolocation API of the browser
function (position) {
var coords = position.coords;
marker.set("coordinate", coord);
// Force immediate re-render of the map display
map.update(-1, true);
},
// Something went wrong we wee unable to retrieve the GPS location
function (error) {
var errorMsg = "Location could not be determined: ";
 
// We determine what caused the error and generate error message
if (error.code == 1) errorMsg += "PERMISSION_DENIED";
else if (error.code == 2) errorMsg += "POSITION_UNAVAILABLE";
else if (error.code == 3) errorMsg += "TIMEOUT";
else errorMsg += "UNKNOWN_ERROR";
 
// Throw an alert with error message
alert(errorMsg);
}
);
}
168 page views in the last 30 days.
×