Directions REST API here

I am trying to use the routing REST API from here but the response of the API does not make much sense to me.

When I call this URL

https://route.cit.api.here.com/routing/7.2/calculateroute.json?waypoint0=51.5141%2C-0.0999&waypoint1=51.5081%2C-0.0985&mode=fastest%3Bpedestrian&app_id=DemoAppId01082013GAL&app_code=A...

I get a response that looks something like

{
"response": {
    "metaInfo": {
        "timestamp": "2016-06-06T17:40:58Z",
        "mapVersion": "8.30.62.155",
        "moduleVersion": "7.2.68.0-14232",
        "interfaceVersion": "2.6.24"
    },
    "route": [{
        "waypoint": [{
            "linkId": "-25305763",
            "mappedPosition": {
                "latitude": 51.5140062,
                "longitude": -0.0998158
            },
            "originalPosition": {
                "latitude": 51.5141,
                "longitude": -0.0999
            },
            "type": "stopOver",
            "spot": 0.6708861,
            "sideOfStreet": "right",
            "mappedRoadName": "St Paul's Churchyard",
            "label": "St Paul's Churchyard",
            "shapeIndex": 0
        }, {
            "linkId": "-1113519286",
            "mappedPosition": {
                "latitude": 51.5082735,
                "longitude": -0.098473
            },
            "originalPosition": {
                "latitude": 51.5081,
                "longitude": -0.0985
            },...

That does not look like something I could display on a leaflet map (i.e. a polyline in json or something like that).

How am I to interpret that? How would I get a line that I can display on a map?

Solution

Extracting the latitude-longitude pairs from that data structure and building an instance of L.Polyline is quite trivial:

var latlngs = [];

for (var i in json.response.route[0].waypoint) {
    var p = json.response.route[0].waypoint[i].mappedPosition;
    latlngs.push(L.latlng(p.latitude, p.longitude));
}

var line = L.polyline( latlngs );