can't get location, 3D imaging or heading (direction) in ArcGIS

I'm a newbie to arcgis. I'm trying to show a particular location at a particular angle in 3D. The location is the corner of Water Street and Fifth Avenue in McKeesport, Pa. The angle is facing east. The tilt is 45. But this is what I'm getting: https://codepen.io/lschneiderman/pen/ZEQEWXG

My code is below:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>ArcGIS JavaScript Tutorials: Create a JavaScript starter app</title>
    <style>
      html, body, #viewDiv {
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
      }
    </style>
    <link rel="stylesheet" href="https://js.arcgis.com/4.15/esri/themes/light/main.css">
      <script src="https://js.arcgis.com/4.15/"></script>
  </head>
  <body>
    <div id="viewDiv"></div>

    <script>
        require([
              "esri/Map",
              "esri/views/SceneView"
            ], function(Map, SceneView) {

            var map = new Map({
              basemap: "topo-vector",
              ground: "world-elevation"  // show elevation
            });

            var view = new SceneView({
              container: "viewDiv",
              map: map,
                heading: 90,
              camera: {
                position: {  // observation point
                  latitude: '40.350500',
                  longitude: '-79.868870',
                  z: 1000  // altitude in meters
                },
                tilt: 45  // perspective in degrees
              }
            });
          });
    </script>
  </body>
</html>

Solution

Make sure you set the heading (angle) of the viewing direction on the camera object. This will make the camera look east, positioned above the crossing

var view = new SceneView({
  container: "viewDiv",
  map: map,
  camera: {
    position: {
      // observation point
      latitude: "40.350500",
      longitude: "-79.868870",
      z: 700 // altitude in meters// altitude in meters
    },
    heading: 90,
    tilt: 45 // perspective in degrees
  }
});

Here is a link to the modified CodePen: https://codepen.io/arnofiva/pen/688eee67141131712a12ccc3310a6ea4?editors=1010

If you want the camera to look at the crossing, you need to adopt the position by moving the camera east, e.g.:

latitude: "40.350464",
longitude: "-79.874628",

Here's another version of the CodePen that shows the crossing in the view field of the camera: https://codepen.io/arnofiva/pen/a2da1acb4cba398721690bf4d0b2101a?editors=0010

Instead of setting these values manually, it might be easier to use SceneView.goTo() and pass the point you want it to focus on as an argument:

var view = new SceneView({
  container: "viewDiv",
  map: map
});

view.goTo({
  target: [-79.86887, 40.3505], // coordinates of crossing
  heading: 90,
  tilt: 45,
  zoom: 18 // instead of a z-value, we provide the zoom level
}, {
  duration: 0 // tell view not to animate camera movement
});

Here's the CodePen showing the use of goTo(): https://codepen.io/arnofiva/pen/e91dd1b257a002a0c4d007d3724e039f?editors=1010