WebScene

AMD: require(["esri/WebScene"], (WebScene) => { /* code goes here */ });
ESM: import WebScene from "@arcgis/core/WebScene.js";
Class: esri/WebScene
Inheritance: WebScene Map Accessor
Since: ArcGIS Maps SDK for JavaScript 4.0

The web scene is the core element of 3D mapping across ArcGIS. It defines the content, style, environment, and slides of your scene and it can be shared across multiple ArcGIS web and desktop applications. Web scenes can be created, published, and consumed in ArcGIS Pro and ArcGIS Online with the Scene Viewer. The web scene is saved as a JSON document that can be consumed by the ArcGIS Maps SDK for JavaScript via the WebScene class to easily create compelling 3D applications. The JSON document is written according to the web scene specification.

Although you can easily create your own scenes, there are thousands of publicly available web scenes in ArcGIS Online that you can use to get started with the API. You may modify or add new content to these scenes.

To load a WebScene into a SceneView, you need to simply reference the ID of the web scene item in ArcGIS Online via the portalItem property of this class.

const scene = new WebScene({
  portalItem: { // autocasts as new PortalItem()
    id: "affa021c51944b5694132b2d61fe1057"  // ID of the WebScene on arcgis.com
  }
});

To load a WebScene from an on-premise portal, set the portal url in esriConfig.portalurl.

esriConfig.portalUrl = "https://myHostName.esri.com/arcgis";

const scene = new WebScene({
  portalItem: { // autocasts as new PortalItem()
    id: "0614ea1f9dd043e9ba157b9c20d3c538"  // ID of the WebScene on the on-premise portal
  }
});

Then you must reference the WebScene instance in the map property of a SceneView.

const view = new SceneView({
  map: scene,  // The WebScene instance created above
  container: "viewDiv"
});

This will start loading all layers and scene options into the 3D SceneView. The when() method on the WebScene instance can be called to execute processes that may only run after the WebScene is loaded.

scene.when(function() {
  // All layers and the basemap have been created
});
view.when(function() {
  // All layer and basemap resources have been loaded and are ready to be displayed
});

webscene

The WebScene defines the content of your scene and how the scene looks when it is loaded in your application. There are several common properties of a web scene that you will likely interact with when using this class:

  • Layers: defines the content and styling of the web scene, as well as popups, labels, legend and other settings.
  • Basemap: defines the basemap layers of the web scene.
  • Ground: defines the elevation layers of the web scene.
  • Presentation: contains the web scene slides.
  • InitialViewProperties
    • Environment: configures lighting, shadows and atmosphere of the scene.
    • Viewpoint: configures the initial viewpoint.
    • ViewingMode: defines if the web scene is global or local.

For more information on properties of a web scene, please consult the web scene specification.

There are two types of web scenes: global or local. Global scenes render the earth as a sphere while Local scenes render the earth on a flat plane. Global web scenes can be created with a WebMercator, WGS84, CGCS2000, Mars_2000_(Sphere), GCS_Mars_2000 and GCS_Moon_2000. Local web scenes can be created with WGS84, CGCS2000 or any projected coordinate system. Read the ArcGIS Online help to learn more about choosing global or local scenes.

Slides store a snapshot of a visualization state of the scene that can be re-applied to the scene at a later time. Slides contain properties for viewpoint, layer visibilities, basemap and environment (as well as a title and thumbnail) so that users of a 3D application can easily navigate the scene and accurately recreate a stored view of that scene.

Web scenes can be saved to ArcGIS Online or Portal using saveAs() or save(). Define the portal and once it is loaded, save the web scene.

const portal = new Portal({
  url: "https://myportal.arcgis.com/", // the url of the portal
  authMode: "immediate" // user authenticates by signing in when the Portal is loaded
});
// once the portal is loaded save the web scene to the portal as a new web scene
portal.load().then(function() {
  webscene.saveAs({
    title: "My Scene",
    portal: portal
  })
  .then(function() {
    console.log("Scene was saved");
  })
  .catch(function(err) {
    console.log(err);
  });
})

It's important to note that GraphicsLayer, ImageryLayer, MediaLayer and StreamLayer can't be saved to a web scene. A cached image service can be saved to a web scene, by declaring it as a TileLayer. An OpenStreetMapLayer can be saved as a baseLayer. For more information on types of layers that can be saved in a web scene, see the web scene specification.

See also

Constructors

WebScene

Constructor
new WebScene(properties)
Parameter
properties Object
optional

See the properties for a list of all the properties that may be passed into the constructor.

Example
// Typical usage
const scene = new WebScene({
  portalItem: {
    id: "affa021c51944b5694132b2d61fe1057"
  }
});

Property Overview

Any properties can be set, retrieved or listened to. See the Working with Properties topic.
Show inherited properties Hide inherited properties
Name Type Summary Class
Collection<Layer>

A flattened collection of all layers in the map.

Map
Collection<Layer>

A flattened collection of tables anywhere in the map's hierarchy.

Map
ApplicationProperties

Configuration of application and UI elements.

WebScene
String

The name of the application that authored the WebScene.

WebScene
String

The version of the application that authored the WebScene.

WebScene
Basemap

Specifies a basemap for the map.

Map
Extent

This property only applies to local scenes.

WebScene
Boolean

This property only applies to local scenes.

WebScene
String

The name of the class.

Accessor
Collection<(FeatureLayer|SceneLayer|SubtypeGroupLayer)>

A collection of editable layers.

Map
MapFloorInfo

When a web scene is configured as floor-aware, it has a floorInfo property defined.

WebScene
Ground

Specifies the surface properties for the map.

Map
HeightModelInfo

The height model info of the WebScene.

WebScene
InitialViewProperties

The initial view of the WebScene.

WebScene
Collection<Layer>

A collection of operational layers.

Map
Boolean

Indicates whether the instance has loaded.

WebScene
Error

The Error object returned if an error occurred while loading.

WebScene
String

Represents the status of a load operation.

WebScene
PortalItem

The portal item from which the WebScene is loaded.

WebScene
Presentation

Provides a Collection of slides that act as bookmarks for saving predefined viewpoints and visible layers.

WebScene
Object

The version of the source document from which the WebScene was read.

WebScene
Collection<Layer>

A collection of layer instances that are tables saved in a Map and/or a WebMap.

Map
String

The URL to the thumbnail used for the web scene.

WebScene
String

The latest supported webscene spec version.

WebScene

Property Details

allLayers

Inherited
Property
allLayers Collection<Layer>readonly
Inherited from Map

A flattened collection of all layers in the map. This collection contains basemap layers, operational layers and ground layers. Group Layers and their children layers are also part of this collection. Reference layers in the basemap will always be included at the end of the collection.

Layers should not be added directly to this collection. They must only be added via the layers, basemap or ground properties.

To access a flattened collection of tables, use the allTables property instead.

Example
// Find a layer with title "US Counties"
const foundLayer = map.allLayers.find(function(layer) {
 return layer.title === "US Counties";
});

// Create a filtered collection of the non-group layers
const nonGroupLayers = map.allLayers.filter(function(layer) {
 return !foundLayer.layers;
});

// Listen for any layer being added or removed in the Map
map.allLayers.on("change", function(event) {
 console.log("Layer added: ", event.added);
 console.log("Layer removed: ", event.removed);
 console.log("Layer moved: ", event.moved);
});

allTables

Inherited
Property
allTables Collection<Layer>readonly
Inherited from Map
Since: ArcGIS Maps SDK for JavaScript 4.17 Map since 4.0, allTables added at 4.17.

A flattened collection of tables anywhere in the map's hierarchy. This will contain individual tables within the map's tables, in addition to any group layer tables. In order for the table(s) to be recognized as such, the FeatureLayer property must return true.

Currently, only feature layer tables are recognized.

To access spatial layers, use the allLayers property instead.

Example
// A feature layer where isTable = true.
const foundTable = map.allTables.find(function(table) {
  // Find a table with title "US Counties"
  return table.title === "US Counties";
});

applicationProperties

Property
applicationProperties ApplicationProperties
Since: ArcGIS Maps SDK for JavaScript 4.7 WebScene since 4.0, applicationProperties added at 4.7.

Configuration of application and UI elements.

authoringApp

Property
authoringApp String
Since: ArcGIS Maps SDK for JavaScript 4.14 WebScene since 4.0, authoringApp added at 4.14.

The name of the application that authored the WebScene.

authoringAppVersion

Property
authoringAppVersion String
Since: ArcGIS Maps SDK for JavaScript 4.14 WebScene since 4.0, authoringAppVersion added at 4.14.

The version of the application that authored the WebScene.

basemap

Inherited
Property
basemap Basemapautocast
Inherited from Map
Autocasts from String|Object

Specifies a basemap for the map. The basemap is a set of layers that give geographic context to the MapView or SceneView and the other operational layers in the map.

The basemap can be created in a variety of ways:

  1. From the basemap styles service (v2)
  2. From a basemap id
  3. From an instance of the Basemap class

Use of these basemaps requires either an ArcGIS Developer subscription, ArcGIS Online organizational subscription, or an ArcGIS Enterprise license.

To authenticate basemap requests, you may need an access token. You can use an API key or OAuth 2.0. When using an API key, the key must be scoped to access the appropriate location service.

Basemap styles

Since version 4.28

Basemaps can be created from the basemap styles service (v2) from a string representing a valid basemap id or an object representing a BasemapStyle. The basemap styles service is a standard, ready-to-use location service that serves vector and image tiles representing geographic features around the world.

You can use the basemap styles service to display:

  • Streets and navigation styles
  • Imagery, oceanic, and topographic styles
  • OSM standard and streets styles
  • Creative styles such as nova and blue print
  • Localized place labels
  • Places with styles - since 4.29
  • Worldview boundaries - since 4.29

The string values are of the form {provider}/{style} where provider is "arcgis" or "osm". See ArcGIS basemap styles and OSM basemap styles for the full list of available styles.

// create the basemap from a string id representing the basemap style
const map = new Map({
  basemap: "osm/blueprint"
});

// create the basemap from a BasemapStyle object
const map = new Map({
  basemap: {
    style: { // autocasts to BasemapStyle
      id: "arcgis/outdoor",
      language: "es" // place labels will be displayed in spanish
    }
  }
});

Basemap Id

2D (legacy)

Since version 4.0

The legacy basemaps can be accessed using the basemap id in the table below. These are references to enhanced basemap endpoints.

Value Source
satellite World Imagery
hybrid Hybrid Reference Layer and World Imagery
oceans World Ocean Reference and World Ocean Base
osm OpenStreetMapLayer
terrain World Reference Overlay and World Terrain Base
dark-gray / dark-gray-vector Dark Gray Canvas
gray / gray-vector Light Gray Canvas
streets / streets-vector World Street Map
streets-night-vector World Street Map (Night)
streets-navigation-vector World Navigation Map
topo / topo-vector World Hillshade and World Topographic Map
streets-relief-vector World Hillshade and World Street Map (with Relief)
3D

Since version 4.28

The 3D Basemaps can be accessed using the basemap id in the table below. They are designed to be used as basemaps in SceneView.

Value Source
topo-3d Topographic
navigation-3d Navigation
navigation-dark-3d Navigation (Dark)
osm-3d OpenStreetMap
gray-3d Light Gray Canvas
dark-gray-3d Dark Gray Canvas
streets-3d Streets
streets-dark-3d Streets (Dark)

Known Limitations

// Set the basemap in the constructor
const map = new Map({
  basemap: "hybrid"
});

// Set the basemap after the map instance is created
map.basemap = "topo-3d";

Basemap class

Since version 4.0

The map's basemap can also be created from an instance of the Basemap class. This allows you to create a basemap from a portal item or collection of layers. Using the basemap class, you can also define a custom thumbnail and title for your basemap.

// Set the basemap from a portal item id
const map = new Map({
  basemap: new Basemap({
    portalItem: {
       id: "084291b0ecad4588b8c8853898d72445" // enhanced contrast basemap
    }
  })
});
// Create a VectorTileLayer from a style URL
const mapBaseLayer = new VectorTileLayer({
  url: "https://arcgis.com/sharing/rest/content/items/b5676525747f499687f12746441101ef/resources/styles/root.json"
});

// Create a Basemap with the VectorTileLayer
const customBasemap = new Basemap({
  baseLayers: [mapBaseLayer],
  title: "Terrain"
});

// Set the basemap to the customBasemap
const map = new Map({
  basemap: customBasemap
});

Deprecated basemap styles

Since version 4.18

The deprecated basemap styles are references to basemaps from the basemap styles service (v1). We recommend using the basemap styles service (v2), which supports more dynamic basemaps and new features such as place label localization.

Value Source
arcgis-imagery Imagery Hybrid
arcgis-imagery-standard Imagery
arcgis-imagery-labels The reference layer from arcgis-imagery
arcgis-light-gray Light Gray Canvas
arcgis-dark-gray Dark Gray Canvas
arcgis-navigation Navigation
arcgis-navigation-night Navigation (Night)
arcgis-streets Streets
arcgis-streets-night Streets (Night)
arcgis-streets-relief Streets (with Relief)
arcgis-topographic Topographic
arcgis-oceans Oceans
arcgis-human-geography Human Geography Map - added in v.4.25
arcgis-human-geography-dark Human Geography Map Canvas - added in v.4.25
osm-standard OpenStreetMap
osm-standard-relief OpenStreetMap (with Relief)
osm-streets OpenStreetMap (Streets)
osm-streets-relief OpenStreetMap (Streets with Relief)
osm-light-gray OpenStreetMap (Light Gray Canvas)
osm-dark-gray OpenStreetMap (Dark Gray Canvas)
arcgis-terrain Terrain with Labels
arcgis-community Community Map
arcgis-charted-territory Charted Territory Map
arcgis-colored-pencil Colored Pencil Map
arcgis-nova Nova Map
arcgis-modern-antique Modern Antique Map
arcgis-midcentury Mid-Century Map
arcgis-newspaper Newspaper Map
arcgis-hillshade-light The hillshade layer from arcgis-topographic
arcgis-hillshade-dark
esriConfig.apiKey = "YOUR_API_KEY";
// Set the basemap in the constructor
const map = new Map({
 basemap: "arcgis-streets"
});

// Set the basemap after the map instance is created
map.basemap = "osm-dark-gray";

clippingArea

Property
clippingArea Extentautocast

This property only applies to local scenes. Represents an optional clipping area used to define the bounds or Extent of a local scene. If defined, only data (including the basemap) within the area will be displayed.

Set the clippingEnabled property to true to apply the specified clippingArea to the view.

See also

clippingEnabled

Property
clippingEnabled Boolean

This property only applies to local scenes. Determines whether clipping using the clippingArea is enabled.

Default Value:false
See also

declaredClass

Inherited
Property
declaredClass Stringreadonly
Inherited from Accessor
Since: ArcGIS Maps SDK for JavaScript 4.7 Accessor since 4.0, declaredClass added at 4.7.

The name of the class. The declared class name is formatted as esri.folder.className.

editableLayers

Inherited
Property
editableLayers Collection<(FeatureLayer|SceneLayer|SubtypeGroupLayer)>readonly
Inherited from Map
Since: ArcGIS Maps SDK for JavaScript 4.20 Map since 4.0, editableLayers added at 4.20.

A collection of editable layers. Layers are considered editable if they have editing capabilities, and if the authenticated user has the necessary privileges needed to edit the layers.

floorInfo

Property
floorInfo MapFloorInfoautocast
Since: ArcGIS Maps SDK for JavaScript 4.19 WebScene since 4.0, floorInfo added at 4.19.

When a web scene is configured as floor-aware, it has a floorInfo property defined. A floor-aware scene is a scene that contains indoor GIS data representing features that can be located on a specific floor of a building. The floor info must contain levelLayer and facilityLayer properties at a minimum. A siteLayer property is optional.

Default Value:null

ground

Inherited
Property
ground Groundautocast
Inherited from Map
Autocasts from String|Object

Specifies the surface properties for the map. In MapView, this property is used by the ElevationProfile widget when the profile contains an ElevationProfileLineGround. In 3D SceneView, it renders the terrain or topographical variations in the real world on the map's surface with a collection of ElevationLayers.

This value can be an instance of Ground, or one of the following strings:

  • world-elevation for a default instance of ground using the Terrain3D Service.
  • world-topobathymetry for an instance of ground that combines surface elevation and bathymetry using the TopoBathy3D Service.

The ground may not be set to null or undefined, it is guaranteed to always contain an instance of type Ground. The elevation can be removed from the ground by setting the ground property to a new empty Ground instance or by removing all the ground layers.

Examples
// Use the world elevation service
const map = new Map({
  basemap: "topo-vector",
  ground: "world-elevation"
});
// Create a map with the world elevation layer overlaid by a custom elevation layer
const worldElevation = new ElevationLayer({
  url: "//elevation3d.arcgis.com/arcgis/rest/services/WorldElevation3D/Terrain3D/ImageServer"
});
const customElevation = new ElevationLayer({
  url: "https://my.server.com/arcgis/rest/service/MyElevationService/ImageServer"
});
const map = new Map({
  basemap: "topo-vector",
  ground: new Ground({
   layers: [ worldElevation, customElevation ]
  })
});

heightModelInfo

Property
heightModelInfo HeightModelInfoautocast
Since: ArcGIS Maps SDK for JavaScript 4.5 WebScene since 4.0, heightModelInfo added at 4.5.

The height model info of the WebScene. This object defines the characteristics of the vertical coordinate system used by the scene. In a SceneView, the height model info is used to avoid combining layers that have incompatible vertical coordinate systems.

initialViewProperties

Property
initialViewProperties InitialViewPropertiesautocast

The initial view of the WebScene. This object may contain the following properties: environment, spatialReference, viewingMode, and viewpoint.

These properties will be applied to the SceneView when the scene loads.

layers

Inherited
Property
layers Collection<Layer>autocast
Inherited from Map
Autocasts from Layer[]

A collection of operational layers. This property contains the operational layers, such as FeatureLayers, WebTileLayers and GraphicsLayers that may be queried, assigned different renderers, analyzed, etc. It does not include basemaps.

A layer is a collection of one or more features, or graphics, that represent real-world phenomena. Each feature contains a symbol and geographic data that allows it to be rendered on the map as a graphic with spatial context. Features within the layer may also contain data attributes that provide additional information that may be viewed in popup windows and used for rendering the layer.

Layers may be added in the constructor, with the add() or addMany() methods, or directly to the layers collection using add() or addMany().

In 3D, for layers that are rendered on the terrain, the order of the layers also depends on the type of layer. Tiled layers (BaseTileLayer, ImageryTileLayer, OpenStreetMapLayer, TileLayer, VectorTileLayer, WCSLayer, WebTileLayer and WMTSLayer) are always drawn first in the same order as specified in the layer collection. Dynamic layers (MapImageLayer, ImageryLayer, WMSLayer, and feature based layers with elevation mode on-the-ground) are rendered on top using the order from the layer collection.

A layer may only be added to one parent. Adding the same layer to multiple Maps or GroupLayers is not possible. If you attempt to do so, the layer will automatically be removed from its current parent and placed in the new parent.

let layer = new GraphicsLayer();
// The layer belongs to map1
map1.layers.add(layer);
// The layer now belongs to map2
// and implicitly does: map1.layers.remove(layer)
map2.layers.add(layer);

To access tables from feature layers, use the tables property in either Map or WebMap classes.

Example
// Add layers in the constructor of Map using an array
let fl = new FeatureLayer(url);
let gl = new GraphicsLayer();
let map = new Map({
  layers: [fl, gl]
});

// Add layers using add()
map.addMany([fl, gl]);

// Add layers using layers collection
map.layers.addMany([fl, gl]);

// Add layers using layers collection's push method
map.layers.push(fl, gl);

loaded

Property
loaded Booleanreadonly

Indicates whether the instance has loaded. When true, the properties of the object can be accessed. A WebScene is considered loaded when its layers and basemap are fully created, but not yet loaded.

Default Value:false

loadError

Property
loadError Errorreadonly

The Error object returned if an error occurred while loading.

Default Value:null

loadStatus

Property
loadStatus Stringreadonly

Represents the status of a load operation.

Value Description
not-loaded The object's resources have not loaded.
loading The object's resources are currently loading.
loaded The object's resources have loaded without errors.
failed The object's resources failed to load. See loadError for more details.

Possible Values:"not-loaded"|"loading"|"failed"|"loaded"

Default Value:not-loaded

portalItem

Property
portalItem PortalItemautocast

The portal item from which the WebScene is loaded.

presentation

Property
presentation Presentationautocast

Provides a Collection of slides that act as bookmarks for saving predefined viewpoints and visible layers.

sourceVersion

Property
sourceVersion Objectreadonly
Since: ArcGIS Maps SDK for JavaScript 4.1 WebScene since 4.0, sourceVersion added at 4.1.

The version of the source document from which the WebScene was read. The WebScene must be version 1.x to load into an app.

Properties
major Number

The major version of the WebScene.

minor Number

The minor version of the WebScene.

tables

Inherited
Property
tables Collection<Layer>autocast
Inherited from Map
Autocasts from Layer[]

A collection of layer instances that are tables saved in a Map and/or a WebMap. In order for the table(s) to be recognized as such, the FeatureLayer's isTable property must return true. A table can be created via one of the options below:

  • Referencing the URL to a table in a feature service.
  • Create a feature layer using the Layer.fromArcGISServerUrl method and confirm that it is a table using feature layer's isTable property. This can be either a feature service or feature collection.
  • Create a feature layer using the Layer.fromPortalItem method and confirm that it is a table using feature layer's isTable property. This can be either a feature service or feature collection.
  • Create an in-memory, non-spatial, client-side feature layer.

Beginning with 4.17, it is possible to persist non-spatial, tables in a feature service to a WebMap, although in-memory (feature collection) tables are not yet supported.

Persisting tables within a GroupLayer is not yet supported. If this is needed, add them to the Map and/or WebMap.

  • Currently, only feature service feature layers are recognized.
  • To access spatial layers, use the layers property in either Map or WebMap classes
Examples
// This snippet shows how to add a table to a map's table collection.

// FeatureLayer.isTable = false
const featureLayer = new FeatureLayer({
  url: "https://sampleserver6.arcgisonline.com/arcgis/rest/services/SF311/FeatureServer/0"
});

// FeatureLayer.isTable = true
const table = new FeatureLayer({
  url: "https://sampleserver6.arcgisonline.com/arcgis/rest/services/SF311/FeatureServer/1"
});

// Add featureLayer to the map
map.add(featureLayer);

// In order for the table to be stored within
// the map's table collection, load it and confirm it is the right type.

table.load().then(() => {
  // Add the table to the collection
  map.tables.add(table);
  console.log("Table is added to map's table collection");
});
// This snippet shows how to persist a table to an existing web map

// FeatureLayer.isTable = true
const table = new FeatureLayer({
  url: "https://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/Crash_details_table/FeatureServer/0"
});

// Create Webmap instance
const webmap = new WebMap({
  portalItem: {
    id: webmapId
  }
});

// When web map is ready, load the table and add it to the web map
webmap.when(() => {
  table.load().then(() => {
    console.log("Adding table");
    // Add table to the webmap's table collection
    webmap.tables.add(table);
  });
});

// Call updateFrom on webmap and pass in the existing view
webmap.updateFrom(view).then(() => {
  // Call saveAs (or save) on the web map
  webmap.saveAs({
    // autocasts as new PortalItem()
    title: "New WebMap"
  });
});
// This snippet shows how to add an in-memory table to a map

// Create the array of objects containing field info
const fields = [{
  name: "ObjectID",
  alias: "ObjectID",
  type: "oid"
},
{
  name: "tree_type",
  alias: "Tree type",
  type: "string"
},
{
  name: "species",
  alias: "Species",
  type: "string"
}];

// Create the array of graphics holding attribute info
const graphics = [{
  attributes: {
    "tree_type": "deciduous",
    "species": "maple",
    "ObjectID": 2
  }
}, {
  attributes: {
    "tree_type": "coniferous",
    "species": "pine",
    "ObjectID": 3
  }
}];

// Create the feature layer (feature collection) table
const table = new FeatureLayer({
  fields: fields,
  objectIdField: "ObjectID",
  source: graphics
});

// Check when map is ready and load the table
map.when(() => {
  table.load().then(() => {
    console.log("Adding table");
    map.tables.add(table);
  });
});

thumbnailUrl

Property
thumbnailUrl String
Since: ArcGIS Maps SDK for JavaScript 4.9 WebScene since 4.0, thumbnailUrl added at 4.9.

The URL to the thumbnail used for the web scene. The thumbnail will by default be the thumbnail URL from the portal item associated to the web scene. The thumbnail of the web scene may be updated by changing the thumbnail URL and saving the web scene. Use updateFrom to update the thumbnail automatically from a specified view.

Example
scene.updateFrom(view)
  .then(function() {
    return scene.save();
  })
  .then(function(portalItem) {
    console.log("Saved to portal", portalItem.id);
  })
  .catch(function(error) {
    console.error("Error saving to portal", error);
  });

version

Property
version Stringstatic,readonly

The latest supported webscene spec version.

Method Overview

Show inherited methods Hide inherited methods
Name Return Type Summary Class

Adds a layer to the layers collection.

Map

Adds one or more handles which are to be tied to the lifecycle of the object.

Accessor

Adds a layer or an array of layers to the layers collection.

Map

Destroys the webscene, and any associated resources, including its layers, basemap, ground, and portalItem.

WebScene
Layer

Returns a layer based on the given layer ID.

Map
Layer

Returns a table based on the given table ID.

Map
WebScene

Creates a new instance of this class and initializes it with values from a JSON object generated from an ArcGIS product.

WebScene
Boolean

Returns true if a named group of handles exist.

Accessor
Boolean

isFulfilled() may be used to verify if creating an instance of the class is fulfilled (either resolved or rejected).

WebScene
Boolean

isRejected() may be used to verify if creating an instance of the class is rejected.

WebScene
Boolean

isResolved() may be used to verify if creating an instance of the class is resolved.

WebScene
Promise

Triggers the loading of the WebScene instance.

WebScene
Promise<WebScene>

Loads all the externally loadable resources associated with the webscene.

WebScene
Layer

Removes the specified layer from the layers collection.

Map
Layer[]

Removes all layers.

Map

Removes a group of handles owned by the object.

Accessor
Layer[]

Removes the specified layers.

Map
Layer

Changes the layer order.

Map
Promise<PortalItem>

Saves the webscene to its associated portal item.

WebScene
Promise<PortalItem>

Saves the webscene to a new portal item.

WebScene
Object

Converts an instance of this class to its ArcGIS portal JSON representation.

WebScene
Promise

Update properties of the WebScene related to the view.

WebScene
Promise

when() may be leveraged once an instance of the class is created.

WebScene

Method Details

add

Inherited
Method
add(layer, index)
Inherited from Map

Adds a layer to the layers collection. The before-changes, before-add, after-add, after-changes and change events will be emitted when this method is called.

Parameters
layer Layer|Promise

Layer or a promise that resolves to a layer to add to the layers collection.

index Number
optional

A layer can be added at a specified index in the layers collection. If no index is specified or the index specified is greater than the current number of layers, the layer is automatically appended to the list of layers in the layers collection and the index is normalized.

Example
// add() and push methods can be used
// to add a layer to layers collection

// add a layer to layers collection using add
map.add(layer);

// add a layer at the end of layers collection
map.layers.push(layer);

addHandles

Inherited
Method
addHandles(handleOrHandles, groupKey)
Inherited from Accessor
Since: ArcGIS Maps SDK for JavaScript 4.25 Accessor since 4.0, addHandles added at 4.25.

Adds one or more handles which are to be tied to the lifecycle of the object. The handles will be removed when the object is destroyed.

// Manually manage handles
const handle = reactiveUtils.when(
  () => !view.updating,
  () => {
    wkidSelect.disabled = false;
  },
  { once: true }
);

this.addHandles(handle);

// Destroy the object
this.destroy();
Parameters
handleOrHandles WatchHandle|WatchHandle[]

Handles marked for removal once the object is destroyed.

groupKey *
optional

Key identifying the group to which the handles should be added. All the handles in the group can later be removed with Accessor.removeHandles(). If no key is provided the handles are added to a default group.

addMany

Inherited
Method
addMany(layers, index)
Inherited from Map

Adds a layer or an array of layers to the layers collection. The before-changes, before-add, after-add, after-changes and change events will be emitted when this method is called.

The push() method on the layers collection also can be used to add a layer or layers.

Parameters
layers Layer[]

Layer(s) to be added to the layers collection.

index Number
optional

A layer can be added at a specified index in the layers collection. If no index is specified or the index specified is greater than the current number of layers, the layer is automatically appended to the list of layers in the layers collection and the index is normalized.

Example
// addMany and push methods can be used
// to add layers to layers collection

// add an array of layers to layers collection using addMany
map.addMany([layer, layer2]);

// add layers to layers collection using push method
map.layers.push(layer, layer2);

destroy

Method
destroy()
Since: ArcGIS Maps SDK for JavaScript 4.17 WebScene since 4.0, destroy added at 4.17.

Destroys the webscene, and any associated resources, including its layers, basemap, ground, and portalItem. These can no longer be used once the map has been destroyed. To prevent these objects from being destroyed, remove them from the webscene before calling destroy().

// prevent the layers from being destroyed by removing them from the webscene
const layers = webscene.layers.removeAll();

// unset basemap from the webscene so that it is not destroyed
const basemap = webscene.basemap;
webscene.basemap = null;

// remove ground layers from the map so that they aren't destroyed
const groundLayers = map.ground.removeAll();

// unset portalItem from the webscene so that it is not destroyed
const portalItem = webscene.portalItem;
webscene.portalItem = null;

// destroy the webscene and any remaining associated resources
webscene.destroy();

findLayerById

Inherited
Method
findLayerById(layerId){Layer}
Inherited from Map

Returns a layer based on the given layer ID.

Parameter
layerId String

The ID assigned to the layer.

Returns
Type Description
Layer Returns the requested layer object.

findTableById

Inherited
Method
findTableById(tableId){Layer}
Inherited from Map
Since: ArcGIS Maps SDK for JavaScript 4.18 Map since 4.0, findTableById added at 4.18.

Returns a table based on the given table ID.

Parameter
tableId String

The ID assigned to the table.

Returns
Type Description
Layer Returns the requested table object.

fromJSON

Method
fromJSON(json){WebScene}static

Creates a new instance of this class and initializes it with values from a JSON object generated from an ArcGIS product. The object passed into the input json parameter often comes from a response to a query operation in the REST API or a toJSON() method from another ArcGIS product. If the WebScene is used outside of a view, you must call load() explicitly to interact with its resources. See the Using fromJSON() topic in the Guide for details and examples of when and how to use this function.

Parameter
json Object

A JSON representation of the instance in the ArcGIS format. See the web scene specification for more detailed information on serializing web scenes to JSON.

Returns
Type Description
WebScene Returns a new instance of this class.
Example
// Retrieve a WebScene JSON by url and deserialize it into a WebScene API instance
require(["esri/request", "esri/WebScene"], function(esriRequest, WebScene) {
  esriRequest("http://domain/url/to/webscene.json").then(function(json) {
    const scene = WebScene.fromJSON(json);

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

hasHandles

Inherited
Method
hasHandles(groupKey){Boolean}
Inherited from Accessor
Since: ArcGIS Maps SDK for JavaScript 4.25 Accessor since 4.0, hasHandles added at 4.25.

Returns true if a named group of handles exist.

Parameter
groupKey *
optional

A group key.

Returns
Type Description
Boolean Returns true if a named group of handles exist.
Example
// Remove a named group of handles if they exist.
if (obj.hasHandles("watch-view-updates")) {
  obj.removeHandles("watch-view-updates");
}

isFulfilled

Method
isFulfilled(){Boolean}

isFulfilled() may be used to verify if creating an instance of the class is fulfilled (either resolved or rejected). If it is fulfilled, true will be returned.

Returns
Type Description
Boolean Indicates whether creating an instance of the class has been fulfilled (either resolved or rejected).

isRejected

Method
isRejected(){Boolean}

isRejected() may be used to verify if creating an instance of the class is rejected. If it is rejected, true will be returned.

Returns
Type Description
Boolean Indicates whether creating an instance of the class has been rejected.

isResolved

Method
isResolved(){Boolean}

isResolved() may be used to verify if creating an instance of the class is resolved. If it is resolved, true will be returned.

Returns
Type Description
Boolean Indicates whether creating an instance of the class has been resolved.

load

Method
load(){Promise}

Triggers the loading of the WebScene instance.

A WebScene is considered loaded when its operational layers, basemap and ground are fully created. When created with a portalItem, load() will first fetch its data to create the content, otherwise it resolves immediately.

The SceneView automatically calls the load() method when a WebScene instance is added to its map property so it can display in the view and load each individual layer. If the WebScene is used outside of a view, for example to preload it, you must call load() explicitly to interact with its resources.

Returns
Type Description
Promise Resolves when the WebScene is loaded.
See also
Example
// programmatically load all the layers
require([
  "esri/WebScene"
], function(
  WebScene
) {

  const scene = new WebScene({
    portalItem: {
      id: "affa021c51944b5694132b2d61fe1057"
    }
  });

  scene.load()
    .then(function() {
      // load the basemap to get its layers created
      return scene.basemap.load();
    })
    .then(function() {
      // grab all the layers and load them
      const allLayers = scene.allLayers;
      const promises = allLayers.map(function(layer) {
        return layer.load();
      });
      return Promise.all(promises.toArray());
    })
    .then(function(layers) {
      // each layer load promise resolves with the layer
      console.log("all " + layers.length + " layers loaded");
    })
    .catch(function(error) {
      console.error(error);
    });
});

loadAll

Method
loadAll(){Promise<WebScene>}
Since: ArcGIS Maps SDK for JavaScript 4.9 WebScene since 4.0, loadAll added at 4.9.

Loads all the externally loadable resources associated with the webscene. For the webscene this will load the ground, basemap, layers and slide basemaps.

Returns
Type Description
Promise<WebScene> Resolves when all the loadable resources have been loaded. Rejects if at least one of the loadable resources failed to load.
See also
Example
// Load all resources but ignore if one or more of them failed to load
webscene.loadAll()
  .catch(function(error) {
    // Ignore any failed resources
  })
  .then(function() {
    console.log("All loaded");
  });

remove

Inherited
Method
remove(layer){Layer}
Inherited from Map

Removes the specified layer from the layers collection. The before-changes, before-remove, after-remove, after-changes and change events will be emitted when this method is called.

Parameter
layer Layer

Layer to remove from the layers collection.

Returns
Type Description
Layer Returns the layer removed from the layers collection.

removeAll

Inherited
Method
removeAll(){Layer[]}
Inherited from Map

Removes all layers. The before-changes, before-remove, after-remove, after-changes and change events will be emitted when this method is called.

Returns
Type Description
Layer[] Returns the layers removed from the layers collection.

removeHandles

Inherited
Method
removeHandles(groupKey)
Inherited from Accessor
Since: ArcGIS Maps SDK for JavaScript 4.25 Accessor since 4.0, removeHandles added at 4.25.

Removes a group of handles owned by the object.

Parameter
groupKey *
optional

A group key or an array or collection of group keys to remove.

Example
obj.removeHandles(); // removes handles from default group

obj.removeHandles("handle-group");
obj.removeHandles("other-handle-group");

removeMany

Inherited
Method
removeMany(layers){Layer[]}
Inherited from Map

Removes the specified layers. The before-changes, before-remove, after-remove, after-changes and change events will be emitted when this method is called.

Parameter
layers Layer[]

Array of layers to remove from the layers collection.

Returns
Type Description
Layer[] Returns the layers removed from the layers collection.

reorder

Inherited
Method
reorder(layer, index){Layer}
Inherited from Map

Changes the layer order. The first layer added is always the base layer, even if its order is changed. The change event will be emitted when this method is called.

In 3D, for layers that are rendered on the terrain, the order of the layers also depends on the type of layer. Tiled layers (BaseTileLayer, ImageryTileLayer, OpenStreetMapLayer, TileLayer, VectorTileLayer, WCSLayer, WebTileLayer and WMTSLayer) are always drawn first in the same order as specified in the layer collection. Dynamic layers (MapImageLayer, ImageryLayer, WMSLayer, and feature based layers with elevation mode on-the-ground) are rendered on top using the order from the layer collection.

Parameters
layer Layer

The layer to be moved.

index Number

The index location for placing the layer. The bottom-most layer has an index of 0.

Returns
Type Description
Layer Returns the layer that was moved.

save

Method
save(options){Promise<PortalItem>}
Since: ArcGIS Maps SDK for JavaScript 4.1 WebScene since 4.0, save added at 4.1.

Saves the webscene to its associated portal item. The portal item to save to must already exist and be valid. This is a convenience method that will use PortalItem to store the webscene in the item. The web scene is saved according to web scene specification standards.

If the scene is displayed in a view, use updateFrom to store the current view properties in the webscene before saving it.

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

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

scene.updateFrom(view).then(function() {
  scene.save();
});

Note that this saves the webscene to its existing item. Depending on how the scene is shared, users that do not own the scene may modify it. To save an existing scene as a new item owned by the user signed into the portal instance, use saveAs().

Wait until each save() operation has resolved before starting a new save() operation to avoid a potential abort-error.

The webscene will be automatically loaded if it is not already before saving.

Parameters
options Object
optional

Additional options.

Specification
ignoreUnsupported Boolean
optional

When true, the scene will save even if it contains unsupported content (layers, renderers, symbols). Any content that is not supported will not be saved and the scene may appear different when reloaded from its portal item.

Returns
Type Description
Promise<PortalItem> A promise that resolves with the PortalItem instance when the item has successfully been saved, or rejects otherwise.

saveAs

Method
saveAs(portalItem, options){Promise<PortalItem>}
Since: ArcGIS Maps SDK for JavaScript 4.1 WebScene since 4.0, saveAs added at 4.1.

Saves the webscene to a new portal item. If saving has completed successfully, then the saved portal item will be set in the portalItem property of the WebScene. This is a convenience method that will create a new PortalItem and use PortalUser.addItem() to store the webscene in a Portal.

Use updateFrom to store the current view properties in the webscene before saving it.

Note that this always saves the webscene as a new portal item owned by the user performing the edits and executing the saveAs() method. If you want to modify the existing item without changing its ownership use save().

Wait until each saveAs() operation has resolved before starting a new saveAs() operation to avoid a potential abort-error.

The webscene will be automatically loaded if it is not already before saving.

Parameters
Specification
portalItem PortalItem autocast
Autocasts from Object

The new portal item to which the scene will be saved.

Portal item properties such as the title or description need to be explicitly set on the item and will not be automatically copied from the current associated scene portal item (if any).

options Object
optional

additional save options.

Specification
folder PortalFolder
optional

the folder in which to save the item.

ignoreUnsupported Boolean
optional

allow the scene to be saved even in the case it contains unsupported content (layers, renderers, symbols). Any content that is not supported will not be saved and the scene may appear different when reloaded from its portal item.

Returns
Type Description
Promise<PortalItem> a promise that resolves with the PortalItem instance when the item has successfully been saved, or rejects otherwise.
Examples
const scene = new WebScene();
scene.saveAs({
  // autocasts as new PortalItem()
  title: "New WebScene"
});
const scene = new WebScene({
  basemap: "topo-vector"
});

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

// use updateFrom in case the webscene is displayed in a view
// to store the current view properties in the scene
scene.updateFrom(view).then(function() {
  scene.saveAs({
    // autocasts as new PortalItem()
    title: "New WebScene"
  });
});

toJSON

Method
toJSON(){Object}

Converts an instance of this class to its ArcGIS portal JSON representation. See the Using fromJSON() topic in the Guide and the web scene specification for more information.

Returns
Type Description
Object The ArcGIS portal JSON representation of an instance of this class.

updateFrom

Method
updateFrom(view, options){Promise}

Update properties of the WebScene related to the view.

This should usually be called just before saving a scene. The following properties are updated from the view:

  1. initialViewProperties.spatialReference
  2. initialViewProperties.viewingMode
  3. clippingArea
  4. heightModelInfo

Depending on the provided options, the following properties are also updated:

  1. initialViewProperties.environment
  2. initialViewProperties.viewpoint
  3. thumbnail
Parameters
Specification
view SceneView

The view to update from.

options Object
optional

Options for updating.

Parameters
Specification
environmentExcluded Boolean
optional

Do not update the initial environment from the view, defaults to false.

viewpointExcluded Boolean
optional

Do not update the initial viewpoint from the view, defaults to false.

thumbnailExcluded Boolean
optional

Do not update the thumbnail from the view. Defaults to true, unless viewpointExcluded is set to true.

thumbnailSize Object
optional

The size of the thumbnail. Defaults to 600x400 (ratio 1.5:1). Note that the thumbnail size may currently not be larger than the size of the view.

Specification
width Number

The width of the thumbnail.

height Number

The height of the thumbnail.

Returns
Type Description
Promise Resolves when the update has completed.
See also

when

Method
when(callback, errback){Promise}
Since: ArcGIS Maps SDK for JavaScript 4.6 WebScene since 4.0, when added at 4.6.

when() may be leveraged once an instance of the class is created. This method takes two input parameters: a callback function and an errback function. The callback executes when the instance of the class loads. The errback executes if the instance of the class fails to load.

Parameters
callback Function
optional

The function to call when the promise resolves.

errback Function
optional

The function to execute when the promise fails.

Returns
Type Description
Promise Returns a new promise for the result of callback that may be used to chain additional functions.
Example
// Although this example uses MapView, any class instance that is a promise may use when() in the same way
let view = new MapView();
view.when(function(){
  // This function will execute once the promise is resolved
}, function(error){
  // This function will execute if the promise is rejected due to an error
});

Your browser is no longer supported. Please upgrade your browser for the best experience. See our browser deprecation post for more details.