topic Re: adding xy to popup in WAB applicaiton in ArcGIS Web AppBuilder Questions

adding xy to popup in WAB applicaiton

MuhammadFayaz — Sun, 19 Nov 2017 12:16:36 GMT

Hello,

I want to add xy to map popup window in WAB application for the map location where i clicked. Any help?

Re: adding xy to popup in WAB applicaiton

XanderBakker — Sun, 19 Nov 2017 15:06:38 GMT

There are several option that will come "close" to want you want, but it is not similar as the experience you have with identify in ArcMap or ArcGIS Pro.

In the WAB you have the Coordinates widget which is normally activated by default.

It will show the coordinates in the lower left corner. If you click on the part indicated with the red square in the image below:

... you will be able to click in any location of the map and copy the coordinates of the location as shown below:

Another option is to use the coordinate conversion widget:

This wil allow you to click on a location of the map and convert the coordinates:

However, you want the coordinates to appear in the pop-up. The options showed before do not do that. You can do something similar, but it may not be what you want. A pop-up appears when you click on a feature. With ArcGIS Arcade | ArcGIS for Developers you can create expressions that result in virtual fields that show (derived) properties of the feature you clicked on. For points that is swell since you clicked on the point and you can extract the coordinates and show them in the pop-up like this:

The pop-up will show like this:

It is different with lines and polygons, since the coordinate you derive will probably not coincide with the point where you clicked.

Might be a good idea to post this as an idea.

Re: adding xy to popup in WAB applicaiton

RobertScheitlin__GISP — Sun, 12 Dec 2021 05:43:19 GMT

Muhammad,

To add another WAB specific code change to what Xander has already listed, here is some code changes you can make to the jimu\PopupManger.js to add the coordinates to all popups shown.

(changes to the _bindSelectionChangeEvent are lines 4 and 5. Then add the new function addLatLon):

      _bindSelectionChangeEvent: function(){
        on(this.popupUnion.bigScreen, "selection-change", lang.hitch(this, this._onSelectionChange));
        on(this.popupUnion.mobile, "selection-change", lang.hitch(this, this._onSelectionChange));
        on(this.popupUnion.bigScreen, "show,selection-change", lang.hitch(this, this.addLatLon));
        on(this.popupUnion.mobile, "show,selection-change", lang.hitch(this, this.addLatLon));
      },

      addLatLon: function () {
        var mobilePopupEvt;
        setTimeout(lang.hitch(this, function(){
          var node, anchor, mobileButton;
          if(!this.mapManager.isMobileInfoWindow){
            node = dojo.query("[dojoattachpoint=\"_description\"]", this.popupUnion.bigScreen.domNode)[0];
            anchor = this.popupUnion.bigScreen.location;
          }else{
            if(!mobilePopupEvt){
              mobileButton = dojo.query(".titleButton.arrow", this.popupUnion.mobile.domNode)[0];
              mobilePopupEvt = on(mobileButton, "click", lang.hitch(this, function(){
                node = dojo.query("[dojoattachpoint=\"_description\"]")[0];
                anchor = this.popupUnion.mobile.location;
                if(node && anchor){
                  var addStr = "<br><br>Latitude: " + anchor.getLatitude() + ", Longitude: " + anchor.getLongitude();
                  if(node.innerHTML.indexOf(addStr) < 0){
                    node.innerHTML += addStr
                  }
                }
              }));
            }
          }

          if(node && anchor){
            var addStr = "<br><br>Latitude: " + anchor.getLatitude() + ", Longitude: " + anchor.getLongitude();
            if(node.innerHTML.indexOf(addStr) < 0){
              node.innerHTML += addStr
            }
          }
        }), 50);
      },‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: adding xy to popup in WAB applicaiton

MuhammadFayaz — Mon, 20 Nov 2017 06:29:46 GMT

Thank you Xander,

Your post did help me understand the situation.

Re: adding xy to popup in WAB applicaiton

MuhammadFayaz — Mon, 20 Nov 2017 06:30:09 GMT

Thank you Robert,

It works for me!

Re: adding xy to popup in WAB applicaiton

RobertScheitlin__GISP — Sun, 12 Dec 2021 05:43:22 GMT

Muhammad,

Here is a better version that is now well tested with mobile and formatted to look like regular results in the popup:

      _bindSelectionChangeEvent: function(){
        on(this.popupUnion.bigScreen, "selection-change", lang.hitch(this, this._onSelectionChange));
        on(this.popupUnion.mobile, "selection-change", lang.hitch(this, this._onSelectionChange));
        on(this.popupUnion.bigScreen, "show,selection-change", lang.hitch(this, this.addLatLon));
        on(this.popupUnion.mobile, "show,selection-change", lang.hitch(this, this.addLatLon));
      },

      addLatLon: function () {
        var mobilePopupEvt;
        setTimeout(lang.hitch(this, function(){
          var node, anchor, mobileButton;
          if(!this.mapManager.isMobileInfoWindow){
            node = dojo.query("[dojoattachpoint=\"_description\"]", this.popupUnion.bigScreen.domNode)[0];
            anchor = this.popupUnion.bigScreen.location;
            if(node && anchor){
              this._insertLatLonRows(node, anchor);
            }
          }else{
            if(!mobilePopupEvt){
              mobileButton = dojo.query(".titleButton.arrow", this.popupUnion.mobile.domNode)[0];
              mobilePopupEvt = on(mobileButton, "click", lang.hitch(this, function(){
                this._addMobileLatLon();
              }));
            }
            this._addMobileLatLon();
          }
        }), 50);
      },

      _addMobileLatLon: function(){
        var node, anchor;
        node = dojo.query("[dojoattachpoint=\"_description\"]")[0];
        anchor = this.popupUnion.mobile.location;
        if(node && anchor){
          this._insertLatLonRows(node, anchor);
        }
      },

      _insertLatLonRows: function(node, anchor) {
        var attTable = node.children[0];
        var attTableBody = attTable.getElementsByTagName('tbody')[0];
        var lastRow = attTableBody.rows[attTableBody.rows.length - 1];
        var lastCell = attTableBody.rows[attTableBody.rows.length - 1].cells[1];
        var lon = anchor.getLongitude() + "";
        if(lastCell.innerText === lon){
          return;
        }
        var newRow  = attTableBody.insertRow(attTableBody.rows.length);
        var newCell  = newRow.insertCell(0);
        newCell.className = "attrName"
        var newText  = document.createTextNode('Latitude: ');
        newCell.appendChild(newText);
        newCell  = newRow.insertCell(1);
        newCell.className = "attrValue"
        var newText  = document.createTextNode(anchor.getLatitude());
        newCell.appendChild(newText);

        newRow  = attTableBody.insertRow(attTableBody.rows.length);
        newCell  = newRow.insertCell(0);
        newCell.className = "attrName"
        newText  = document.createTextNode('Longitude: ');
        newCell.appendChild(newText);
        newCell  = newRow.insertCell(1);
        newCell.className = "attrValue"
        var newText  = document.createTextNode(anchor.getLongitude());
        newCell.appendChild(newText);
      },‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: adding xy to popup in WAB applicaiton

Anonymous User — Thu, 17 Jan 2019 12:00:02 GMT

Hey Robert Scheitlin, GISP‌!

Love this solution -- one 'issue' I found is that this doesn't play nice with your Popup Panel widget. I've been trying to do some debugging on it and can't quite seem to pin down what's causing the issue.

Even when I change the dojo.query(...) node to [1], where it should find the dojoattachpoint="_description" attribute of the node in the popup panel, this continues to append / interact with the first result [0] of the dojo.query result. Interestingly, when I run the JS in the console after changing the dojo query to interact with the second result (dojo.query(...)[1]) I get the expected behavior.

Could you point me in the right direction as to what needs to be modified for this functionality to properly append content into the Popup Panel?

Re: adding xy to popup in WAB applicaiton

RobertScheitlin__GISP — Thu, 17 Jan 2019 14:36:46 GMT

Andrew,

This code is not developed at all for use with the popup panel. It attempts to use the popups anchor (this the popup panel does not have) to get the coordinates of the feature. I did that to handle geometries like lines and polygons. Needless to say the code would take some significant re-engineering to work in the popup panel.

Re: adding xy to popup in WAB applicaiton

Anonymous User — Thu, 17 Jan 2019 14:47:49 GMT

Right on -- happy to know I wasn't missing something glaring here