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

4357
8
04-09-2015 08:00 AM
AndrewGianikas
New Contributor III

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!

Tags (2)
0 Kudos
8 Replies
TomSellsted
MVP Regular Contributor

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

AndrewGianikas
New Contributor III

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

0 Kudos
KellyHutchins
Esri Frequent Contributor

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

0 Kudos
AndrewGianikas
New Contributor III

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?

0 Kudos
KellyHutchins
Esri Frequent Contributor

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

              }

            });

          });

        });

AndrewGianikas
New Contributor III

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!

0 Kudos
AndrewGianikas
New Contributor III

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.

0 Kudos
KellyHutchins
Esri Frequent Contributor

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.

0 Kudos