Popup Template Title in a WebMap

JaredPilbeam2 · ‎11-19-2018

I'm in 4.9. How can I get the popup to display the title of each field using a Webmap? Right now, when you click the feature in the app the title displays as "Sheet1".

The feature layer in the Webmap is actually "Warming Center".

In the JS (below) I have the Title set up to display the "FACILITY_NAME" field. But, that's not happening. If I use the Map class instead of a Webmap the title displays in the popup just fine. But, in this case I'd rather user a Webmap.

        var webmap = new WebMap({
         portalItem: {
             id: "93b7e42b2ca64790aa2315da5eceaff9"
         }
        });
      /************************************************************
       * Set the WebMap instance to the map property in a MapView.
       ************************************************************/
        var view = new MapView({
          map: webmap,
          container: "viewDiv",
          popup: {
            dockEnabled: true,
            dockOptions: {
              // Disables the dock button from the popup
              buttonEnabled: false,
              // Ignore the default sizes that trigger responsive docking
              breakpoint: false,
            }
          }
        });
        //Popup template
        var template = { // autocasts as new PopupTemplate()
          title: "{FACILITY_NAME}",
          content: [{
            type: "fields",
            fieldInfos: [{
              fieldName: "FACILITY_TYPE",
              label: "Facility Type",
              visible: true,
            }, {
              fieldName: "ADDRESS",
              label: "Address",
              visible: true,
            }, {
              fieldName: "WEBSITE",
              label: "Website",
              visible: true,
            }, {
              fieldName: "PHONE_NUMBER",
              label: "Phone",
              visible: true,
            }, {
              fieldName: "HOURS",
              label: "Hours",
              visible: true,
            }]
          }]
        };
        //Reference the popupTemplate instance in the popupTemplate property of FeatureLayer
        var featureLayer = new FeatureLayer({
          url: "https://services.arcgis.com/fGsbyIOAuxHnF97m/arcgis/rest/services/Warming_Centers_in_and_around_Will...",
          outFields: ["*"],
          popupTemplate: template
        });‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

I haven't found any reference or help explaining this.
WebMap | API Reference | ArcGIS API for JavaScript 4.9

This sample uses a webmap, but I don't see where they set the Title parameter.
ArcGIS API for JavaScript Sandbox

RobertScheitlin__GISP · ‎11-19-2018

Jared,

The WebMap already has the warming centers layer added so you are adding it again in your code and the Web Map layer has the title defined as Sheet1 for some reason. Here is what you need to do to fix this issue:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
  <title>Intro to PopupTemplate - 4.9</title>

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

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

  <script>
    require([
      "esri/WebMap",
      "esri/layers/FeatureLayer",
      "esri/views/MapView"
    ], function(
      WebMap,
      FeatureLayer,
      MapView
    ) {

      // Create the map
      var webmap = new WebMap({
        portalItem: { // autocasts as new PortalItem()
          id: "93b7e42b2ca64790aa2315da5eceaff9"
        }
      });

      // Create the MapView
      var view = new MapView({
        container: "viewDiv",
        map: webmap,
        popup: {
          dockEnabled: true,
          dockOptions: {
            // Disables the dock button from the popup
            buttonEnabled: false,
            // Ignore the default sizes that trigger responsive docking
            breakpoint: false,
          }
        }
      });

      /*************************************************************
       * The PopupTemplate content is the text that appears inside the
       * popup. {fieldName} can be used to reference the value of an
       * attribute of the selected feature. HTML elements can be used
       * to provide structure and styles within the content. The
       * fieldInfos property is an array of objects (each object representing
       * a field) that is use to format number fields and customize field
       * aliases in the popup and legend.
       **************************************************************/

      //Popup template
      var template = { // autocasts as new PopupTemplate()
        title: "{FACILITY_NAME}",
        content: [{
          type: "fields",
          fieldInfos: [{
            fieldName: "FACILITY_TYPE",
            label: "Facility Type",
            visible: true,
          }, {
            fieldName: "ADDRESS",
            label: "Address",
            visible: true,
          }, {
            fieldName: "WEBSITE",
            label: "Website",
            visible: true,
          }, {
            fieldName: "PHONE_NUMBER",
            label: "Phone",
            visible: true,
          }, {
            fieldName: "HOURS",
            label: "Hours",
            visible: true,
          }]
        }]
      };
      
      webmap.when(function(wm){
        console.info(wm);
        wm.layers.getItemAt(0).popupTemplate = template;
      });
    });
  </script>
</head>

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

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

View solution in original post

RobertScheitlin__GISP · ‎11-19-2018

Jared,

The WebMap already has the warming centers layer added so you are adding it again in your code and the Web Map layer has the title defined as Sheet1 for some reason. Here is what you need to do to fix this issue:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
  <title>Intro to PopupTemplate - 4.9</title>

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

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

  <script>
    require([
      "esri/WebMap",
      "esri/layers/FeatureLayer",
      "esri/views/MapView"
    ], function(
      WebMap,
      FeatureLayer,
      MapView
    ) {

      // Create the map
      var webmap = new WebMap({
        portalItem: { // autocasts as new PortalItem()
          id: "93b7e42b2ca64790aa2315da5eceaff9"
        }
      });

      // Create the MapView
      var view = new MapView({
        container: "viewDiv",
        map: webmap,
        popup: {
          dockEnabled: true,
          dockOptions: {
            // Disables the dock button from the popup
            buttonEnabled: false,
            // Ignore the default sizes that trigger responsive docking
            breakpoint: false,
          }
        }
      });

      /*************************************************************
       * The PopupTemplate content is the text that appears inside the
       * popup. {fieldName} can be used to reference the value of an
       * attribute of the selected feature. HTML elements can be used
       * to provide structure and styles within the content. The
       * fieldInfos property is an array of objects (each object representing
       * a field) that is use to format number fields and customize field
       * aliases in the popup and legend.
       **************************************************************/

      //Popup template
      var template = { // autocasts as new PopupTemplate()
        title: "{FACILITY_NAME}",
        content: [{
          type: "fields",
          fieldInfos: [{
            fieldName: "FACILITY_TYPE",
            label: "Facility Type",
            visible: true,
          }, {
            fieldName: "ADDRESS",
            label: "Address",
            visible: true,
          }, {
            fieldName: "WEBSITE",
            label: "Website",
            visible: true,
          }, {
            fieldName: "PHONE_NUMBER",
            label: "Phone",
            visible: true,
          }, {
            fieldName: "HOURS",
            label: "Hours",
            visible: true,
          }]
        }]
      };
      
      webmap.when(function(wm){
        console.info(wm);
        wm.layers.getItemAt(0).popupTemplate = template;
      });
    });
  </script>
</head>

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

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