×
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 - - Introduction)
jackdenial (Talk | contribs)
(Jackdenial - - Unfolding the magic)
Line 36: Line 36:
 
route.path.get(0),
 
route.path.get(0),
 
{
 
{
icon: "http://www.worcestershire.gov.uk/cms/images/car.png",  
+
icon: "http://xxxxxxxxxxxxxxxxxxxxxxxxx/images/car.png",  
 
$id: "marker",  
 
$id: "marker",  
 
anchor: {x: 22, y: 8}
 
anchor: {x: 22, y: 8}
Line 42: Line 42:
 
);
 
);
 
</code>
 
</code>
 +
 +
[[File:gps_car.jpg]]

Revision as of 02:14, 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}
}
);

Gps car.jpg

227 page views in the last 30 days.
×