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>

hello, if you look closely at the tutorial you should be able to find the inconsistency in your code...this is the money line: content:"${Date:DateFormat(selector: 'date', datePattern: 'MMMM d,yyyy')}<br>${City}, ${State}" . Some additional details here: developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… — luckyape
– luckyape, Commented Oct 17, 2020 at 13:34
Hi Luckyape, Thanks for the answer. I think that the "$" in front of formatting variables may be utilized for webmapping outside of ArcGIS, but that ESRI didn't adapt that syntax. — bp123bp
– bp123bp, Commented Oct 19, 2020 at 13:16

cabesuon · Accepted Answer · 2020-10-17 16:15:42Z

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.

Collectives™ on Stack Overflow

ArcGIS JavaScript API Popup Not Referencing REST Service Layer

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related