var webmap = new WebMap({
  portalItem: { // autocasts as new PortalItem()
    id: "e691172598f04ea8881cd2a4adaa45ba"
  }
});

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

var webmap = new WebMap({
  portalItem: { // autocasts as new PortalItem()
    id: "f701172599f04ea8781de2a4adzz46ab"
  }
});

var view = new MapView({
  map: webmap,  // The WebMap instance created above
  container: "viewDiv"
});

Property Overview

Property Details

allLayers Collection<Layer>readonly inherited

A flat collection of all the 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.

Example:

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

// Create a filtered collection of the non-group layers
var 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);
});

applicationProperties ApplicationProperties

Since: ArcGIS API for JavaScript 4.14

The applicationProperties contains the viewing properties of the WebMap.

authoringApp String

Since: ArcGIS API for JavaScript 4.14

The name of the application that authored the WebMap.

authoringAppVersion String

Since: ArcGIS API for JavaScript 4.14

The version of the application that authored the WebMap.

basemap Basemapautocast inherited

Autocasts from String|Object

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

This value can be an instance of Basemap or one of the strings listed in the table below.

Value	Source	Thumbnail
topo	https://services.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer
streets	https://services.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer
satellite	https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer
hybrid	https://services.arcgisonline.com/ArcGIS/rest/services/Reference/World_Boundaries_and_Places/MapServer and https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer
dark-gray	https://services.arcgisonline.com/ArcGIS/rest/services/Canvas/World_Dark_Gray_Reference/MapServer and https://services.arcgisonline.com/ArcGIS/rest/services/Canvas/World_Dark_Gray_Base/MapServer
gray	https://services.arcgisonline.com/ArcGIS/rest/services/Canvas/World_Light_Gray_Reference/MapServer and https://services.arcgisonline.com/ArcGIS/rest/services/Canvas/World_Light_Gray_Base/MapServer
national-geographic	https://services.arcgisonline.com/ArcGIS/rest/services/NatGeo_World_Map/MapServer
oceans	https://services.arcgisonline.com/arcgis/rest/services/Ocean/World_Ocean_Reference/MapServer and https://services.arcgisonline.com/arcgis/rest/services/Ocean/World_Ocean_Base/MapServer
osm	OpenStreetMapLayer
terrain	https://services.arcgisonline.com/ArcGIS/rest/services/Reference/World_Reference_Overlay/MapServer and https://services.arcgisonline.com/ArcGIS/rest/services/World_Terrain_Base/MapServer
dark-gray-vector	Dark Gray Canvas [v2]
gray-vector	Light Gray Canvas [v2]
streets-vector	World Street Map [v2]
streets-night-vector	World Street Map (Night) [v2]
streets-navigation-vector	World Navigation Map [v2]
topo-vector	https://services.arcgisonline.com/arcgis/rest/services/Elevation/World_Hillshade/MapServer and World Topographic Map [v2]
streets-relief-vector	https://services.arcgisonline.com/arcgis/rest/services/Elevation/World_Hillshade/MapServer and World Street Map (with Relief) [v2]

Example:

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

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

bookmarks Collection<Bookmark>autocast

An array of saved geographic extents that allow end users to quickly navigate to a particular area of interest.

declaredClass Stringreadonly inherited

Since: ArcGIS API for JavaScript 4.7

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

ground Groundautocast inherited

Autocasts from String|Object

Specifies the surface properties for the map. This property is only relevant when adding the map to a 3D SceneView. It renders the terrain or topographical variations in the real world on the map's surface with a collection of ElevationLayer.

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.

See also:

• ElevationLayer
• Ground

Examples:

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

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

initialViewProperties InitialViewPropertiesautocast

The initial view of the WebMap. This object contains properties such as viewpoint, spatialReference, that should be applied to the view when the WebMap loads.

layers Collection<Layer>autocast inherited

Autocasts from Layer[]

A collection of operational layers. This property only contains interactive 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().

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.

var 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);

Example:

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

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

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

loaded Booleanreadonly

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

Default Value:false

loadError Errorreadonly

The Error object returned if an error occurred while loading.

Default Value:null

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 PortalItemautocast

The portal item from which the WebMap is loaded.

presentation Object

Provides multiple slides. Each slide has a different "title", "extent", "basemap", "layers" etc.

sourceVersion Objectreadonly

Since: ArcGIS API for JavaScript 4.1

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

Properties:

major Number The major version of the WebMap.

minor Number The minor version of the WebMap.

tables Object[]

An array of table objects in the WebMap.

thumbnailUrl String

Since: ArcGIS API for JavaScript 4.14

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

Example:

webmap.updateFrom(view)
  .then(function() {
    return webmap.save();
  })
  // thumbnail will be updated based on current extent of webmap
  .then(function(portalItem) {
    console.log("Saved to portal", portalItem.id);
  })
  .catch(function(error) {
    console.error("Error saving to portal", error);
  });

widgets Object

The widgets object contains widgets that should be exposed to the user.

Method Overview

Method Details

add(layer, index)inherited

Adds a layer to the layers collection.

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.

addMany(layers, index)inherited

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

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.

findLayerById(layerId){Layer}inherited

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.

fromJSON(json){*}static

Since: ArcGIS API for JavaScript 4.12

Creates a new instance of this class and initializes it with values from a JSON object generated from a product in the ArcGIS platform. 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 WebMap 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 map specification for more detailed information on serializing web map to JSON.

Returns:

Type	Description
*	Returns a new instance of this class.

Example:

// Retrieve a WebMap JSON by url and deserialize it into a WebMap API instance
require(["esri/request", "esri/WebMap"], function(esriRequest, WebMap) {
  esriRequest("http://domain/url/to/webmap.json").then(function(json) {
    const webmap = WebMap.fromJSON(json);

    const view = new MapView({
      map: webmap,
      container: "viewDiv"
    });
  });
});

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(){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(){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(){Promise}

Triggers the loading of the WebMap instance.

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

The MapView automatically calls the load() method when a WebMap instance is added to its map property so it can display in the view and load each individual layer. If the WebMap 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 WebMap is loaded.

See also:

• portalItem

Example:

require([
  "esri/WebMap"
], function(
  WebMap
) {

  var map = new WebMap({
    portalItem: {
      id: "e691172598f04ea8881cd2a4adaa45ba"
    }
  });

  map.load()
    .then(function() {
      // load the basemap to get its layers created
      return map.basemap.load();
    })
    .then(function() {
      // grab all the layers and load them
      var allLayers = map.allLayers;
      var 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(){Promise<WebMap>}

Since: ArcGIS API for JavaScript 4.9

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

Returns:

Type	Description
Promise<WebMap>	Resolves when all the loadable resources have been loaded. Rejects if at least one of the loadable resources failed to load.

See also:

• load

Example:

// Load all resources but ignore if one or more of them failed to load
webmap.loadAll()
  .catch(function(error) {
    // Ignore any failed resources
  })
  .then(function() {
    console.log("All loaded");
  });

remove(layer){Layer}inherited

Removes the specified layer from the layers collection.

Parameter:

layer Layer Layer to remove from the layers collection.

Returns:

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

removeAll(){Layer[]}inherited

Removes all layers.

Returns:

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

removeMany(layers){Layer[]}inherited

Removes the specified layers.

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(layer, index){Layer}inherited

Changes the layer order. The first layer added is always the base layer, even if its order is changed.

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(options){Promise<PortalItem>}

Since: ArcGIS API for JavaScript 4.14

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

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

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

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

Known Limitations

• FeatureLayers created from non-spatial tables will not be saved.
• For ImageryLayer, KMLLayer, MapImageLayer, and WMSLayer the following rules will apply:
  • Any new layers of these types added to the webmap will not be saved.
  • For existing layers only modifications to the following properties will saved: maxScale, minScale, opacity, title, visibility.

Parameters:

options Object optional Additional options. Specification: ignoreUnsupported Boolean optional When true, the webmap will save even if it contains unsupported content (layers, renderers, symbols). Any content that is not supported will not be saved and the webmap 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 rejected otherwise.

See also:

• updateFrom

Example:

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

saveAs(portalItem, options){Promise<PortalItem>}

Since: ArcGIS API for JavaScript 4.14

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

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

Note that this always saves the webmap as a new portal item owned by the user signed into the portal instance that executes the saveAs() method. If you want to modify an existing item without changing its ownership, use save().

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

Known Limitations

• FeatureLayers created from non-spatial tables will not be saved.
• For ImageryLayer, KMLLayer, MapImageLayer, and WMSLayer the following rules will apply:
  • Any new layers of these types added to the webmap will not be saved.
  • For existing layers only modifications to the following properties will saved: maxScale, minScale, opacity, title, visibility.

Parameters:

Specification:

portalItem PortalItem autocast Autocasts from Object The new portal item to which the webmap 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 webmap 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 webmap 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 webmap 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 rejected otherwise.

See also:

• updateFrom

Example:

var webmap = new WebMap();
webmap.saveAs({
  // autocasts as new PortalItem()
  title: "New WebMap"
});

updateFrom(view, options){Promise}

Since: ArcGIS API for JavaScript 4.14

Update properties of the WebMap related to the view. This should usually be called just before saving a webmap. The following properties are updated from the view:

1. InitialViewProperties.spatialReference

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

2. InitialViewProperties.viewpoint
3. The thumbnail of the PortalItem

Parameters:

Specification:

view MapView The view to update from.

options Object optional Update options. Parameters: Specification: viewpointExcluded Boolean optional When true, the initial viewpoint of the view will be updated for the webmap. Defaults to false. thumbnailExcluded Boolean optional When true, the thumbnail will not be updated for the webmap. Defaults to false. 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:

• save

• saveAs

when(callback, errback){Promise}

Since: ArcGIS API for JavaScript 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 then() in the same way
var 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
});