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

khutchins

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.html
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.