Exercise 2 3D - Build a Starter 3D Map
Instructions:
Custom 3D apps with just a few lines of code?! Get outta here. In this exercise we're going to get started with making 3D scenes with JavaScript!
We're going to create a plain scene, and then add elevation to really make it pop. Note: using a mouse is highly recommended!
Exercise:
1. Update the View
Let's first update the view in our scene. The global scale is great, but let's get a little closer to the ground. Replace your current "view" variable with this one.
var view = new SceneView({
map: map,
container: "viewDiv",
center: [-112.112999, 36.126964],
scale: 100000
});
Now if you refresh your map, you'll notice we're more focused over a mountain range. But if you right-click and drag to change your camera angle, the mountains have no elevation!
2. Add Elevation
A flat scene is a boring scene. So let's go ahead and add our Esri World Elevation service to the scene. Put this line of code in your "map" variable, and make sure to put a comma after the "basemap" line to separate the statements!
ground: "world-elevation"
And now if we tilt our camera a little bit, you should notice the mountains have real elevation and look like this:
Challenges:
Try switching out the basemap in our map variable to something else, like "satellite" or "national-geographic".
Navigating in 3D is different than in 2D, as you've probably seen. Make sure that you're comfortable with the different buttons on the top left, and know how to re-orient the map to face north!
Final Solution