topic Re: How to add current location button to AGO Web App in ArcGIS JavaScript Maps SDK Questions

How to add current location button to AGO Web App

RichardLittlefield — Wed, 23 Oct 2013 17:23:15 GMT

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

Re: How to add current location button to AGO Web App

ReneRubalcava — Wed, 23 Oct 2013 17:55:59 GMT

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.

Re: How to add current location button to AGO Web App

RichardLittlefield — Wed, 30 Oct 2013 16:37:02 GMT

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
   }
);

Re: How to add current location button to AGO Web App

NathanSommers — Wed, 30 Oct 2013 17:06:15 GMT

Hi Richard,

Try this thread. It explains it pretty well.

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

Re: How to add current location button to AGO Web App

RichardLittlefield — Wed, 30 Oct 2013 17:35:10 GMT

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.

Re: How to add current location button to AGO Web App

NathanSommers — Wed, 30 Oct 2013 18:11:37 GMT

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.

Re: How to add current location button to AGO Web App

RichardLittlefield — Wed, 30 Oct 2013 18:18:19 GMT

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.

Re: How to add current location button to AGO Web App

NathanSommers — Wed, 30 Oct 2013 18:20:46 GMT

Will do, thank you.

Re: How to add current location button to AGO Web App

KellyHutchins — Sun, 12 Dec 2021 16:29:24 GMT

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;
}

Re: How to add current location button to AGO Web App

NathanSommers — Thu, 31 Oct 2013 16:45:54 GMT

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

Re: How to add current location button to AGO Web App

KellyHutchins — Thu, 31 Oct 2013 16:58:52 GMT

The locate button uses the getCurrentPosition function of the Geolocation api. getCurrentPosition tries to get the location answer for you as quickly as possible and in some cases this means that it will return IP location or wifi instead of the device gps. You can try setting the enableHighAccuracy geolocation option to true. If this doesn't work you'll want to create your own button that uses the geolocation api with the watchPostion function. watchPosition will provide an updated location if the device moves or if more accurate information becomes available.

Re: How to add current location button to AGO Web App

NathanSommers — Thu, 31 Oct 2013 17:44:36 GMT

Is the watchPosition something I can add to the locate button code in the js file? You'll have to forgive me I'm very new with javascript .

Thank you,
Ian

Re: How to add current location button to AGO Web App

RichardLittlefield — Thu, 31 Oct 2013 18:02:36 GMT

The locate button uses the getCurrentPosition function of the Geolocation api. getCurrentPosition tries to get the location answer for you as quickly as possible and in some cases this means that it will return IP location or wifi instead of the device gps. You can try setting the enableHighAccuracy geolocation option to true. If this doesn't work you'll want to create your own button that uses the geolocation api with the watchPostion function. watchPosition will provide an updated location if the device moves or if more accurate information becomes available.

Thank you Kelly! Your code worked. I agree with Ian and would like to use the GPS on the device. So where can I place the enable High Accuracy code? How do I change it to the watchPosition?

Thank you.

Re: How to add current location button to AGO Web App

KellyHutchins — Thu, 31 Oct 2013 18:10:43 GMT

To enable high accuracy specify it as a geolocation option when creating the button. For details on how the geolocation options work view the Geolocation API Specification.

        var locateButton = new esri.dijit.LocateButton({
            map: map,
            geolocationOptions:{
                enableHighAccuracy: true
            }
        },"locateDiv");

Setting enableHighAccuracy to true tells the browser to try and find the most accurate location. So if a device GPS is available it would theoretically use that.

You can't switch the locate button to using watch position so if you'd like to use that option you'll need to write your own code to do so.

Re: How to add current location button to AGO Web App

RichardLittlefield — Fri, 01 Nov 2013 12:05:33 GMT

To enable high accuracy specify it as a geolocation option when creating the button. For details on how the geolocation options work view the Geolocation API Specification.

        var locateButton = new esri.dijit.LocateButton({
            map: map,
            geolocationOptions:{
                enableHighAccuracy: true
            }
        },"locateDiv");

Setting enableHighAccuracy to true tells the browser to try and find the most accurate location. So if a device GPS is available it would theoretically use that.

You can't switch the locate button to using watch position so if you'd like to use that option you'll need to write your own code to do so.

I've added this code to the layout file. Thank you!

If I'm understanding the options correctly should I also set the MaximumAge to zero, that way it looks for a new position everytime, and doesn't use a cached position? Should the timeout option be infinity? Or do these 2 options not matter that much?

Thanks for all of your help Kelly!