Intro to VoxelLayer | Sample | ArcGIS Maps SDK for JavaScript

Multidimensional voxel data can be visualized in the browser using the VoxelLayer. This sample displays a voxel layer of ocean temperature in the Caribbean region from Ecological Marine Units data. The voxel layer requires the Scene component to have the property viewingMode set to local. Global viewingMode is not supported.

<!doctype html> <html lang="en"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" /> <title>Intro to VoxelLayer | Sample | ArcGIS Maps SDK for JavaScript</title>  <script type="module" src="https://js.arcgis.com/5.0/"></script> <style> html, body { margin: 0; height: 100%; } </style> </head> <body> <arcgis-scene viewing-mode="local" camera-position="-97.24689929668067,40.57382951325698,-262863.30295155034" camera-heading="143" camera-tilt="92"> <arcgis-zoom slot="top-left"> </arcgis-zoom> <arcgis-navigation-toggle slot="top-left"></arcgis-navigation-toggle> <arcgis-compass slot="top-left"> </arcgis-compass> <arcgis-home slot="top-left"></arcgis-home> <arcgis-legend slot="bottom-right"></arcgis-legend> </arcgis-scene> <script type="module"> const [Map, VoxelLayer, VectorTileLayer, FeatureLayer] = await $arcgis.import([ "@arcgis/core/Map.js", "@arcgis/core/layers/VoxelLayer.js", "@arcgis/core/layers/VectorTileLayer.js", "@arcgis/core/layers/FeatureLayer.js", ]); // Access arcgis-scene component const viewElement = document.querySelector("arcgis-scene"); // Initialize voxel layer with URL const vxlLayer = new VoxelLayer({ url: "https://tiles.arcgis.com/tiles/z2tnIkrLQ2BRzr6P/arcgis/rest/services/EMU_Caribbean_Voxel/SceneServer", visible: true, popupEnabled: true, }); // Polygon to show the study area const polygonLayer = new FeatureLayer({ url: "https://services2.arcgis.com/z2tnIkrLQ2BRzr6P/arcgis/rest/services/EMU_Caribbean_Study_Area/FeatureServer", title: "Study Area", }); viewElement.map = new Map({ layers: [vxlLayer, polygonLayer], basemap: { baseLayers: [ new VectorTileLayer({ url: "https://basemaps.arcgis.com/arcgis/rest/services/OpenStreetMap_GCS_v2/VectorTileServer", }), ], }, ground: { navigationConstraint: "none", }, }); </script> </body> </html>

Related samples and resources

VoxelLayer variable and render mode

VoxelLayer and time

VoxelLayer with discrete variable

Configuring the popup of a VoxelLayer