Where am I? Adding the locate button.

Blog Post created by csergent08 on Jan 8, 2015

While in the field, it's important to know where you are, especially with a mobile app. In the mobile apps in my organization, staff need to enter information on site, so it's ideal to zoom to your current location when the app opens. Rather than having geolocation active at all times, we will give the user control using the locate button, but instead of having to click on the button to get your location on start up, we'll have the app start up with our current location. Just a shout out to Kelly Hutchins for helping me get this to work along with many other code questions that I have and will continue to have, I have doubt.


To get our locate button to work, we just need to update our application in four places:

Step 1

Add the element to your content or your html page.



Step 2

Define how it should display for presentation in you css.



Step 3

Add the information to your require statement.

"esri/dijit/LocateButton",                 // locateButton


Don't forget to add LocateButton as your variable in the function that follows the require statement references.


Step 4

Write the code to have the locate button run on startup.

// Begin geolocate button - https://community.esri.com/message/440082#440082
             // add geolocate button to find the location of the current user
             map.on("load", function () {
                 geoLocate = new LocateButton({
                     map: map,
                     highlightLocation: true,
                     useTracking: true,
                     enableHighAccuracy: true
                 }, "locateButton");
                 geoLocate.clearOnTrackingStop = true;
             // End geolocate button


As you can see the locate button runs as soon as you start the application. If the user wants to, they can click on the locate button again which will turn locate off and allow them to move around without the map updating.


That's all there is to it. Next up; we will add the overview map to this application. To see the code in it's entirety checkit out at https://github.com/csergent45/gisMobile