Step 3: exaggerated elevation

index.html

@@ -9,14 +9,27 @@
   <link rel="stylesheet" href="https://js.arcgis.com/4.12/esri/themes/light/main.css" />
   <link rel="stylesheet" href="./style.css" />
 
+  <script>
+    const locationPath = location.pathname.replace(/\/[^\/]+$/, "");
+    dojoConfig = {
+      packages: [{
+        name: "utils",
+        location: locationPath + "utils"
+      }],
+      async: true
+    };
+  </script>
+
   <script src="https://js.arcgis.com/4.12/"></script>
   <script>
     require([
       "esri/Map",
       "esri/views/SceneView",
       "esri/layers/TileLayer",
-      "esri/Basemap"
-    ], function (Map, SceneView, TileLayer, Basemap) {
+      "esri/Basemap",
+
+      "utils/ExaggeratedElevationLayer"
+    ], function (Map, SceneView, TileLayer, Basemap, ExaggeratedElevationLayer) {
 
       const basemap = new Basemap({
         baseLayers: [
@@ -62,6 +75,12 @@
 
       view.ui.empty("top-left");
 
+      map.ground.layers = [new ExaggeratedElevationLayer({
+        exaggerationBathymetry: 60,
+        exaggerationTopography: 40
+      })];
+
+
     });
   </script>
 </head>

utils/ExaggeratedElevationLayer.js

@@ -0,0 +1,35 @@
+define([
+  "esri/layers/ElevationLayer",
+  "esri/layers/BaseElevationLayer"
+], function(ElevationLayer, BaseElevationLayer) {
+
+  return BaseElevationLayer.createSubclass({
+
+    properties: {
+      exaggerationTopography: null,
+      exaggerationBathymetry: null
+    },
+
+    load: function() {
+      this._elevation = new ElevationLayer({
+        url: "https://elevation3d.arcgis.com/arcgis/rest/services/WorldElevation3D/TopoBathy3D/ImageServer"
+      });
+      this.addResolvingPromise(this._elevation.load());
+    },
+
+    fetchTile: function(level, row, col) {
+      return this._elevation.fetchTile(level, row, col).then(
+        function(data) {
+          for (let i = 0; i < data.values.length; i++) {
+            if (data.values[i] >= 0) {
+              data.values[i] = data.values[i] * this.exaggerationTopography;
+            }
+            else {
+              data.values[i] = data.values[i] * this.exaggerationBathymetry;
+            }
+          }
+          return data;
+        }.bind(this));
+    }
+  });
+});