AnsweredAssumed Answered

How to dynamically place coordinates in config file

Question asked by franklin.alexander on Feb 19, 2018
Latest reply on Feb 20, 2018 by franklin.alexander

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");
      }

Outcomes