6.4 Determining 3D viewpoint values

When setting up a map or scene programmatically, it can be difficult to figure out the initial viewpoint properties (e.g., a map’s center and zoom, or especially a scene’s tilt and heading). One way to determine these values is to write an app in which the MapView or SceneView is exposed through a global variable, run the app, adjust the view to your liking, then use the browser’s developer tools to obtain the values needed. I’ve written an app like this, so let’s walk through the process.

1. Open the Camera Properties Demo page in Chrome.
2. Open Chrome’s Developer Tools (three vertical dots icon > More tools > Developer tools) - or CTRL-SHIFT-I. Use the edge slider to make the developer tools panel wider for easier viewing.
3. Click on the Sources tab. This tab enables you to view all of the HTML, CSS and JS source code associated with the page.
4. In the left-hand pane, under the Page tab, you should see a list of server domains including Esri domains like js.arcgis.com and the free.nf domain.
5. Expand the free.nf domain.
6. Click on main.js to view its source code. (Note: This file hasn’t always appeared for me in my experience. If that happens to you, try refreshing the page with F5.)
   
   The key to this script is in the addition of a view property to the global window variable at the very end.  The property name could be anything that doesn't override an existing window property.  The property is set to the variable that references the app's SceneView object.  We've set the property on the global window variable because it's visible under the Watch tab. 
    
7. In the right-hand pane, you should see a tab labeled Watch.
8. Click the Watch tab if it’s not selected already.
9. Click on the + sign to add a new Watch expression.
10. Type the expression window.view.camera.  You should see view and camera appear as auto-complete options as you type, indicating you're on the right track. 
11. Hit Enter and a triangle should appear next to the expression, indicating there are properties that can be viewed.
12. Click on the window.view.camera entry in the Watch list to expand its property list.
13. Click on the (…) beside the heading property. You should see a value of 345, which should come as no surprise as that’s how the property was set in the source code. 
14. You can likewise view the value held by the tilt property.
15. The position property was set to a Point object. You’ll need to expand its property list as you did for window.view.camera to see the important latitude, longitude and z settings. Note that these match what was set in the source code (unless you moved the map).
16. Leaving the Developer Tools panel open, go back to the app in the main Chrome window and change the viewpoint (maybe rotate the view from looking from the SE corner of the state to the NW to looking from the SW to the NE).
17. Return to the Developer Tools window and click on the Refresh button found in the Watch section heading. The properties you had viewed earlier should have reset to their closed state, but if you re-open them you should see a new set of values corresponding to the change you just made in the main window.

So… hopefully you can see the idea here. You can use this set of steps to find a viewpoint that meets your app’s purpose, then copy the necessary viewpoint settings into the app’s source code. You might consider creating your own copy of this app in case you want to refer back to it down the road.