×
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)
Oskar Bukolt (Talk | contribs)
m (Oskar Bukolt - - Demo)
(16 intermediate revisions by 4 users not shown)
Line 1: Line 1:
[[Category:Nokia Maps]][[Category:Code Snippet]][[Category:Code Examples]][[Category:Web Services]]
+
[[Category:Nokia Maps]][[Category:Code Examples]][[Category:JavaScript]]
 
{{Abstract|This article uses the Nokia Maps javascript API to calculate a route and display it on the map, and to display the current position of the user based on their GPS co-ordinates.}}
 
{{Abstract|This article uses the Nokia Maps javascript API to calculate a route and display it on the map, and to display the current position of the user based on their GPS co-ordinates.}}
 +
 +
{{ArticleNeedsUpdate|timestamp=20120418065144|user=[[User:Jasfox|Jasfox]]| This article refers to an outdated version  '''2.1.x''' of the API. Since version '''2.2.x''' the syntax has changed.}}
  
 
{{ArticleMetaData
 
{{ArticleMetaData
|sourcecode= <!-- Link to example source code e.g. [[Media:The Code Example ZIP.zip]] -->
+
|sourcecode=[http://planmyroute.info/gps_drive.html gps_drive.html]
 
|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= <!-- Devices tested against - e.g. ''devices=Nokia 6131 NFC, Nokia C7-00'') -->
 
|devices= <!-- Devices tested against - e.g. ''devices=Nokia 6131 NFC, Nokia C7-00'') -->
 
|sdk= <!-- SDK(s) built and tested against (e.g. [http://linktosdkdownload/ Nokia Qt SDK 1.1]) -->
 
|sdk= <!-- SDK(s) built and tested against (e.g. [http://linktosdkdownload/ Nokia Qt SDK 1.1]) -->
|platform= <!-- Compatible platforms - e.g. Symbian^1 and later, Qt 4.6 and later -->
+
|platform=HTML5 compliant browser
|devicecompatability= <!-- Compatible devices e.g.: All* (must have internal GPS) -->
+
|devicecompatability=Desktop (not Symbian^3 browser)
 
|dependencies=Nokia Maps 2.1.0
 
|dependencies=Nokia Maps 2.1.0
 
|signing=<!-- Signing requirements - empty or one of: Self-Signed, DevCert, Manufacturer -->
 
|signing=<!-- Signing requirements - empty or one of: Self-Signed, DevCert, Manufacturer -->
 
|capabilities=<!-- Capabilities required by the article/code example (e.g. Location, NetworkServices. -->
 
|capabilities=<!-- Capabilities required by the article/code example (e.g. Location, NetworkServices. -->
|keywords= Nokia Maps
+
|keywords= Nokia Maps, JavaScript, routing
 
|id= <!-- Article Id (Knowledge base articles only) -->
 
|id= <!-- Article Id (Knowledge base articles only) -->
 
|language= <!-- Language category code for non-English topics - e.g. Lang-Chinese -->
 
|language= <!-- Language category code for non-English topics - e.g. Lang-Chinese -->
Line 24: Line 26:
 
|creationdate=20111229
 
|creationdate=20111229
 
|author=[[User:Jackdenial]]
 
|author=[[User:Jackdenial]]
 +
}}
 +
{{SeeAlso|
 +
*  [http://api.maps.nokia.com/en/directions/intro.html Nokia Maps API]
 +
* [[Nokia Maps API - How to calculate a route between two points]]
 +
*  [[Nokia Maps API - Advanced Routing]]
 +
*  [http://api.maps.nokia.com/en/playground/examples/maps/services/routing.html A to B routing example]
 
}}
 
}}
  
Line 35: Line 43:
 
var map = new nokia.maps.map.Display(mapContainer, {
 
var map = new nokia.maps.map.Display(mapContainer, {
 
// Initial center and zoom level of the map
 
// Initial center and zoom level of the map
center: [52.51, 13.45],
+
center: [71.23, 23.23],
zoomLevel: 13,
+
zoomLevel: 17,
 
components:[
 
components:[
 
         new nokia.maps.map.component.ZoomBar(),
 
         new nokia.maps.map.component.ZoomBar(),
Line 45: Line 53:
 
});
 
});
  
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];
+
var router = new nokia.maps.routing.Manager();
 +
var tcoord = new nokia.maps.geo.Coordinate(71.23, 23.23)
  
// We create a polygon route, marker and a circle
+
var imageMarker = new nokia.maps.map.Marker(
var route = new nokia.maps.map.Polyline(
+
tcoord,
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",  
+
icon: "http://www.worcestershire.gov.uk/cms/images/car.png",  
 
$id: "marker",  
 
$id: "marker",  
 
anchor: {x: 22, y: 8}
 
anchor: {x: 22, y: 8}
 
}
 
}
 
);
 
);
map.objects.addAll([ route, imageMarker]);
+
 
 +
map.objects.addAll([imageMarker]);
 
</code>
 
</code>
  
Line 76: Line 79:
 
  * W3C geolocation API
 
  * W3C geolocation API
 
  */
 
  */
 
var tcoord;
 
 
if (nokia.maps.positioning.Manager) {
 
if (nokia.maps.positioning.Manager) {
 
var positioning = new 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
+
// Gets the current position periodically, if available the first given callback function is executed else the second
 
positioning.watchPosition(
 
positioning.watchPosition(
 
// If a position is provided by W3C geolocation API of the browser
 
// If a position is provided by W3C geolocation API of the browser
 
function (position) {
 
function (position) {
var coords = position.coords;
+
var coord = position.coords;
tcoord = coords;
+
tcoord = coord; //set the coordinates to a temporary variable which will be further used to calculate the route.
 
},  
 
},  
 
// Something went wrong we wee unable to retrieve the GPS location
 
// Something went wrong we wee unable to retrieve the GPS location
Line 103: Line 104:
 
);
 
);
 
}
 
}
 +
 +
// The function onRouteCalculated  will be called when a route was calculated
 +
var onRouteCalculated = function (observedRouter, key, value) {
 +
if (value == "finished") {
 +
var routes = observedRouter.getRoutes();
 +
 +
//create the default map representation of a route
 +
var mapRoute = new nokia.maps.routing.component.RouteResultSet(routes[0]).container;
 +
map.objects.add(mapRoute);
 +
 +
} else if (value == "failed") {
 +
alert("The routing request failed.");
 +
}
 +
};
 +
 +
/* We create on observer on router's "state" property so the above created
 +
* onRouteCalculated we be called once the route is calculated
 +
*/
 +
router.addObserver("state", onRouteCalculated);
 +
 +
  
 
function update_map(){
 
function update_map(){
 +
var modes = [{
 +
type: "shortest",
 +
transportModes: ["car"],
 +
options: "avoidTollroad",
 +
trafficMode: "default"
 +
}];
 
map.set("center", tcoord);
 
map.set("center", tcoord);
 
imageMarker.set("coordinate", tcoord);
 
imageMarker.set("coordinate", tcoord);
 +
var waypoints = new nokia.maps.routing.WaypointParameterList();
 +
waypoints.addCoordinate(new nokia.maps.geo.Coordinate(tcoord.latitude, tcoord.longitude));
 +
waypoints.addCoordinate(new nokia.maps.geo.Coordinate(tcoord.latitude + 0.01, tcoord.longitude + 0.01));
 +
router.calculateRoute(waypoints, modes);
 
// Force immediate re-render of the map display
 
// Force immediate re-render of the map display
 
map.update(-1, true);
 
map.update(-1, true);
 
}
 
}
 
+
window.setInterval("update_map()",10);  //Map Update frequency, which can be set to a upper value. We can also set it dynamic so that when the speed is high the interval would be low and when the speed is low the interval would be high.
+
window.setInterval("update_map()",300);  //Map Update frequency, which can be set to a upper value. We can also set it dynamic so that when the speed is high the interval would be low and when the speed is low the interval would be high.
  
 
</code>
 
</code>
 +
 +
==Demo==
 +
* http://planmyroute.info/gps_drive.html
 +
'''This demo currently only works for Desktop browsers but not mobile. We are working on it to make it compatible with Mobile Browsers.'''
  
 
==TODOs==
 
==TODOs==
 
+
* In this example, we are not allowing user to set his destination. The destination automatically gets set North-East side.
* In this example, the route of journey wont be recalculated. It will stay as it is. We should make the script in such a way that the first point of route should be the car (GPS location) and the rest of the points should be as it is.
+
* As the car moves, periodically the route should be recalculated after a specific period of time (say 1 minute to reduce data transfer)
+

Revision as of 11:41, 17 July 2012

This article uses the Nokia Maps javascript API to calculate a route and display it on the map, and to display the current position of the user based on their GPS co-ordinates.

Needs-update.pngThis article needs to be updated: If you found this article useful, please fix the problems below then delete the {{ArticleNeedsUpdate}} template from the article to remove this warning.

Reasons: jasfox (18 Apr 2012)
This article refers to an outdated version 2.1.x of the API. Since version 2.2.x the syntax has changed.

Article Metadata
Code Example
Source file: gps_drive.html
Compatibility
Platform(s): HTML5 compliant browser
Device(s): Desktop (not Symbian^3 browser)
Dependencies: Nokia Maps 2.1.0
Article
Keywords: Nokia Maps, JavaScript, routing
Created: jackdenial (29 Dec 2011)
Last edited: Oskar Bukolt (17 Jul 2012)

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: [71.23, 23.23],
zoomLevel: 17,
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 router = new nokia.maps.routing.Manager();
var tcoord = new nokia.maps.geo.Coordinate(71.23, 23.23)
 
var imageMarker = new nokia.maps.map.Marker(
tcoord,
{
icon: "http://www.worcestershire.gov.uk/cms/images/car.png",
$id: "marker",
anchor: {x: 22, y: 8}
}
);
 
map.objects.addAll([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. The watchPosition (successCallback, errorCallback, options) function 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();
 
// Gets the current position periodically, if available the first given callback function is executed else the second
positioning.watchPosition(
// If a position is provided by W3C geolocation API of the browser
function (position) {
var coord = position.coords;
tcoord = coord; //set the coordinates to a temporary variable which will be further used to calculate the route.
},
// 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);
}
);
}
 
// The function onRouteCalculated will be called when a route was calculated
var onRouteCalculated = function (observedRouter, key, value) {
if (value == "finished") {
var routes = observedRouter.getRoutes();
 
//create the default map representation of a route
var mapRoute = new nokia.maps.routing.component.RouteResultSet(routes[0]).container;
map.objects.add(mapRoute);
 
} else if (value == "failed") {
alert("The routing request failed.");
}
};
 
/* We create on observer on router's "state" property so the above created
* onRouteCalculated we be called once the route is calculated
*/

router.addObserver("state", onRouteCalculated);
 
 
 
function update_map(){
var modes = [{
type: "shortest",
transportModes: ["car"],
options: "avoidTollroad",
trafficMode: "default"
}];
map.set("center", tcoord);
imageMarker.set("coordinate", tcoord);
var waypoints = new nokia.maps.routing.WaypointParameterList();
waypoints.addCoordinate(new nokia.maps.geo.Coordinate(tcoord.latitude, tcoord.longitude));
waypoints.addCoordinate(new nokia.maps.geo.Coordinate(tcoord.latitude + 0.01, tcoord.longitude + 0.01));
router.calculateRoute(waypoints, modes);
// Force immediate re-render of the map display
map.update(-1, true);
}
 
window.setInterval("update_map()",300); //Map Update frequency, which can be set to a upper value. We can also set it dynamic so that when the speed is high the interval would be low and when the speed is low the interval would be high.

Demo

This demo currently only works for Desktop browsers but not mobile. We are working on it to make it compatible with Mobile Browsers.

TODOs

  • In this example, we are not allowing user to set his destination. The destination automatically gets set North-East side.
343 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.

×