Geolocate API

[EricPollard2]

I am trying to insert the Geolocate API in the standard (simple) web app template (javascript) that is downloadable from ArcGIS Online, so that my application can have a button to press (either in the tool bar or directly on the map) and this will track the user. I am hoping that I can also allow them to pan around the map at will, but when the button is pushed again, it will take them back to their gps location. I have seen a similar button in the Public Maps Template Gallery? I have very basic coding knowledge, but if someone could tell me where I should insert the chunks of code I would appreciate it. Thanks ! -Eric

[KellyHutchins]

There are several downloadable templates available at ArcGIS.com - can you provide more details (the name) of the template you are working with?

[EricPollard2]

The "Basic Viewer" is the template that I have downloaded. I appreciate the help ! -Eric

[KellyHutchins · Accepted solution]

Eric,

With the geolocation api there are two methods you can use that allow you to find the users location getCurrentPosition and watchPosition. getCurrentPosition will find out the users current location. watchPostiion finds the current location then keeps checking for the users current location. watchPosition can be useful if you need to continuously track the users location.

Here's some general info on working with geolocation:

http://diveintohtml5.info/geolocation.html

And here are links to samples from the api that shows how to use both getCurrentLocation and watchPosition:

http://help.arcgis.com/en/webapi/javascript/arcgis/help/jssamples_start.htm#jssamples/exp_geolocate....
http://help.arcgis.com/en/webapi/javascript/arcgis/help/jssamples/mobile_geolocaterenderer.html

And here are some instructions on how to add a button to the Basic Viewer template that finds the users current location. If you need to continuously track the users location take a look a tthe samples above for details on how to accomplish this task:


1. Open the layout.js file in a text editor and add the following code to the end of the file:

function addGeolocation(){    var locateBtn = new dijit.form.Button({     id:'locateButton',     title:'Locate Me',     label:'Locate Me'   });   dojo.connect(locateBtn,"onClick",function(){             //find current location      if(navigator.geolocation){               //getCurrentPosition finds the users current location             navigator.geolocation.getCurrentPosition(zoomToLocation, locationError);        }   });    dojo.byId('webmap-toolbar-center').appendChild(locateBtn.domNode);    }             function locationError(error){             switch(error.code){               case error.PERMISSION_DENIED: alert("Location not provided");               break;               case error.POSITION_UNAVAILABLE: alert("Current location not available");               break;               case error.TIMEOUT: alert("Timeout");               break;               default: alert("unknown error");               break;             }         }        function zoomToLocation(location) {         //add the located point to the map and then zoom to that location           var pt = esri.geometry.geographicToWebMercator( new esri.geometry.Point(location.coords.longitude, location.coords.latitude));          map.graphics.clear();          var symbol = new esri.symbol.SimpleMarkerSymbol(esri.symbol.SimpleMarkerSymbol.STYLE_CIRCLE, 12,                new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID,               new dojo.Color([210, 105, 30, 0.5]), 8),                new dojo.Color([210, 105, 30, 0.9])         );         graphic = new esri.Graphic(pt, symbol);         map.graphics.add(graphic);         map.centerAndZoom(pt, 12);    }   

2. Add the following code to the initUi function (approximately line 349

 addGeolocation();

3. Save and run the app and when you push the 'Locate Me' button a graphic will be added to the map and it will zoom to your current location.

[RobertKirkwood]

What if i want to zoom to latitude/longitude i enter in to a textbox? How would that work?

[KellyHutchins]

There are a couple of ways to do this but one approach would be to use a modified version of the zoomToLocation function. You'll want to pass in your latitude and longitude values that  you read from the text box and use those as the zoom point.

var location = {
     latitude: mylat, //get lat value from text box 
     longitude: mylon // get lon value from text box 
}    
zoomToLocation(location);


function zoomToLocation(location) {  
        //add the located point to the map and then zoom to that location   
         var pt = esri.geometry.geographicToWebMercator( new esri.geometry.Point(location.longitude, location.latitude));  
         map.graphics.clear();  
         var symbol = new esri.symbol.SimpleMarkerSymbol(esri.symbol.SimpleMarkerSymbol.STYLE_CIRCLE, 12,   
              new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID,  
              new dojo.Color([210, 105, 30, 0.5]), 8),   
              new dojo.Color([210, 105, 30, 0.9])  
        );  
        graphic = new esri.Graphic(pt, symbol);  
        map.graphics.add(graphic);  
        map.centerAndZoom(pt, 12);  
   }  

[RobertKirkwood]

Excellent! Thank you!

[EricPollard2]

Kelly - Thank you so much! You have responded to two questions I have had in this forum in a very fast and thorough manner. I really appreciate it. I will be testing this out tonight and let you know how it goes. Thanks again!
-Eric

[JeffJacobson]

Here is a sample I made in Plunker with a geolocate button.