Select to view content in your preferred language

How to add current location button to AGO Web App

2829
14
10-23-2013 10:23 AM
RichardLittlefield
Frequent Contributor
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
0 Kudos
14 Replies
KellyHutchins
Esri Notable Contributor
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.
0 Kudos
NathanSommers
Deactivated User
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
0 Kudos
RichardLittlefield
Frequent Contributor
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.
0 Kudos
KellyHutchins
Esri Notable Contributor
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.
0 Kudos
RichardLittlefield
Frequent Contributor
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!
0 Kudos