ArcGIS JavaScript API Popup Not Referencing REST Service Layer

Question

The content in the popup created through the variable "popupCustom" is displaying string instead of referencing the specified field {IN_COUNTRY}. I followed the ArcGIS JS API Popup Tutorials, & can't see what my error is in failing to grab the attributes associated with that field. Here's the code -- any help is greatly appreciated!

*note: feature layer url within "Cyber_Areas" variable points to REST URL for referenced Feature Class.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
  <title>Search widget with multiple sources - 4.6</title>

  <style>
    html,
    body,
    #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }
  </style>

  <link rel="stylesheet" href="https://js.arcgis.com/4.6/esri/css/main.css">
  <script src="https://js.arcgis.com/4.6/"></script>

  <script>
    require([
      "esri/Map",
      "esri/views/MapView",
      "esri/widgets/BasemapToggle",
      "esri/widgets/Legend",
      "esri/layers/TileLayer",
      "esri/layers/FeatureLayer",
      "esri/widgets/Search",
      "esri/widgets/LayerList",
      "esri/PopupTemplate",
      "dojo/on",
      "dojo/domReady!"
      
    ], function(
      Map,
      MapView,
      BasemapToggle,
      Legend,
      TileLayer,
      FeatureLayer,  
      Search,
      LayerList,
      PopupTemplate,
      on
      ) {

      var Cyber_Areas = new FeatureLayer({
        url: "*inserturl*",
        outFields: ["IN_COUNTRY"],
        popupTemplate: popupCustom 
      });

      var map = new Map({
        basemap: "osm"
      });

      map.add(Cyber_Areas);

      var view = new MapView({
        container: "viewDiv",
        map: map,
        center: [-87.172865, 34.077613], // lon, lat
        zoom: 16
      });

      var searchWidget = new Search({
        view: view,
        popupOpenOnSelect: false
      });
      
      view.ui.add(searchWidget, {
        position: "top-left",
        index: 0
      });
      
      var popupCustom = searchWidget.on('select-result', function(evt){
       //console.info(evt);     
        view.popup.open({
          location: evt.result.feature.geometry,  // location of the click on the view
          title: "Service Availability:",  // title displayed in the popup
          content: "<p><b>{IN_COUNTRY}"
        });
      });

    });
      
  </script>
</head>

<body>
  <div id="viewDiv"></div>
</body>
</html>

Answer 1

From your code you are mixing the popup template value with when to display it. And those are two different things.

First, you are not setting correctly the popup template of the layer. It should be a PopupTemplate .

It seems to me that in you code the layer definition should be something like this,

var Cyber_Areas = new FeatureLayer({
  url: "*inserturl*",
  popupTemplate: {
    outFields: ["IN_COUNTRY"],
    title: "Service Availability:",
    content: "<p><b>{IN_COUNTRY}</b></p>"
  } 
});

Now if you don't want the default behavior of the popup (left click on a feature), you cant disable it like this,

view.popup.autoOpenEnabled = false; // <- disable view popup auto open

And then you can open it wherever you want like this,

view.popup.open({ // <- open popup
  location: evt.result.feature.geometry, // <- use map point of the event result
  fetchFeatures: true // <- fetch the selected features (if any)
});

You have to understand that the fields you use in the content of the popup template are related to the layer. That is why i set in the popup of the view to fetch the results.

ArcGIS JavaScript API Popup Not Referencing REST Service Layer

Question

1 answers

solution1
1 2020-10-17 16:15:42

ArcGIS JavaScript API Popup Not Referencing REST Service Layer

Question

1 answers

solution1 1 2020-10-17 16:15:42

solution1
1 2020-10-17 16:15:42