5.2 Autocasting

5.2 Autocasting

In looking at the Load a basic web scene sample (or perhaps earlier samples), you may have noticed a comment “autocasts as new PortalItem().” So what does that mean? Certain properties in the API have been coded behind the scenes by Esri so that our jobs are made a bit easier. Like all properties, the ones that support autocasting are written expecting to be set to a particular data type (e.g., string, number, object). Where these properties differ is that they can also be set to a JavaScript object that “looks like” the required object type. This is a concept that’s much easier to explain by example, so let’s work through what the Load a basic web scene code would look like if autocasting was not built into the API.

1. Open the API Reference in the SDK and look up the WebScene class.
2. Find the portalItem property and note that its data type is listed as PortalItem. Ordinarily this would mean that you’d need to create an object of that class (using new PortalItem) to set the WebScene’s portalItem property. And of course, that would mean adding the PortalItem class to your require() declaration. Here is how the code would need to look if autocasting was not available, alongside how the sample is actually coded:

require([
      "esri/views/SceneView",
      "esri/WebScene",
      "esri/portal/PortalItem"
    ], (
      SceneView, WebScene, PortalItem
    ) => {

      const myPortalItem = new PortalItem({
        id: "3a9976baef9240ab8645ee25c7e9c096"
      }); 
       
      const scene = new WebScene({
        portalItem: myPortalItem
      });

      const view = new SceneView({
        map: scene,
        container: "viewDiv",
        padding: {
          top: 40
        }
      });
    });

require([
      "esri/views/SceneView",
      "esri/WebScene"
    ], (
      SceneView, WebScene
    ) => {
       
      const scene = new WebScene({
        portalItem: {
          id: "3a9976baef9240ab8645ee25c7e9c096"
        } 
      });

      const view = new SceneView({
        map: scene,
        container: "viewDiv",
        padding: {
          top: 40
        }
      });
    });

So autocasting makes it a bit easier to set certain properties. The way to tell which properties behave this way is to look for the word autocast next to the property’s data type in the class’s documentation.

Here’s a second example to drive the point home. In the previous lesson, we worked with the MapView class in creating simple 2D apps. In the samples we dealt with, the MapView center property was set using a syntax like this:

center: [-112, 38]

However, the documentation of the center property tells us that its data type is Point. Thus, if the property didn’t support autocasting, we’d need to add the Point class to the require() declaration and create a Point object using the class’s constructor. Here are three alternative versions of the Get started with MapView sample:

require([
  "esri/Map",
  "esri/geometry/Point",
  "esri/views/MapView"
 ], (Map, Point, 
MapView) => {

  const map = new Map({
    basemap: "streets"
  });

  const pt = new Point({
    latitude: 65,
    longitude: 15
  })

  const view = new MapView({
    container: "viewDiv",
    map: map,
    zoom: 4,
    center: pt
  });
});

require([
  "esri/Map",
  "esri/views/MapView"
], (Map, MapView) => {

  const map = new Map({
    basemap: "streets"
  });
 
  const view = new MapView({
    container: "viewDiv",
    map: map,
    zoom: 4,
    center: {
      latitude: 65,
      longitude: 15
    }
  });
});

require([
  "esri/Map",
  "esri/views/MapView"
 ], (Map, MapView) => {

  const map = new Map({
    basemap: "streets"
  });

  const view = new MapView({
    container: "viewDiv",
    map: map,
    zoom: 4,
    center: [15, 65]
  });
});

The first version is the syntax we’d need if autocasting was not available on the center property. The second uses autocasting as we saw in the PortalItem example above. The third is how the sample is actually written in the SDK. Unlike the PortalItem example, the property is set to a JavaScript array rather than a JavaScript object. This appears to be a special case supported by the MapView center property. In general, you should use an object, not an array, when working with an autocast property.