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.Position and Voxel.CurrentVariable. The Voxel.CurrentVariable 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.Depth field is added and if the dataset has time coordinates, the Voxel.LocalTime and the Voxel.SourceTime 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, }, ], };