How to access coordinates from My Location result

[FranklinAlexander]

Ok, I have to ask a very stupid question because this is frustrating me and I know it can't be that hard. I added the LocateButton to the 'NearMe' widget so anyone who needs to do a search for facilities in his/her area can search from their current gps position. Simple enough, accept that in order to tie the button to a search, I need to create a buffer around the gps position, only I can't figure out how to access the actual coordinates the My Location widgets zooms to. 

I won't post all of the code, just the snippets I added to the nearme widget for the LocateButton to work. 

_geoLocateButton: function() {
        if(this._zoomScale === null) {
            var zoomScale = parseInt(this._bufferParams.BufferDistance)*1609;
        } else {
            var zoomScale = this._zoomScale;
        }
        console.log("zoomScale =", zoomScale);
        this._myLocation = new LocateButton({
            map: this.map,
            scale: zoomScale,
            highlightLocation: false,
            useTracking: false,
            "class": "esriCTGeoLocate"
        }, domConstruct.create("div", {}, this.myLocation));
        this._myLocation.startup();
},

_connectGeoLocateHandler: function () {
      //handle select location button click event
      on(dojo.query('.zoomLocateButton'), 'click', lang.hitch(this, function() {
          this._onGeoLocateClick();
      }));
},


_onGeoLocateClick: function (evt) {
      this.map.infoWindow.hide();
      if (this._searchInstance) {
        this._searchInstance.clearSearchText();
      }
      
      //the function below needs a point feature produced from an event. I may be wrong,
      // but the LocateButton doesn't seem to output a point 'feature'. It can be 
      // configured to 'highlight' the zoomed to location, but is that the same thing?   
      // I guess the question is, how to I take the 'result' of LocateButton and turn it
      // into a usable point feature that can be passed to the _initWorkflow(evt) function?

      this._initWorkflow(evt); 
},
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

[RobertScheitlin__GISP · Accepted solution]

Franklin,

   You need to attach an event listener for the locate event on the LocateButton dijit.

https://developers.arcgis.com/javascript/3/jsapi/locatebutton-amd.html#event-locate 

[FranklinAlexander]

Thanks Robert. Once again you set me on the right track! Here is the working code in case anyone else is interested.

_geoLocateButton: function() {
        if(this._zoomScale === null) {
            var zoomScale = parseInt(this._bufferParams.BufferDistance)*1609;
        } else {
            var zoomScale = this._zoomScale;
        }
        this._myLocation = new LocateButton({
            map: this.map,
            scale: zoomScale,
            highlightLocation: false,
            useTracking: false,
            "class": "esriCTGeoLocate"
        }, domConstruct.create("div", {}, this.myLocation));
        this._myLocation.startup();
},

_connectGeoLocateHandler: function () {
      //handle select location button click event
      this.own(this._myLocation.on('locate', lang.hitch(this, this._onGeoLocate)));
},


_onGeoLocate: function (evt) {
      this.map.infoWindow.hide();
      if (this._searchInstance) {
        this._searchInstance.clearSearchText();
      }
      var geometry = evt.graphic
      console.log(geometry);
      this._initWorkflow({
          "feature": geometry,
          "isFeatureFromMapClick": false
      });
},‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

[RobertScheitlin__GISP]

Don't forget to mark this question as answered by clicking on the "Mark Correct" link on the reply that answered your question.

[asterxiang]

Hi Franklin, 

This is exactly what I need to implement. I am very new to Web AppBuilder Developer Edition. Can you tell me where I need to call the _geoLocateButton function? I have pasted your solution in the NearMe Widget.js file. 

[FranklinAlexander]

Aster,

I just called the _geoLocated function inside the _initWidgetComponents,, along with all of the other NearMe widget components. 

_initWidgetComponents: function () {
      var featureLayer = new FeatureLayer(this.config.searchLayers[0].url);
      //create graphic layer to add buffers
      this._bufferGraphicLayer = new GraphicsLayer();
      this.map.addLayer(this._bufferGraphicLayer);
      //create graphic layer to add search location graphic
      this._highlightGraphicsLayer = new GraphicsLayer();
      this.map.addLayer(this._highlightGraphicsLayer);
      //Create search widget
      this._createSearchInstance();
      //initialize buffer distance slider
      this._createSlider();
      // initialize legend
      this._createLegendOnLoad(featureLayer);
      //initialize loading indicator
      this._initLoading();
      //initialize layer list widget
      this._initLayerList();
      // show bufferslider widget if configured layers
      // are not polygon type and intersect polygon flag is disabled
      this._setBufferSliderVisiblity();
      //initialize geo locate butto
      this._geoLocateButton();
      this._connectGeoLocateHandler();
      //connect set location tool button handler if tool is configured
      if (this.config.showLocationTool) {
        this._connectSelectLocationHandler();
      }
      //create tool-tip to be shown on map move
      this._mapTooltip = domConstruct.create("div", {
        "class": "tooltip",
        "innerHTML": this.nls.selectLocationToolTip
      }, this.map.container);
      domStyle.set(this._mapTooltip, "position", "fixed");
      domStyle.set(this._mapTooltip, "display", "none");
      //reset the widget's components on window resize and on widget open
      this.own(on(window, 'resize', lang.hitch(this, this._onWindowResize)));
    },‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

[asterxiang]

Thank you Franklin!

I put them in the correct place, but I do not see a "Locate Me" button in the NearMe widget, isn't your code creates a Button so that when the Button is clicked, it uses the user's location to do the Near Me search? 

[FranklinAlexander]

Yes, when you create a new LocateButton, you will get a button with all of the css similar to the 'mylocation' button. You have to create a space for the new button, so just create a <div> in your HTML file with an attach point to hold the button. I have two buttons on my NearMe widget, so my HTML looks like this:

<div class="buttonContainer">
    <div class="esriCTSelectLocationDiv esriCTImgButtons esriCTSelectLocation esriCTHidden" data-dojo-attach-point="selectLocation"
        value aria-haspopup="true"  title="Locate on Map"></div>
    <div class="esriCTLocateHeader">${nls.locateHeaderText}</div>
    <div class="esriCTGeoLocationDiv esriCTGeoLocate" data-dojo-attach-point="myLocation"></div>
    <div class="esriCTMyLocationHeader">${nls.myLocationHeaderText}</div>
</div>‍‍‍‍‍‍‍

Hope this helps