topic Re: Turn-by-turn directions... display the next step? in ArcGIS JavaScript Maps SDK Questions

Turn-by-turn directions... display the next step?

AndrewGianikas — Thu, 09 Apr 2015 15:00:48 GMT

I have an app I am working on which displays the map and turn by turn directions, and that is working great. I am also able to track the users current location and display the location along the map route as they progress.

What I would like to do is display the next step in the directions. Is there a way to determine the current step or next step based on the user's current coordinates? I have tried searching for this in forums and checked through the API docs but haven't had any luck yet.

Any help is greatly appreciated!

Re: Turn-by-turn directions... display the next step?

TomSellsted — Thu, 09 Apr 2015 15:39:21 GMT

Andrew,

Here is a link to an app that was created by by Vinicius Machuca for a dev summit challenge. It has code that allows you to toggle through each direction. You can probably use it or modify the code to get the next direction for your app.

100-lines-or-less-js/PocketDirections at master · Esri/100-lines-or-less-js · GitHub

Regards,

Tom

Re: Turn-by-turn directions... display the next step?

AndrewGianikas — Thu, 09 Apr 2015 17:30:14 GMT

Thank you Tom! I will check this out and let you know how it goes.

Re: Turn-by-turn directions... display the next step?

KellyHutchins — Thu, 09 Apr 2015 18:17:44 GMT

Here's another app that is a bit old and kind of clunky but shows how to navigate through the direction steps:

https://dl.dropboxusercontent.com/u/24627279/Directions.html

Re: Turn-by-turn directions... display the next step?

AndrewGianikas — Thu, 09 Apr 2015 19:29:56 GMT

Thanks Kelly. I checked this out... that it is very close but I have to manually swipe to get the next step in the directions. What I am hoping is a possibility is that based on the users current location (I am watching the current location and refreshing the graphic every second) I could some how automatically determine the next step.

I was thinking since I have a graphic which represents the users location, in there a way to detect an intersection/overlap between the user location graphic and one of the route segments?

Re: Turn-by-turn directions... display the next step?

KellyHutchins — Thu, 09 Apr 2015 21:20:09 GMT

There are many ways to do this but here's a quick proof of concept that shows one approach. Here I wait until the route directions have been generated. Once they are ready I use the Geolocation API to find the current location then check and see if that location is contained within the extent of any of the route features. If it is then I can access the route directions for that feature. For other ways of testing to see if the point is on the route line look into performing a spatial query or using the geometryService (intersect, touches etc) methods.

on(directionsWidget, "directions-finish", function(e){

var routeFeatures = directionsWidget.directions.features;

navigator.geolocation.watchPosition(function(position){

locationLayer.clear(); //clear existing location graphic

var location = new Point(position.coords);

//Add a test point on the map so we can see the current location

locationLayer.add(new Graphic(location, new SimpleMarkerSymbol()));

array.forEach(routeFeatures, function(routeFeature){

var featureExtent = routeFeature.geometry.getExtent();

if(featureExtent.contains(location)){

console.log("Feature within route extent");

//Add the extent graphic for testing so we can see when

// our location is within the extent envelope

locationLayer.add(new Graphic(featureExtent, new SimpleFillSymbol()));

var directions = routeFeature.attributes.text;

var turnType = routeFeature.attributes.maneuverType;

console.log(directions + " " + turnType);

}

});

Re: Turn-by-turn directions... display the next step?

AndrewGianikas — Fri, 10 Apr 2015 15:36:56 GMT

Kelly, thank you! If I could give you a high five, I would. I will play around with this (next week) and let you guys know how this goes. Happy Friday!

Re: Turn-by-turn directions... display the next step?

AndrewGianikas — Fri, 10 Apr 2015 15:43:05 GMT

Kelly Hutchins, any chance you could take a look at this thread?:

Issue: Javascript api 3.13, tap on android not opening graphic's infowindow

When researching this issue I found some solutions posted by you that seemed to work for various older versions of the api but I didn't have any luck.

Re: Turn-by-turn directions... display the next step?

KellyHutchins — Fri, 10 Apr 2015 16:16:44 GMT

Andrew Gianikas unfortunately I no longer have an android device that I can use to test this. I did test with an Android emulator and it worked fine. For issues like this that are specific to a particular device/platform it might be worth logging an issue with Esri support. They have the resources to troubleshoot this issue with various devices.