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:
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) {
map.graphics.clear();
pnts = [];
watchID = navigator.geolocation.watchPosition(showLocation, locationError, {maximumAge:30000, timeout:30000});
}
}
function endWatch(){
navigator.geolocation.clearWatch(watchID);
}
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
pnts.push(pt);
if (pnts.length === 1){
map.centerAndZoom(pt, 4);
polyline = new esri.geometry.Polyline(map.spatialReference);
startGraphic = new esri.Graphic(pt, startSymbol);
map.graphics.add(startGraphic);
}
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]);
map.graphics.add(new esri.Graphic(polyline, polylineSymbol));
if (endGraphic) { //if an end symbol already exists remove it
map.graphics.remove(endGraphic);
}
endGraphic = new esri.Graphic(pt, endSymbol);
map.graphics.add(endGraphic);
}
}
});
}
else {
console.log("Point not added due to low accuracy: " + location.coords.accuracy);
}
}