2 or more routes on one Ovi map

298 views Asked by At

I need to display 2 different, non-connected routes using Ovi mapping. But i am unable to get this to work. In google maps i just needed to define a routing object for each route, but this doesn't seem to work in Ovi. Does anyone have any idea how?

For reference, here is the code for one route:

    router = new ovi.mapsapi.routing.Manager();

    var onRouteCalculated = function(observedRouter, key, value)
    {
        if (value == "finished") 
        {
            var routes = observedRouter.getRoutes();
            var mapRoute = new ovi.mapsapi.routing.component.RouteResultSet(routes[0]).container;
            map.objects.add(mapRoute);
            map.zoomTo(mapRoute.getBoundingBox(), false, "default");
        } 
        else if(value == "failed") 
        {
            alert("The routing request failed.");
        }
    };

    router.addObserver("state", onRouteCalculated);

    var waypoints = new ovi.mapsapi.routing.WaypointParameterList();
    waypoints.addCoordinate(new ovi.mapsapi.geo.Coordinate(x, y))
    // coords are ommited, but just a line for every stop point in Lat/Lng format

    var modes =
    [{
        type: "shortest",
        transportModes: ["car"],
        options: "avoidTollroad",
        trafficMode: "default"
    }];

    router.calculateRoute(waypoints, modes);

Making another ovi.mapsapi.routing.Manager() object and using that for another route does not work. Letting the existing one handle the second route doesn't work either

Additionally i need to display a infobubble on each marker, but i am unable to find in what container they reside

1

There are 1 answers

0
Jason Fox On

You would be better off using Nokia Maps than Ovi Maps, as Nokia Maps is the 2.0 version of the Ovi Map API. It is possible to retrieve multiple routes through creating multiple managers which then use the same call back - the example below does just that:

In the example, the A and B markers are held in the container called "mapRoute" , the separate routes are held in an array called routesArr[]

    <!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>Concurrent Routing 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] }); 


var onAllManagersFinished = function() {     
    for (i = 0; i <routesArr.length; i++){

            console.log(routesArr[i]);

        var mapRoute = new nokia.maps.routing.component.RouteResultSet(routesArr[i]).container;
        display.objects.add(mapRoute);
        display.zoomTo(mapRoute.getBoundingBox(), true);
      }  
};

// we will use the same state observer function for all managers     

var onRouteCalculated = function (observedRouter, key, value) {
  if (value == "finished") {
        routesArr[observedRouter.$index] = observedRouter.getRoutes()[0];
        managersFinished++;
     } else if (value == "failed") {
      // Something has gone horribly wrong  e.g. route too long.
      alert("The routing request failed.");
      managersFinished++;
  }


  if(managersFinished === waypointsArr.length) {
             onAllManagersFinished(); 
        }   

};                 



var  routesArr = new Array();
var  waypointsArr = new Array();
var  MunichBerlin = new nokia.maps.routing.WaypointParameterList();
MunichBerlin.addCoordinate (new nokia.maps.geo.Coordinate(48.133333, 11.566667));
MunichBerlin.addCoordinate (new nokia.maps.geo.Coordinate(52.500556, 13.398889));

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

waypointsArr.push(MunichBerlin);
waypointsArr.push(BerlinHamburg);



var  i = waypointsArr.length;  
var  managersFinished = 0; 

// iterate over all route requests, create a manager for each of them, 
// add the observer and call the claculateRoute method 

while(i--) {    
    var router = new nokia.maps.routing.Manager(); 
     router.$index = i;
     router.calculateRoute(waypointsArr[i],  [{ 
                          type: "shortest", 
                          transportModes: ["car"],
                          options: "",
                          trafficMode: "default"
                          }]);
     router.addObserver("state", onRouteCalculated);
} 

</script> 
</body> 
</html>