Show Address in Locate Button InfoTemplate (WAB 2.1)

[ChristopherSchreiber]

Hello all,

I have been working with WAB 2.1 DE and I wanted to be able to show the address of your location when the Locate Button is clicked. By default there is no popup that is displayed when the symbol that displays your location is clicked. I have made some edits to make this happen. 

Here is the code. It is the entire "widget.js" file for the "MyLocation" widget.

///////////////////////////////////////////////////////////////////////////
// Copyright © 2014 Esri. All Rights Reserved.
//
// Licensed under the Apache License Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
//
//    http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.
///////////////////////////////////////////////////////////////////////////

define([
    'dojo/_base/declare',
    'jimu/BaseWidget',
    "esri/dijit/LocateButton",
    "esri/InfoTemplate",
    "esri/tasks/locator",
    "esri/geometry/Point",
    'dojo/_base/html',
    'dojo/on',
    'dojo/_base/lang',
    'jimu/utils',
    'jimu/dijit/Message',
    'dojo/touch'
],
  function (
    declare, BaseWidget, LocateButton, InfoTemplate, Locator, Point, html, on, lang, jimuUtils) {
      var geoLocate;
      var clazz = declare([BaseWidget], {

          name: 'MyLocation',
          baseClass: 'jimu-widget-mylocation',

          startup: function () {
              this.inherited(arguments);
              this.placehoder = html.create('div', {
                  'class': 'place-holder',
                  title: this.label
              }, this.domNode);

              this.isNeedHttpsButNot = jimuUtils.isNeedHttpsButNot();

              if (true === this.isNeedHttpsButNot) {
                  console.log('LocateButton::navigator.geolocation requires a secure origin.');
                  html.addClass(this.placehoder, "nohttps");
                  html.setAttr(this.placehoder, 'title', this.nls.httpNotSupportError);
              } else if (window.navigator.geolocation) {
                  this.own(on(this.placehoder, 'click', lang.hitch(this, this.onLocationClick)));
              } else {
                  html.setAttr(this.placehoder, 'title', this.nls.browserError);
              }
          },

          onLocationClick: function () {
              if (html.hasClass(this.domNode, "onCenter") ||
                html.hasClass(this.domNode, "locating")) {
                  html.removeClass(this.domNode, "onCenter");
                  html.removeClass(this.placehoder, "tracking");
                  this._destroyGeoLocate();
              } else {
                  this._createGeoLocate();
                  this.geoLocate.locate();
                  html.addClass(this.placehoder, "locating");
              }
          },

          onLocate: function (parameters) {
              html.removeClass(this.placehoder, "locating");
              if (this.geoLocate.useTracking) {
                  html.addClass(this.placehoder, "tracking");
              }

              if (parameters.error) {
                  console.error(parameters.error);
                  // new Message({
                  //   message: this.nls.failureFinding
                  // });
              } else {
                  html.addClass(this.domNode, "onCenter");
                  this.neverLocate = false;
              }
          },

          _createGeoLocate: function () {
              var json = this.config.locateButton;
              json.map = this.map;
              if (typeof (this.config.locateButton.useTracking) === "undefined") {
                  json.useTracking = true;
              }
              json.centerAt = true;
              this.geoLocate = new LocateButton(json);
              this.geoLocate.infoTemplate = new InfoTemplate({}),
              this.geoLocate.startup();

              this.geoLocate.own(on(this.geoLocate, "locate", lang.hitch(this, this.onLocate)));
              on(this.geoLocate, "locate", lang.hitch(this, addPoint));
          },

          _destroyGeoLocate: function () {
              if (this.geoLocate) {
                  this.geoLocate.clear();
                  this.geoLocate.destroy();
              }

              this.geoLocate = null;
          },

          destroy: function () {
              this._destroyGeoLocate();
              this.inherited(arguments);
          }
      });

      var locator = new Locator("https://geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer");
      var address;

      function addPoint(evt) {
          var latitude = evt.position.coords.latitude;
          var longitude = evt.position.coords.longitude;
          locator.locationToAddress(new Point(longitude, latitude), 100);
          locator.on("location-to-address-complete", lang.hitch(this, function (AddressEvt) {
              if (AddressEvt.address.address) {
                  address = AddressEvt.address.address.Match_addr
              }
              else
                  address = "No Address Available."
              this.geoLocate.infoTemplate.setTitle("Your Current Location:");
              this.geoLocate.infoTemplate.setContent(
                "<b>Address: </b>" + address +
                "<br><b>Latitude: </b> " + latitude.toFixed(6) + "<br><b>Longitude: </b> " + longitude.toFixed(6)
                );
          }));
      }
      clazz.inPanel = false;
      clazz.hasUIFile = false;
      return clazz;
  });‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Please let me know if there are suggestions/questions!

I will be testing this in the newer versions of WAB.

Thank you!

Chris