ArcGIS JavaScript API Popup Not Referencing REST Service Layer

BenPeters1 · ‎10-16-2020

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>
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

RobertScheitlin__GISP · ‎10-19-2020

Ben,

There is nothing in your code that associates your layer with the search widgets result thus the search results does not have a "IN_COUNTRY" field. The search widget does not automatically search layers that are added to the map.

BenPeters1 · ‎10-19-2020

Hi Robert,

Thanks for the answer. That makes sense - I suppose that I was under the impression that referencing the variable popupCustom with popupTemplate within the Cyber_Areas featurelayer declaration would associate the search widget popup information with that of Cyber_Areas.

That being said, I'm a JS beginner, & am uncertain of how I can properly reference my feature layer. Do you know if it is it still possible using popupTemplate, & if so what I would need to add/look into? Or if the popupTemplate class will not work out for my purposes, what might?

p.s. the custom search widget text code (amongst many other troubleshooting answers I found related to Arc API) were answered by you - thanks for all of your help!

RobertScheitlin__GISP · ‎10-19-2020

Ben,

See if this helps. I have associated the layer in question with the search widget and have define an actual popup template:

<!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.16</title>

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

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

  <script>
    var view, map;
    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 template = {
          // autocasts as new PopupTemplate()
          title: "{Cmn_Name} : {Sci_Name}",
          content: [
            {
              // It is also possible to set the fieldInfos outside of the content
              // directly in the popupTemplate. If no fieldInfos is specifically set
              // in the content, it defaults to whatever may be set within the popupTemplate.
              type: "fields",
              fieldInfos: [
                {
                  fieldName: "Cmn_Name",
                  label: "Common Name"
                },
                {
                  fieldName: "Sci_Name",
                  label: "Scientific Name"
                },
                {
                  fieldName: "Condition",
                  label: "Condition",
                },
                {
                  fieldName: "Leaf_Area",
                  label: "Leaf Area",
                  format: {
                    digitSeparator: true,
                    places: 0
                  }
                }
              ]
            }
          ]
        };

      var Cyber_Areas = new FeatureLayer({
        url: "https://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/Landscape_Trees/FeatureServer/0",
        outFields: ["*"],
        popupTemplate: template
      });

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

      map.add(Cyber_Areas);

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

      var searchWidget = new Search({
        view: view,
        popupOpenOnSelect: false,
        sources: [{
          layer: Cyber_Areas,
          searchFields: ["Cmn_Name"],
          displayField: "Cmn_Name",
          exactMatch: false,
          outFields: ["*"],
          name: "Trees",
          placeHolder: "example: elm"
        }],
        includeDefaultSources: false
      });

      view.ui.add(searchWidget, {
        position: "top-left",
        index: 0
      });

    });
  </script>
</head>

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

</html>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

BenPeters1 · ‎10-19-2020

That helped indeed. I think that I see my error - I was confused & didn't think that I had to initialize a template variable. Thank you!