AnsweredAssumed Answered

ArcGIS JavaScript API Popup Not Referencing REST Service Layer

Question asked by bp123bp on Oct 16, 2020
Latest reply on Oct 19, 2020 by bp123bp

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>

Outcomes