Issue with popup URL in "Create a FeatureLayer with client side graphics - 4.0" example

2308
3
06-16-2016 09:59 AM
douglascurl
New Contributor III


This example: https://developers.arcgis.com/javascript/latest/sample-code/sandbox/sandbox.html?sample=layers-featu...  returns a URL in the popup for each mapped point, but the URL is encoded incorrectly from the returned JSON. I'm at a loss on how to correctly encode the URL - help?

Tags (3)
0 Kudos
3 Replies
FC_Basson
MVP Regular Contributor

The link in the popup of the sample uses the Esri server as home location, so the complete link will never work.  You'l need to take the last part of the popup link e.g. http%3A%2F%2Fearthquake.usgs.gov%2Fearthquakes%2Feventpage%2Fak13139479 and run the standard JS decodeURIComponent function on it.

decodeURIComponent("http%3A%2F%2Fearthquake.usgs.gov%2Fearthquakes%2Feventpage%2Fak13139479");
// returns "http://earthquake.usgs.gov/earthquakes/eventpage/ak13139479"
KristianEkenes
Esri Regular Contributor

Thanks for pointing out this issue. We'll fix the sample. Another option is to display a table of fields using fieldInfos  like this:

var pTemplate = {
    title: "{title}",
    content: [{
      type: "fields",
      fieldInfos: [{
        fieldName: "place",
        label: "Location",
        visible: true
      }, {
        fieldName: "time",
        label: "Date and time",
        visible: true
      }, {
        fieldName: "mag",
        label: "Magnitude",
        visible: true
      }, {
        fieldName: "mmi",
        label: "Intensity",
        visible: true
      }, {
        fieldName: "depth",
        label: "Depth",
        visible: true
      }, {
        fieldName: "felt",
        label: "Number who felt the quake",
        visible: true,
        format: {
          digitSeparator: true,
         places: 0
        }
      }, {
        fieldName: "sig",
        label: "Significance",
        visible: true
      }, {
        fieldName: "url",
        label: "More info",
        visible: true
      }]
    }],
    fieldInfos: [{
      fieldName: "time",
      format: {
        dateFormat: "short-date-short-time"
      }
    }]
  };

Then the link will be clickable in the table:

Screen Shot 2016-06-17 at 11.13.44 AM.png

douglascurl
New Contributor III

Thanks - I just found that removing the single quotes from the href=' in the also works - the URL in my JSON was returned the same way that the USGS url is returned (as a normal URL pointing to an outside location) - thanks for fixing the sample, and for the suggestion.

-Doug

0 Kudos