Geolocation and tracking path. Use Graphics Layer of Feature Layer?

Discussion created by blee3467 on Nov 19, 2012
Latest reply on Nov 19, 2012 by schlot
I am a javascript newbie. I am working on a mobile app that will use geolocating to map the user's path along a trail. Eventually I'd like it to return the distance they travelled.

I think I'm on the right track but I'm having some issues. I got it to map the path, but when the button to end is clicked the app hangs and becomes unresponsive. This only happens if it is a long path and I would imagine it is because the polyline I'm creating is becoming too large. I am using a custom basemap in my application and have to project the points returned by the geolocator.

Should I use a Feature layer rather than the graphics layer? Is there another solution?

Here is the code:

function startWatch(){
   if (navigator.geolocation) {;
   pnts = [];   
   watchID = navigator.geolocation.watchPosition(showLocation, locationError, {maximumAge:30000, timeout:30000}); 
 function endWatch(){
 function showLocation(location) { 
  if (location.coords.accuracy <= 100) { 
   var geoService = new esri.tasks.GeometryService("http://myserver/ArcGIS/rest/services/Tools/Geometry/GeometryServer");
   //var pt = esri.geometry.geographicToWebMercator(new esri.geometry.Point(location.coords.longitude, location.coords.latitude)); 
   var pt = new esri.geometry.Point(location.coords.longitude, location.coords.latitude, new esri.SpatialReference ({wkid:4236}));   
   var outSR = new esri.SpatialReference({wkid: 3421}); 

   geoService.project([pt], outSR, function(projectedPoints) { 
    pt = projectedPoints[0]; // current location
    if (pnts.length === 1){
     map.centerAndZoom(pt, 4);
     polyline = new esri.geometry.Polyline(map.spatialReference); 
     startGraphic = new esri.Graphic(pt, startSymbol);;
    if (pnts.length >= 2){     
     var pnt1 = new esri.geometry.Point(pnts[pnts.length - 2], map.spatialReference); // last point
     if (location.coords.speed > 0){
      polyline.addPath([pnt1, pt]); esri.Graphic(polyline, polylineSymbol));
      if (endGraphic) { //if an end symbol already exists remove it; 
      endGraphic = new esri.Graphic(pt, endSymbol);;     
  else { 
   console.log("Point not added due to low accuracy: " + location.coords.accuracy);