It’s an exciting time for the World Wide Web with a lot of investment being put towards supporting rich experiences through your web browser.  WebGL and SVG are supported in all modern browsers which allows viewing advanced graphics within your browser without downloading a plug in.  That’s great news for the GIS industry as most mapping applications require a rich graphical user experience.

With web browsers (such as Google’s Chrome browser) natively supporting these rich graphical experiences, it eliminates the need to have an application installed on your desktop to view GIS related datasets.  Google has decided to end support and future development for Google Earth.  This leaves many Google Earth Enterprise users out in the cold.  Fortunately Esri has stepped up to support what users could before get from Google Earth, such as viewing and interacting with 3D data.

Exploring the 3D JavaScript API

A great feature of the new 4.x API is the Camera object.  This is currently in beta documentation on the Esri site.  When instantiating your map object, you can also specify the view position, which Esri refers to as the Camera.  The following is a snippet of code taken from the 4.0 API example project hosted on GitHub.

Site.mapView = new Site.esriSceneView({
       container: "siteMap",
       map: Site.map,
       camera: {
           position: [-105.946054, 39.604630, 2000],
           tilt: 90,
           heading: 180
       }
   });
        
   Site.map.basemap = "hybrid";

When instantiating the 3D SceneView object, you can optionally pass in the camera object.

• Position accepts [Longitude, Latitude, Elevation]
• Tilt is set to 90 degrees when you want to look straight from the ground.  The tilt would be 0 if you’re looking straight down.
• Heading is the degree value of the rotation of the view as respect to 0 being due North.  In this case it’s set to 180 so the view is pointing South.  If you ever been to the base of Keystone mountain in Colorado, the previous image should look familiar to you.  The following view, in the image below, has the Tilt set to 40.  Notice how the view is about halfway between straight above and ground level.

And finally an example of chaning the heading.  In this case we’ll rotate the view 180 degrees, to 0.  This view also has the Tilt set to 40.  This image is the back side of Copper Mountain in Colorado.

Summary

This was an example of one of the many new features in the 4.x JavaScript API.  Throughout the year we’ll explore more and more features of the API.

If you’re a JavaScript/Web Developer and want to tinker with this, we’ve create a kind of playground site that explores different aspects of the API on a repository on GitHub.  If you need any help getting the project set up please contact us.