×
Namespaces

Variants
Actions
Revision as of 02:07, 30 December 2011 by jackdenial (Talk | contribs)

HERE Maps API - Route planning and journey plotting

From Nokia Developer Wiki
Jump to: navigation, search

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://www.worcestershire.gov.uk/cms/images/car.png",
$id: "marker",
anchor: {x: 22, y: 8}
}
);
320 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.

×