Popup Template Title in a WebMap

Question

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_County_IL/FeatureServer/0?token=TBoytrSjk658s73RVxEixBfWiPa_GI5EYBjyRTwYygOilY6kmMaDiHJla-n8ZvLylgt755Owpi4Pvqxk8hzaAM3vfBBx2ueCuCWfenNdfKFxnSEoTfLCTB4kcJqBR1KHJAje4C9tHfcYHJnH1ciTvKBy38vzit7TGUFfVUkQEgXlmhoN4iut9RMll6meOOaUFSa0yPENiXUOxWClJcXzPSe81jiObK3Ecjv4YirstB6GLYanFZ56cEnR66HRwbmB", 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 · Accepted Answer

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