javascriptjsonmapzen

Returning turn-by-turn data as a string or JSON with Mapzen


I have been using this library to get the maneuver data from a set route using Mapzen's turn-by-turn data API. Although I have no issues setting up the map and route, I have a hard time accessing the object/string that holds where the vehicle needs to turn at each point (left, right, etc) so I can use it with a GPS. Getting it as a string or JSON would be perfect, I just don't know what to do at this point.

I have found that there is a way to do this from the documentation but I either don't understand it or am trying to do it the wrong way so I was wondering if someone more experienced could help me out or give me some ideas on how I might me able to pull this off.

Here's my code so far for the script (all of the files are attached below):

// Create a map. Targets div with id 'map'.
var map = L.map('map');

var layer = Tangram.leafletLayer({
  scene: 'https://raw.githubusercontent.com/tangrams/refill-style/gh-pages/refill-style.yaml',
  attribution: '<a href="https://mapzen.com/tangram" target="_blank">Tangram</a> | <a href="http://www.openstreetmap.org/about" target="_blank">&copy; OSM contributors | <a href="https://mapzen.com/" target="_blank">Mapzen</a>',
}); // End of layer.

// Adds the styles and attributions to the map.
layer.addTo(map);

// Set the default view of the map (Bristol).
// No need to use this when a route is being displayed.
//map.setView([51.4545,-2.5879], 16);

// Sets a route and adds it to the map, it requires two points and their respective latitude and longitude.
L.Routing.control({
      waypoints: [
        L.latLng(51.4998,-2.5468),
        L.latLng(51.5055,-2.5603)
      ]
    }).addTo(map);

// I used a log to try and find out which object has the turn-by-turn data. No luck so far.
console.log(L.Routing.mapzen('mapzen-xxxxxxx', `{costing:'auto'}));

Project files of what I have so far (at the end of the post on GitHub): https://github.com/mapzen/lrm-mapzen/issues/72

Thank you for reading, I would be extremely grateful if someone gave me a hand with this.


Solution

  • Crossposting this answer from the github issue mentioned above:

    var sampleLatLngs = [L.Routing.waypoint(L.latLng(51.4998,-2.5468)), L.Routing.waypoint(L.latLng(51.5055,-2.5603))];
    
    // You can grab free api key at https://mapzen.com/developers
    var router = L.Routing.mapzen('your-api-key', {costing: 'pedestrian'});
    
    // We are just going to print out route turned from the server
    var sampleFunction = function(err, routes) {
        // Check your browser console
        console.log(routes);
    }
    
    router.route(sampleLatLngs, sampleFunction);
    

    If you check your browser, you will see the response from the server. instructions property probably has the info you want.