5.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 as 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 this page in Chrome.
2. Open Chrome’s Developer Tools (three vertical dots icon > More tools > Developer tools).
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 Network tab, you should see a list of server domains including Esri domains like js.arcgis.com and the personal.psu.edu domain.
5. Expand the personal.psu.edu 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 code for this app is identical to the 3D class breaks example from earlier in the lesson, with the exception that the view variable is declared, but not set, at the top of the script. This gives it a global scope. The variable is set in the same place as before, but note that the var keyword is omitted. Including that keyword would re-declare the variable with a local scope; it then would not be visible to the browser’s developer tools.
7. In the right-hand pane, you should see a section labeled Watch.
8. Expand the Watch section if it’s not already.
9. Click on the + sign to add a new Watch expression.
10. Enter the expression view.camera. You should see the word Object appear beside the expression.
11. Click on the view.camera entry in the Watch list to expand its property list.
12. Click on the (…) beside the heading property. You should see a value of 328, which should come as no surprise as that’s how the property was set in the source code.
13. You can likewise view the value held by the tilt property.
14. The position property was set to a Point object (through auto-casting). You’ll need to expand its property list as you did for view.camera to see the important latitude, longitude and z settings.
15. Leaving the Developer Tools window 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).
16. Return to the Developer Tools window and click on the Refresh button found in the Watch section heading. The property listing should collapse, but if you re-expand it, 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. Once done, it’s a good idea to switch the view variable’s scope back to normal as it’s considered good programming practice to declare variables with the narrowest scope possible.