how can i, create a nokia.maps.map.Polyline using a nokia.maps.routing.Manager?

**upixsoul** · 2012-05-28, 18:16

at this moment, im trying this:

var poly = new nokia.maps.map.Polyline(routes.shape,{pen: {strokeColor: "#8dc72d", lineWidth: 5}});

where routes its a nokia.maps.routing.Manager that have a calculated route.

where is this wrong?

**jasfox** · 2012-05-29, 08:27

You can get a generated polyline and two markers directly from the RouteResultSet

For a simple code example look at the developer playground:
http://api.maps.nokia.com/en/playgro...xample_routing

A commentary on this can be found in the community wiki:
http://www.developer.nokia.com/Commu...een_two_points

To extract multiple legs from a single route, check out the example at:
http://www.developer.nokia.com/Commu...ween-waypoints

**upixsoul** · 2012-05-29, 15:35

Originally Posted by jasfox

You can get a generated polyline and two markers directly from the RouteResultSet

For a simple code example look at the developer playground:
http://api.maps.nokia.com/en/playgro...xample_routing

A commentary on this can be found in the community wiki:
http://www.developer.nokia.com/Commu...een_two_points

To extract multiple legs from a single route, check out the example at:
http://www.developer.nokia.com/Commu...ween-waypoints

im using this example precisely
http://api.maps.nokia.com/en/playgro...xample_routing

what i want to do is get the polyline from the result, and in a function, send the coordinate of a point, and by using the polyline`s getNearest (coord)
know how much separate is the coordinate of the route

**upixsoul** · 2012-05-29, 22:02

can you help me with that?

**jasfox** · 2012-05-30, 09:58

You are on the right lines, use

var nearestCoord =Polyline.getNearest(GeoCoordinate); to get the nearest point on a polyline
and nearestCoord.distance(GeoCoordinate) to calculate the distance between the two.

Move the red marker in the example below. The green marker will move to the closest point on the route to the red marker.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html> 
<head>
		<script type="text/javascript" charset="UTF-8" src="http://api.maps.nokia.com/2.2.0/jsl.js?routing=auto"></script>
    <title>Nearest Point to a Route example</title>
</head>
<body>

<div id="mapContainer" style="top:30%; width:100%; height:70%; position: absolute;"></div>
 
<script type="text/javascript">
/////////////////////////////////////////////////////////////////////////////////////
// Don't forget to set your API credentials
//
// Replace with your appId and token which you can obtain when you 
// register on http://api.developer.nokia.com/ 
//
			nokia.Settings.set( "appId", "YOUR APP ID GOES HERE"); 
			nokia.Settings.set( "authenticationToken", "YOUR AUTHENTICATION TOKEN GOES HERE");
			
//			
/////////////////////////////////////////////////////////////////////////////////////
 
 
//initialize a new map 
var display = new nokia.maps.map.Display(document.getElementById("mapContainer"), 
                     {     "components": [	
                                     new nokia.maps.map.component.ZoomBar(),                 
                                     new nokia.maps.map.component.Behavior(),                 
                                     new nokia.maps.map.component.TypeSelector()],     
                                     "zoomLevel": 13,
                                     "center" : [52.500556, 13.398889] }); 

// This conatiner will hold the calculated route. 
var legContainer = new nokia.maps.map.Container(); 
  
// Place this anywhere on the route .
var markerForNearestPoint = new nokia.maps.map.StandardMarker([48.133333, 11.566667], 
{  
brush: {color: '#00FF00'} ,                                   
});  

// Place this anywhere in the world.
var draggableMarker = new nokia.maps.map.StandardMarker([52.4, 12.0], 
{  
text:  "X",  
brush: {color: '#FF0000'} ,                 
draggable: true,                     
});   
// Add the two markers to the map.

display.objects.add(markerForNearestPoint);  
display.objects.add(draggableMarker); 

// When the red marker is moved, move the green marker to the nearest point on the route.
draggableMarker.addListener("dragend", function(evt) {	 
	 var markerCoord = draggableMarker.coordinate;
	 // The Example contains separate legs, but could be done on any Polyline(s)....
	 for (var i = 0;  i < legContainer.objects.getLength(); i++){
	 			 if ( legContainer.objects.get(i) instanceof nokia.maps.map.Polyline ) { 
	 			 			// this is a Polyline , it must be must a leg....
	 			 			var nearestCoord =legContainer.objects.get(i).getNearest(draggableMarker.coordinate);
	 			 		if (nearestCoord.distance(markerCoord) <  markerForNearestPoint.coordinate.distance(markerCoord)){
	 			 				markerForNearestPoint.set( "coordinate", nearestCoord);
	 			 	  }
	 			}
	 
	 } 
});




 
var onRouteCalculated = function (observedRouter, key, value) {
  if (value == "finished") {
	   var firstroute = observedRouter.getRoutes()[0];
		 
	    
	    
	    for (var i = 0;  i < firstroute.waypoints.length; i++){
				
					legContainer.objects.add(new nokia.maps.map.StandardMarker(
						firstroute.waypoints[i].mappedPosition, 
						{ text: i  + 1 }
					));
		}
	    
	    for (var i = 0;  i < firstroute.legs.length; i++){
	    	
	    		var strokeColor = "#22CA";
	    	
	    		if (i % 2 == 0){	    	  
	    	  		strokeColor = "#CACA00"
	    	  }
	    		    		
	    		legContainer.objects.add(new nokia.maps.map.Polyline(
							firstroute.legs[i].points,
							{	
								pen: {
									strokeColor: strokeColor, 
									lineWidth: 5
								}
							}
						));
	    }	
	    
	    	
	   display.objects.add(legContainer);
	   display.zoomTo(legContainer.getBoundingBox(), true);
	   
	   
	   
	   
	   
	   

	 } else if (value == "failed") {
      // Something has gone horribly wrong  e.g. route too long.
      alert("The routing request failed.");
  }

  
};                 


var  MunichBerlinHamburg = new nokia.maps.routing.WaypointParameterList();
MunichBerlinHamburg.addCoordinate (new nokia.maps.geo.Coordinate(48.133333, 11.566667));
MunichBerlinHamburg.addCoordinate (new nokia.maps.geo.Coordinate(52.500556, 13.398889));
MunichBerlinHamburg.addCoordinate(new nokia.maps.geo.Coordinate(53.565278, 10.001389));


	var router = new nokia.maps.routing.Manager(); 
	 router.calculateRoute(MunichBerlinHamburg,  [{ 
		                  type: "shortest", 
		                  transportModes: ["car"],
		                  options: "",
		                  trafficMode: "default"
		                  }]);
	 router.addObserver("state", onRouteCalculated);
 
</script> 
</body> 
</html>

**upixsoul** · 2012-05-30, 15:54

Originally Posted by jasfox

You are on the right lines, use

var nearestCoord =Polyline.getNearest(GeoCoordinate); to get the nearest point on a polyline
and nearestCoord.distance(GeoCoordinate) to calculate the distance between the two.

Move the red marker in the example below. The green marker will move to the closest point on the route to the red marker.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html> 
<head>
		<script type="text/javascript" charset="UTF-8" src="http://api.maps.nokia.com/2.2.0/jsl.js?routing=auto"></script>
    <title>Nearest Point to a Route example</title>
</head>
<body>

<div id="mapContainer" style="top:30%; width:100%; height:70%; position: absolute;"></div>
 
<script type="text/javascript">
/////////////////////////////////////////////////////////////////////////////////////
// Don't forget to set your API credentials
//
// Replace with your appId and token which you can obtain when you 
// register on http://api.developer.nokia.com/ 
//
			nokia.Settings.set( "appId", "YOUR APP ID GOES HERE"); 
			nokia.Settings.set( "authenticationToken", "YOUR AUTHENTICATION TOKEN GOES HERE");
			
//			
/////////////////////////////////////////////////////////////////////////////////////
 
 
//initialize a new map 
var display = new nokia.maps.map.Display(document.getElementById("mapContainer"), 
                     {     "components": [	
                                     new nokia.maps.map.component.ZoomBar(),                 
                                     new nokia.maps.map.component.Behavior(),                 
                                     new nokia.maps.map.component.TypeSelector()],     
                                     "zoomLevel": 13,
                                     "center" : [52.500556, 13.398889] }); 

// This conatiner will hold the calculated route. 
var legContainer = new nokia.maps.map.Container(); 
  
// Place this anywhere on the route .
var markerForNearestPoint = new nokia.maps.map.StandardMarker([48.133333, 11.566667], 
{  
brush: {color: '#00FF00'} ,                                   
});  

// Place this anywhere in the world.
var draggableMarker = new nokia.maps.map.StandardMarker([52.4, 12.0], 
{  
text:  "X",  
brush: {color: '#FF0000'} ,                 
draggable: true,                     
});   
// Add the two markers to the map.

display.objects.add(markerForNearestPoint);  
display.objects.add(draggableMarker); 

// When the red marker is moved, move the green marker to the nearest point on the route.
draggableMarker.addListener("dragend", function(evt) {	 
	 var markerCoord = draggableMarker.coordinate;
	 // The Example contains separate legs, but could be done on any Polyline(s)....
	 for (var i = 0;  i < legContainer.objects.getLength(); i++){
	 			 if ( legContainer.objects.get(i) instanceof nokia.maps.map.Polyline ) { 
	 			 			// this is a Polyline , it must be must a leg....
	 			 			var nearestCoord =legContainer.objects.get(i).getNearest(draggableMarker.coordinate);
	 			 		if (nearestCoord.distance(markerCoord) <  markerForNearestPoint.coordinate.distance(markerCoord)){
	 			 				markerForNearestPoint.set( "coordinate", nearestCoord);
	 			 	  }
	 			}
	 
	 } 
});




 
var onRouteCalculated = function (observedRouter, key, value) {
  if (value == "finished") {
	   var firstroute = observedRouter.getRoutes()[0];
		 
	    
	    
	    for (var i = 0;  i < firstroute.waypoints.length; i++){
				
					legContainer.objects.add(new nokia.maps.map.StandardMarker(
						firstroute.waypoints[i].mappedPosition, 
						{ text: i  + 1 }
					));
		}
	    
	    for (var i = 0;  i < firstroute.legs.length; i++){
	    	
	    		var strokeColor = "#22CA";
	    	
	    		if (i % 2 == 0){	    	  
	    	  		strokeColor = "#CACA00"
	    	  }
	    		    		
	    		legContainer.objects.add(new nokia.maps.map.Polyline(
							firstroute.legs[i].points,
							{	
								pen: {
									strokeColor: strokeColor, 
									lineWidth: 5
								}
							}
						));
	    }	
	    
	    	
	   display.objects.add(legContainer);
	   display.zoomTo(legContainer.getBoundingBox(), true);
	   
	   
	   
	   
	   
	   

	 } else if (value == "failed") {
      // Something has gone horribly wrong  e.g. route too long.
      alert("The routing request failed.");
  }

  
};                 


var  MunichBerlinHamburg = new nokia.maps.routing.WaypointParameterList();
MunichBerlinHamburg.addCoordinate (new nokia.maps.geo.Coordinate(48.133333, 11.566667));
MunichBerlinHamburg.addCoordinate (new nokia.maps.geo.Coordinate(52.500556, 13.398889));
MunichBerlinHamburg.addCoordinate(new nokia.maps.geo.Coordinate(53.565278, 10.001389));


	var router = new nokia.maps.routing.Manager(); 
	 router.calculateRoute(MunichBerlinHamburg,  [{ 
		                  type: "shortest", 
		                  transportModes: ["car"],
		                  options: "",
		                  trafficMode: "default"
		                  }]);
	 router.addObserver("state", onRouteCalculated);
 
</script> 
</body> 
</html>

thank you so much! thats wath i wanted to do! domo arigato, muchas gracias, thanks! its perfect!

Discussion Board

Thread: how can i, create a nokia.maps.map.Polyline using a nokia.maps.routing.Manager?

Thread Tools

Search Thread

Rate This Thread

Display

Similar Threads

nokia.maps.routing.WaypointParameterList is not a function

Is there a way to convert Maps Data from Nokia Maps 3 to be compatible with N Maps 2

Navigation route coordinates from Nokia Maps or Ovi Maps

Navigation route coordinates from Nokia Maps or Ovi Maps

[Announce] Create maps with Yahoo MAPS API supporting PyS60

Posting Permissions