I created a pie chart in a popup using two field values (Field 18 and Field25). When I hover on the pie chart it shows those field names which are meaningless. I want to replace those field names with an alias or description of the field. How can I do this? My code is below. Thanks.
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta
name="viewport"
content="initial-scale=1, maximum-scale=1,user-scalable=no"
/>
<title>
Multiple popup elements | Sample | ArcGIS Maps SDK for JavaScript 4.27
</title>
<link
rel="stylesheet"
href="https://js.arcgis.com/4.27/esri/themes/light/main.css"
/>
<script src="https://js.arcgis.com/4.27/"></script>
<style>
html,
body,
#mapDiv {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
</style>
<script>
require(["esri/Map", "esri/views/MapView", "esri/layers/FeatureLayer"], (
Map,
MapView,
FeatureLayer
) => {
// setup the map
const map = new Map({
basemap: "hybrid"
});
const view = new MapView({
container: "mapDiv",
map: map,
center: [-113.58332, 37.10819],
zoom: 17,
// Since there are many elements, it is best to dock the popup so
// the elements display better rather than have to scroll through them all.
popup: {
dockEnabled: true,
dockOptions: {
buttonEnabled: false,
breakpoint: false
}
}
});
const featureLayer = new FeatureLayer({
url: "https://agisprodvm.washco.utah.gov/arcgis/rest/services/Assessor/MapServer/14",
popupTemplate: {
// autocasts as new PopupTemplate()
title: "",
// Set content elements in the order to display.
// The first element displayed here is the fieldInfos.
content: [
{
// You can set a media element within the popup as well. This
// can be either an image or a chart. You specify this within
// the mediaInfos. The following creates a pie chart in addition
// to two separate images. The chart is also set up to work with
// related tables. Similar to text elements, media can only be set within the content.
type: "media", // MediaContentElement
mediaInfos: [
{
title: "<b>Count by type</b>",
type: "pie-chart",
caption: "",
value: {
fields: ["Field18", "Field25"],
normalizeField: null,
}
},
]
}
]
},
outFields: ["*"]
});
map.add(featureLayer);
});
</script>
</head>
<body>
<div id="mapDiv"></div>
</body>
</html>
Accepted Solutions
