topic Re: How to dynamically place coordinates in config file in ArcGIS Web AppBuilder Questions

How to dynamically place coordinates in config file

FranklinAlexander — Sat, 11 Dec 2021 16:35:10 GMT

I have a details panel in my nearme widget that shows details for a particular facility which are taken from the layer attributes. A 'directions' link is located at the bottom of the details panel, so that when clicked, Google Maps opens in another browser window. As of right now, the destination autofills with the coordinates of the facility in detail, which grabs the coordinates from the 'latitude' and 'longitude' fields in the table. It is proving to be more of a challenge to get the 'origin' to autofill, since I need to grab these coordinates from the widget.js file dynamically (which is not the issue), and then insert them into the popup 'description' in the config.json file (this is proving more difficult).

Below is the code from the config file and the js file. The "description" is where I need to insert the origin coordinates. I know the href link works, because I tested in by hard coding the origin coordinates. I have tried coming at this from two ways. The first, by inserting a key/value into the config file for the originLat and originLong and then grabbing the coordinates from the 'selectedFeature, and inserting them into the config file values. This is simple enough, but I don't know how the grab them and place them into the href link in the description. I tried using a placeholder, but I cannot find the right syntax, and I am not sure that it is possible.

I also tried placing the coordinates directly into the href link by using the replace() method, but it isn't working. I think this has to do with the fact that the entire description is wrapped in quotes, and I think replace() will only work on the entire string. Am I going about this the wrong way? I am open to any suggestions!

//nearme widget config.json
{
  "fontColor": "#000000",
  "searchLayers": [
    {
      "originLatitude": null,
      "originLongitude": null,
      "popupInfo": {
        "title": "{Facility_Name}",
        "fieldInfos": [
          {
            "fieldName": "OBJECTID",
            "label": "OBJECTID",
            "tooltip": "",
            "visible": false,
            "stringFieldOption": "textbox"
          },
          {
            "fieldName": "Shape",
            "label": "Shape",
            "tooltip": "",
            "visible": false,
            "stringFieldOption": "textbox"
          },
          {
            "fieldName": "Longitude",
            "label": "Longitude",
            "tooltip": "",
            "visible": false,
            "format": {
              "places": 2,
              "digitSeparator": true
            },
            "stringFieldOption": "textbox"
          },
          {
            "fieldName": "Latitude",
            "label": "Latitude",
            "tooltip": "",
            "visible": false,
            "format": {
              "places": 2,
              "digitSeparator": true
            },
            "stringFieldOption": "textbox"
          },
        ],
        "description": "<table width='100%'>\n<tbody>\n<tr><td width='50%'>Street Address</td><td>{popup_Address}</td></tr>\n<tr><td width='50%'>City</td><td>{City}</td></tr>\n<tr><td width='50%'>State</td><td>{ST}</td></tr>\n<tr><td 
        width='50%'>Zip Code</td><td>{Zip_Code}</td></tr>\n<tr><td width='50%'>Permit Type</td><td>{Permit_Type}</td></tr>\n<tr><td width='50%'>Comments</td><td>{Comments}</td></tr>\n<tr><td width='50%'>Phone</td><td><a href=\"tel:{Phone}\">{Phone}</a></td></tr>\n<tr><td width='50%'>Alternate Phone</td><td><a href=\"tel:{Alt_Phone}\">{Alt_Phone}</a></td></tr>\n<tr><td colspan='2'><br /><a href='https://www.google.com/maps?saddr= originCoordsGoHere &daddr={Latitude},{Longitude}'>Directions</a>\n</td>\n</tr>\n</tbody>\n</table>",
        "showAttachments": false,
        "mediaInfos": []‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

//code from nearme widget.js file

//method 1
_initWorkflow: function (evt) {
      var selectedFeature, horzontalSliderNode;
      //clear previous results
      this._clearResults(true);
      //get selected feature
      selectedFeature = this._getSelectedFeatureFromResult(evt);
      //console.log("selectedFeature = ", selectedFeature);
      //get and configure selectedFeature lat/long for google directions
      var normalizedVal = webMercatorUtils.xyToLngLat(selectedFeature.geometry.x, selectedFeature.geometry.y);
      _originLongitude = normalizedVal[0];
      _originLatitude = normalizedVal[1];
      this.config.originLongitude = _originLongitude;
      this.config.originLatitude = _originLatitude;

//method 2
_initWorkflow: function (evt) {
      var selectedFeature, horzontalSliderNode;
      //clear previous results
      this._clearResults(true);
      //get selected feature
      selectedFeature = this._getSelectedFeatureFromResult(evt);
      var jsonDesc = this.config.searchLayers[0].popupInfo.description;
      if (jsonDesc.includes("originCoords")) {
          alert("originCoords found!");
          var originCoords = _originLatitude + ',' + _originLongitude;
          jsonDesc.replace("originCoords", "this is not working");
      } else {
          alert("originCoords not found");
      }
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: How to dynamically place coordinates in config file

RobertScheitlin__GISP — Mon, 19 Feb 2018 22:13:55 GMT

Franklin,

It looks like you are looking for

var originCoords = _originLatitude + ',' + _originLongitude;‍

but what is in the desc is {Latitude},{Longitude}

also I am not familiar with the includes method on a string:

if (jsonDesc.includes("originCoords")) {‍

Normally I would use:

if (jsonDesc.indexOf‍(originCoords) > 0) {‍‍

Notice no quotes since you are using a var and not wanting a literal string of "originCoords"

Re: How to dynamically place coordinates in config file

FranklinAlexander — Tue, 20 Feb 2018 14:38:27 GMT

Robert,

The {Latitude},{Longitude} in the Desc are attribute fields in the feature class, and are capturing the destination coordinates for Google maps. What I want to do is capture the origin coordinates taken from the users location, or from a click on the map to insert into Google maps 'starting point' in the directions pane. I have everything set up correctly to capture the coordinates, I am just having trouble figuring out how to insert the coordinates dynamically into a variable in the href link located in the config file. I hope this makes sense, and I know there is a fairly straight forward way to do this, but it is escaping me! Using the replace() method actually works, but as you said I am replacing a string, not a variable, so there is no easy way to update the coordinates whenever someone clicks the map again. I can easily create a 'key' in the config file that is null, and can be easily accessed and updated whenever the origin position changes on the map, but I don't know how to 'connect' this to a variable in the href link further down in the config file. That way the href link would update as the origin coordinate key updates. I am about 90% certain this is just about finding the right syntax, but easier said than done!

I am working on the indexOf angle right now, but I still need to use a variable or placeholder in the href link so I can clear in out/redefine it whenever there is another click event, or the origin position changes.

Thanks!

Re: How to dynamically place coordinates in config file

FranklinAlexander — Sat, 11 Dec 2021 16:35:13 GMT

Got it to work, I just went back to what I was doing before and replaced 'originCoords' with the actual coordinates. Then I used a global variable to hold the original Desc content and reset whenever there is another 'onClick' or position change event. There is probably a more efficient method, but I can always change it later.

_initWorkflow: function (evt) {
      this.config.searchLayers[0].popupInfo.description = this._popupDesc; //global var
      //console.log("global popupDesc: ", this._popupDesc);
      var selectedFeature, horzontalSliderNode;
      //clear previous results
      this._clearResults(true);
      //get selected feature
      selectedFeature = this._getSelectedFeatureFromResult(evt);
      //get and configure selectedFeature lat/long for google directions
      var normalizedVal = webMercatorUtils.xyToLngLat(selectedFeature.geometry.x, selectedFeature.geometry.y);
      _originLongitude = normalizedVal[0];
      _originLatitude = normalizedVal[1];
      var originCoords = _originLatitude + ',' + _originLongitude;
      var result = this._popupDesc.replace(new RegExp ('originCoords', 'i'), originCoords);
      this.config.searchLayers[0].popupInfo.description = result;‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍