Returning turn-by-turn data from a route.

[csalmeida]

I have been using this library to get the maneuver data from a set route. 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 bellow):

// 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.

// Add's 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 diplayed.
//map.setView([51.4545,-2.5879], 16);

// Set's a route and add's it to the map, it requires two points and their respective latitute 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-apikey', `{costing:'auto'}));

Project files of what I have so far: mapzen_turns_incomplete.zip

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

[hanbyul-here]

Hi! Mapzen's tutorial is mainly to spin up lrm-mapzen UI on the map. (and also, it is outdated! thanks for letting us be aware of that! we will update the page soon!)

but lrm-mapzen also lets you access to the response through callback. This behavior is documented on Leaflet Routing Machine docs.

so code snippet is going to be like this

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

var layer = Tangram.leafletLayer({
  scene: 'https://mapzen.com/carto/refill-style/refill-style.zip',
  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.

// Add's the styles and attributions to the map.
layer.addTo(map);

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. (instruction, maneuver type) . (Mind that you are going to need your own api key. Also the code snippet above is not going to show anything other than console since we didn't set the view of the map) !

I hope it helps!

[csalmeida]

Hi!

Thank you very much! That's what I was looking for. Do you know if there's a function that simplifies those routes as just (left, right, straight)? Either way that's already really good for what we are trying to achieve.

Thanks again @hanbyul-here, your explanation is very helpful!

[hanbyul-here]

@csalmeida There is no function helping it, but parsing routes is pretty straightforward. Also, notice that our response has various types of instruction go to type part of the docs and check how many maneuver types are there!

You can access to this type number through instructionsproperty like this.

  for ( var i = 0; i < routes[0].instructions.length; i++) {
    // Getting maneuver type from instruction
     var maneuverType = routes[0].instructions[i].type;
     console.log(maneuverType);
  }

Then you can generate some instructions like left, sharp left with maneuverType variable's value.

[csalmeida]

That's perfect, got it now! I can't thank you enough for putting so much time into helping me with this issue @hanbyul-here!