This sample shows how to configure the popup of a VoxelLayer using the popupTemplate.
You can use VoxelLayer.fields to list all available fixed fields and the voxel variables. A VoxelLayer always has the fixed fields Voxel. and Voxel.. The Voxel. is the voxel variable currently being displayed. A VoxelLayer will have additional fixed fields depending on the voxel's volume. If the dataset has Z coordinates, the Voxel. field is added and if the dataset has time coordinates, the Voxel. and the Voxel. fields are added.
You can configure the popup of a VoxelLayer by using the properties fieldInfos, content and expressionInfos. The VoxelLayer supports the popup elements: fields, media, text and expression.
The $voxel profile variable can be used for Arcade expressions in popups and to write expressions that return a dictionary representing either a rich text, fields table, or media (i.e. a chart or an image) popup element.
The sample code below shows how to define the fields to be displayed within the content.
// Define the fields (or voxel variables) to be displayed
const contentFieldInfo = [
{
fieldName: "lithok",
label: "Most likely lithological class",
visible: true,
},
{
fieldName: "strat",
label: "Geological unit",
visible: true,
},
{
fieldName: "expression/voxelDepth",
label: "Depth",
},
];
The code below shows how to add text, fields and media in the popup's content.
// Create a popupTemplate
const voxelPopupTemplate = {
title: "GeoTOP v1.6",
// Create Arcade expression using the $voxel profile variable
expressionInfos: [
{
name: "voxelDepth",
title: "Depth",
expression: 'Text($voxel["Voxel.Depth"], "#.## m")',
},
],
content: [
{
type: "text",
text: "Current Variable: {Voxel.CurrentVariable}",
},
// The fields to be displayed in the popup's content
{
type: "fields",
fieldInfos: contentFieldInfo,
title: "<span style='font-size:13px;'>Voxel Position {Voxel.Position}:</span>",
},
// Adding a pie chart by using the element media
{
type: "media",
title:
"<div style='margin-bottom:5px'>Probability distribution of lithological class</div>" +
probabilityTitle,
mediaInfos: [
{
type: "pie-chart",
value: {
fields: probabilityFields, // An array of fields
colors: probabilityColors, // An array of colors
},
caption:
"<div>Click <a href='https://www.dinoloket.nl/en/detailing-the-upper-layers-with-geotop' target='_blank'>here</a> to know more about the GeoTOP model</div>",
},
],
},
// Adding a bar chart by using the element media
{
type: "media",
title:
"<div style='margin-bottom:5px'>Model Uncertainty</div><div style='font-size:11px'><span style='width:10px;height:10px;display:inline-block;background-color:rgb(50, 115, 168)'></span><span> Geological unit</span></div><div style='font-size:11px'><span style='width:10px;height:10px;display:inline-block;background-color:rgb(219, 132, 81)'></span><span> Lithological class</span></div>",
mediaInfos: [
{
type: "bar-chart",
value: {
fields: ["onz_ls", "onz_lk"],
colors: [
[50, 115, 168, 1],
[219, 132, 81, 1],
],
},
caption:
"<div style='margin-top:-20px;font-size:11px'>0% very certain to 100% very uncertain</div>",
},
],
},
{
type: "text",
text: "<strong>Data by:</strong> <a href='https://www.dinoloket.nl/en/modelbestanden-aanvragen/netcdf'>TNO - Geological Survey of the Netherlands</a>",
},
],
// Change the labels of the fields used in the charts
fieldInfos: [
{
fieldName: "onz_ls",
label: "Geological Unit",
visible: true,
},
{
fieldName: "onz_lk",
label: "Lithological class",
visible: true,
},
{
fieldName: "kans_1",
label: "Organic material (peat)",
visible: true,
},
{
fieldName: "kans_2",
label: "Clay",
visible: true,
},
{
fieldName: "kans_3",
label: "Clayey sand, sandy clay and loam",
visible: true,
},
{
fieldName: "kans_5",
label: "Fine sand",
visible: true,
},
{
fieldName: "kans_6",
label: "Medium sand",
visible: true,
},
{
fieldName: "kans_7",
label: "Coarse sand",
visible: true,
},
{
fieldName: "kans_8",
label: "Gravel",
visible: true,
},
{
fieldName: "kans_9",
label: "Shells",
visible: true,
},
],
};