Add custom text to routing direction waypoints marker

Question

I'd like to add text to the waypoint markers in here maps, just like on their site, to be able to number the waypoints. It can get quite confusing if the route has over 20 waypoints.

This is my current routing code:

function drivingDirections(arr) {
    var waypointArray = new nokia.maps.routing.WaypointParameterList();

    for (var i = 0; i < arr.length; i++) {
        waypointArray.addCoordinate(new nokia.maps.geo.Coordinate(arr[i][0], arr[i][2]));
    }

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

    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);

            // Zoom to the bounding box of the route
            map.zoomTo(mapRoute.getBoundingBox(), false, "default");
        } else if (value === "failed") {
            alert("Sikertelen útvonaltervezés");
        }
    };

    router.addObserver("state", onRouteCalculated);
    router.calculateRoute(waypointArray, modes);
}

According to the documentation, this is how you can add text to a marker:

    var marker = new nokia.maps.map.StandardMarker([52.51, 13.4], {
        text: "Hi!"
    });

How can implement this in a routing request?

Right now it adds the default waypoint markers, which look like this:

Answer 1

If you want to alter the display of a route, you can't use the default RouteResultSet, you're going to have to implement your own logic for displaying the route Polyline and the waypoints. When you receive the route, just create a Container and throw the objects into it as you create them. You can alter the text and color of the StandardMarkers or replace them with custom Markers if you want. Something like this:

var legContainer = new nokia.maps.map.Container();
var onRouteCalculated = function (observedRouter, key, value) {
  if (value == "finished") {
    var firstroute = observedRouter.getRoutes()[0];
    // First clear any previous route.
    legContainer.objects.clear();    

    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
            }
          }
        ));
      } 
     map.objects.add(legContainer);
     map.zoomTo(legContainer.getBoundingBox(), true);
   } else if (value == "failed") {
      // Something has gone horribly wrong  e.g. route too long.
      alert("The routing request failed.");
  }
}

You can see an example of a custom route rendering here - it just sets the route polyline to a different color, but you should get the idea.

Assuming legContainer is given the correct scope, you can use legContainer.objects.clear(); to empty any MapObjects rendered previously.