This sample shows how to display data on Mars in a Scene component.
Setting one of the supported coordinate systems as a spatial reference on the Scene component or adding a layer in that spatial reference will set the environment atmosphere for that planet.
Currently, scenes with Mars and Moon coordinate systems have the following limitations:
<!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>Visualize data on Mars | Sample | ArcGIS Maps SDK for JavaScript</title>
<!-- Load the ArcGIS Maps SDK for JavaScript from CDN --> <script type="module" src="https://js.arcgis.com/5.0/"></script>
<style> html, body { margin: 0; height: 100%; } </style> </head>
<body> <arcgis-scene> <arcgis-zoom slot="top-left"></arcgis-zoom> <arcgis-navigation-toggle slot="top-left"></arcgis-navigation-toggle> <arcgis-compass slot="top-left"> </arcgis-compass> <arcgis-layer-list slot="top-right"></arcgis-layer-list> </arcgis-scene>
<script type="module"> const [ElevationLayer, TileLayer, FeatureLayer] = await $arcgis.import([ "@arcgis/core/layers/ElevationLayer.js", "@arcgis/core/layers/TileLayer.js", "@arcgis/core/layers/FeatureLayer.js", ]);
const marsElevation = new ElevationLayer({ url: "https://astro.arcgis.com/arcgis/rest/services/OnMars/MDEM200M/ImageServer", copyright: "NASA, ESA, HRSC, Goddard Space Flight Center, USGS Astrogeology Science Center, Esri", });
const marsImagery = new TileLayer({ url: "https://astro.arcgis.com/arcgis/rest/services/OnMars/MDIM/MapServer", title: "Imagery", copyright: "USGS Astrogeology Science Center, NASA, JPL, Esri", });
const cratersLayer = new FeatureLayer({ url: "https://services.arcgis.com/P3ePLMYs2RVChkJx/arcgis/rest/services/Mars_Nomenclature_Mountains/FeatureServer", definitionExpression: "type = 'Crater, craters'", title: "Craters", renderer: { type: "simple", symbol: { type: "polygon-3d", symbolLayers: [ { type: "fill", material: { color: [255, 255, 255, 0.1] }, outline: { color: [0, 0, 0, 0.4], size: 2, }, }, ], }, }, labelingInfo: [ { labelPlacement: "above-center", labelExpressionInfo: { expression: "$feature.NAME" }, symbol: { type: "label-3d", symbolLayers: [ { type: "text", material: { color: [0, 0, 0, 0.9], }, halo: { size: 2, color: [255, 255, 255, 0.7], }, font: { size: 10, }, }, ], verticalOffset: { screenLength: 40, maxWorldLength: 500000, minWorldLength: 0, }, callout: { type: "line", size: 0.5, color: [255, 255, 255, 0.9], border: { color: [0, 0, 0, 0.3], }, }, }, }, ], });
const shadedReliefLayer = new TileLayer({ url: "https://astro.arcgis.com/arcgis/rest/services/OnMars/MColorDEM/MapServer", copyright: "USGS Astrogeology Science Center, NASA, JPL, ESA, DLR, Esri", title: "Shaded relief", visible: false, });
/***************************************************************** * Get a reference to the Scene component and set it up *****************************************************************/ const viewElement = document.querySelector("arcgis-scene");
viewElement.spatialReference = { wkid: 104971, // Mars spatial reference };
viewElement.camera = { position: { x: 27.63423, y: -6.34466, z: 1281525.766, spatialReference: 104971, // Mars spatial reference }, heading: 332.28, tilt: 37.12, };
await viewElement.viewOnReady();
// add ground and other layers viewElement.ground = { layers: [marsElevation], };
viewElement.map.layers.addMany([marsImagery, cratersLayer, shadedReliefLayer]); </script> </body></html>