I'm wondering if this is a bug. I get the same results when adding the widget to the PopupTemplate sample.
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<title>Intro to PopupTemplate | Sample | ArcGIS API for JavaScript 4.19</title>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<link rel="stylesheet" href="https://js.arcgis.com/4.19/esri/themes/light/main.css" />
<script src="https://js.arcgis.com/4.19/"></script>
<script>
require([
"esri/Map",
"esri/layers/FeatureLayer",
"esri/views/MapView",
"esri/widgets/Legend",
"esri/widgets/ElevationProfile"
], (Map, FeatureLayer, MapView, Legend, ElevationProfile) => {
// Create the map
const map = new Map({
basemap: "gray-vector",
ground: 'world-elevation'
});
// Create the MapView
const view = new MapView({
container: "viewDiv",
map: map,
center: [-73.95, 40.702],
zoom: 10
});
view.ui.add(new Legend({ view: view }), "bottom-left");
/*************************************************************
* 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.
**************************************************************/
const template = {
// autocasts as new PopupTemplate()
title: "{NAME} in {COUNTY}",
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: "B12001_calc_pctMarriedE",
label: "Married %"
},
{
fieldName: "B12001_calc_numMarriedE",
label: "People Married",
format: {
digitSeparator: true,
places: 0
}
},
{
fieldName: "B12001_calc_numNeverE",
label: "People that Never Married",
format: {
digitSeparator: true,
places: 0
}
},
{
fieldName: "B12001_calc_numDivorcedE",
label: "People Divorced",
format: {
digitSeparator: true,
places: 0
}
}
]
}
]
};
// Reference the popupTemplate instance in the
// popupTemplate property of FeatureLayer
const featureLayer = new FeatureLayer({
url: "https://services.arcgis.com/P3ePLMYs2RVChkJx/ArcGIS/rest/services/ACS_Marital_Status_Boundaries/FeatureServer/2",
popupTemplate: template
});
map.add(featureLayer);
const elevationProfile = new ElevationProfile({
view: view,
profiles: [
{
type: "ground" // first profile line samples the ground elevation
},
{
type: "view" // second profile samples the view and shows building profiles
}
],
// hide the select button
// this button can be displayed when there are polylines in the
// scene to select and display the elevation profile for
visibleElements: {
//selectButton: false
}
});
// add the widget to the view
view.ui.add(elevationProfile, "top-right");
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>
