How to add current location button to AGO Web App

[RichardLittlefield]

I have a Widows 7 Panasonic ToughPad for a field device. We are using ArcGIS Online for our mobile solution. Since Windows 7 doesn't have an app like iOS or Android, creating a Web Application is the only option.

If I create a Web Application with, for example the Basic Viewer there is no current location or locate me button. Is there a way to add one? I've downloaded the web app and have it running off our server. I've found the "locate button" ArcGIS APR for JavaScript (found in link below), and have tried adding it the web app code, but it doesn't work properly. I've also found code names for "GetCurrentLocation" and "WatchPosition" but don't know how to code those in.

Ultimately I'd like to add a locate button, that would use the device's GPS? I know the Parcel Viewer has a locate button. It works ok, not that great though. Even if there was a way to take the parcel viewer's locate button and put it into the other Web Applications, that would be better than nothing. As you can probably tell I'm not a programer, so don't understand the code that much.

Locate Button Link:
https://developers.arcgis.com/en/javascript/jssamples/widget_locate.html

[ReneRubalcava]

The LocateButton takes standard Geolocation API settings, such as enableHighAccuracy
https://developers.arcgis.com/en/javascript/jsapi/locatebutton-amd.html#geolocationoptions

This will use a GPS if available, if not, it does some fallbacks to other methods, but that is handled by the API.
Geolocation API specs
http://www.w3.org/TR/geolocation-API/#position-options

The widget actually has a github page showing all the options
https://github.com/driskull/arcgis-dijit-locate-button-js

I'm not familiar with the setup of the Basic Viewer, but you should be able to get the widget working with it. Do you have some code you used to try and add it to the viewer? Make sure the viewer is referencing version 3.7 of the AGS JS API.

[RichardLittlefield]

I have opened up the "layout.js" file from the javascript folder and just added the below code to the end of the file. It didn't work. Any ideas? Am I using the correct code?


   //one time snapshot
   navigator.geolocation.getCurrentPosition(
  processGeolocation,
  //optional settings below
  geolocationError,
  {
   timeout: 0,
   enableHighAccuracy: true,
   maximumAge: Infinity
  }
  );
 
  //Tracking user position
  watchID = navigator.geolocation.watchPosition(
   processGeolocation,
   //Optional settings below
   geolocationError,
   {
    timeout: 0,
    enableHighAccuracy: true,
    maximumAge: Infinity
   }
  );

[NathanSommers]

Hi Richard,

Try this thread.  It explains it pretty well.

http://forums.arcgis.com/threads/48343-Geolocate-API

[RichardLittlefield]

Hi Richard,

Try this thread.  It explains it pretty well.

http://forums.arcgis.com/threads/48343-Geolocate-API

Thanks Ian. Unfortunetly I have already done that one. It works pretty good. Could be better though.

I like the idea of the HighAccuracy = true from one of the post above. I'd like it to be more accurate, and use the device's GPS. I also like the idea of the standard look of the current location button. I'm also interested in the watchPostion function.

I have the one that you mentioned in my back pocket, to use if I can't get anything else working. I'm still trying though to get a better option. Thanks again.

[NathanSommers]

You're welcome, sorry it was't more help.

I was under the impression that HighAccuracy = true used the device GPS, I forget where I read that however.  I'm also trying to do the same thing with a web editing app and the LocateButton I found at https://developers.arcgis.com/en/javascript/jssamples/widget_locate.html but I'm having trouble getting my code to work with the locate button.

[RichardLittlefield]

You're welcome, sorry it was't more help.

I was under the impression that HighAccuracy = true used the device GPS, I forget where I read that however.  I'm also trying to do the same thing with a web editing app and the LocateButton I found at https://developers.arcgis.com/en/javascript/jssamples/widget_locate.html but I'm having trouble getting my code to work with the locate button.

I'd like to use that locate button as well. Sounds like we are in the same boat. Update me if you figure it out, I'll do the same.

[NathanSommers]

Will do, thank you.

[KellyHutchins]

Here's some info on how to add the locate button to the basic viewer. Let me know if you have any questions.

1. Open layout.js and load the LocateButton module by adding the following code at the top of layout.js below the existing dojo.require statements.

dojo.require("esri.dijit.LocateButton");

2. Now find the line of code that sets the map variable to response.map. You can find this by searching for map = response.map. It should be at approximately line 215 of layout.js. Below that line of code add the following code to create the LocateButton.

        //add locate button 
        var locateButton = new esri.dijit.LocateButton({
            map: map
        },"locateDiv");
        locateButton.startup();

3. Open index.html and add a new div. This div will be the container for the locate button. Add this new div directly below the existing timeFloater div.

          <!--Floating window contains the time slider-->
            <div id="timeFloater" style='display:none;'></div>
            <div id="locateDiv"></div> 

4. Open layout.css and add css that will position the layout button on the map. The example below will position this button directly below the +/- slider.

#locateDiv{
  position: absolute;
  top:120px;
  left:20px;
  z-index: 30;
}

[NathanSommers]

Hey Kelly,

Thanks for the input.  Do you know if there is anyway to leverage the device GPS for the location much like ArcGIS for iPad or ArcGIS for Android App?

Thanks