WebMap | References | ArcGIS Maps SDK for JavaScript

import WebMap from "@arcgis/core/WebMap.js";

Inheritance:: WebMap→WebDocument2D→Map→Accessor

Since: ArcGIS Maps SDK for JavaScript 4.0

Loads a WebMap from ArcGIS Online or ArcGIS Enterprise portal into a MapView. It defines the content, style, and bookmarks of your webmap, and it can be shared across multiple ArcGIS web and desktop applications. The webmap is saved as a JSON document that can be consumed by the ArcGIS Maps SDK for JavaScript via the WebMap class to easily create compelling 2D applications. The JSON document is written according to the webmap specification. Although you can easily create your own webmaps, there are many sample webmaps in ArcGIS Online that you can use to get started with the API. You may modify or add new content to these webmaps.

To load a WebMap from ArcGIS Online into a MapView, you must reference the ID of the webmap in the portalItem property of this class.

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

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

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

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

Then you must reference the WebMap instance in the map property of the view.

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

Known Limitations

WCSLayers are currently not supported. WFSLayers must be from a WFS 2.0.0 service and have GeoJSON output format enabled. In instances when the webmap contains layer types that are not yet supported in the API, layers will be created as an UnsupportedLayer. This layer type is used specifically in these instances where the layer may exist in a given WebMap (e.g. WFS layer from WFS 1.0.0), but may not be currently supported in the version of the API accessing it. An UnknownLayer will be used if future versions of the WebMap contains a new type of layer. The API version may not recognize this layer type, therefore it would come across as an UnknownLayer.

Embedded Routes

Prior to the ArcGIS Online 8.1 release (March 2020) when copying a route layer from an item to be stored inside a WebMap it would be stored as an embedded feature collection, and inadvertently not attributed as a route. When these webmaps are loaded by the JS API, the routes will be represented by a GroupLayer rather than a RouteLayer. This does not affect copied route layer items after the ArcGIS Online 8.1 release or routes stored as portal items. Copying route layer items to be stored as part of the webmap is not a common scenario.

Accessing geometries from popup features

Beginning with version 4.17, webmaps no longer return geometries in its popup's features. If a popup does not have a referenced Arcade expression that works with geometry, it is now required to set either the webmap layer's FeatureLayer.outFields or its PopupTemplate PopupTemplate.outFields.

See also

Constructors

Constructor

Parameters

Parameter	Type	Description	Required
properties	`WebMapProperties`

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

Examples

// Typical usage
const map = new WebMap({
  portalItem: {
    id: "e691172598f04ea8881cd2a4adaa45ba"
  }
});

// Typical usage
const map = new Map({
  basemap: "topo-vector"
});

Properties

Any properties can be set, retrieved or listened to. See the Watch for changes topic.

Property	Type	Class
`allLayers` readonly inherited	`ReadonlyCollection<Layer>`	Map
`allTables` readonly inherited	`ReadonlyCollection<Layer>`	Map
`applicationProperties` inherited	`ApplicationProperties \| null \| undefined`	WebDocument2D
`authoringApp` inherited	`string \| null \| undefined`	WebDocument2D
`authoringAppVersion` inherited	`string \| null \| undefined`	WebDocument2D
`basemap` inherited	`Basemap \| null \| undefined`	Map
`bookmarks` inherited	`Collection<Bookmark>`	WebDocument2D
`declaredClass` readonly inherited	`string`	Accessor
`editableLayers` readonly inherited	`ReadonlyCollection<EditableLayerUnion>`	Map
`floorInfo` inherited	`MapFloorInfo \| null \| undefined`	WebDocument2D
`focusAreas` inherited	`FocusAreas`	Map
`geotriggersInfo`	`GeotriggersInfo \| null \| undefined`
`ground` inherited	`Ground`	Map
`initialViewProperties` inherited	`InitialViewProperties`	WebDocument2D
`ipsInfo`	`IPSInfo \| null \| undefined`
`layers` inherited	`Collection<Layer>`	LayersMixin
`loaded` readonly inherited	`boolean`	WebDocument2D
`loadError` readonly inherited	`EsriError \| null \| undefined`	LoadableMixin
`loadStatus` readonly inherited	`"not-loaded" \| "loading" \| "failed" \| "loaded"`	LoadableMixin
`loadWarnings` readonly inherited	`any[]`	LoadableMixin
`portalItem` inherited	`PortalItem \| null \| undefined`	WebDocument2D
`presentation`	`any`
`sourceVersion` readonly	`Version \| null \| undefined`
`tables` inherited	`Collection<Layer>`	TablesMixin
`thumbnailUrl` inherited	`string \| null \| undefined`	WebDocument2D
`utilityNetworks`	`Collection<UtilityNetwork> \| null \| undefined`
`widgets` inherited	`Widgets \| null \| undefined`	WebDocument2D

allLayers

readonlyinherited Property

Type: ReadonlyCollection<Layer>

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

// Watching for changes to the visible layers in the Map
reactiveUtils.watch(
  () => view.map.allLayers.filter((layer) => layer.visible),
  (newVisibleLayers, oldVisibleLayers) => {
    const added = newVisibleLayers.filter(
      (layer) => !oldVisibleLayers.includes(layer)
    );
    const removed = oldVisibleLayers.filter(
      (layer) => !newVisibleLayers.includes(layer)
    );
    added.forEach((layer) => console.log(layer.title, "is visible"));
    removed.forEach((layer) => console.log(layer.title, "is not visible"));
  }
);

allTables

readonlyinherited Property

Type: ReadonlyCollection<Layer>

Inherited from: Map

Since: ArcGIS Maps SDK for JavaScript 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.isTable 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

autocast inherited Property

Type: ApplicationProperties | null | undefined

Inherited from: WebDocument2D

The applicationProperties contains the viewing properties of the WebMap.

authoringApp

inherited Property

Type: string | null | undefined

Inherited from: WebDocument2D

The name of the application that authored the WebMap.

authoringAppVersion

inherited Property

Type: string | null | undefined

Inherited from: WebDocument2D

The version of the application that authored the WebMap.

basemap

autocast inherited Property

Type: Basemap | null | undefined

Inherited from: Map

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:

From the basemap styles service (v2)
From an instance of the Basemap class
From a basemap id

Use of these basemaps requires either an ArcGIS Location Platform account, 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 have privileges to access the appropriate location service.

Basemap Id

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

3D Basemaps can only be used in SceneView.

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 Hillshade
`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)

Examples

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

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

// Set the basemap from a string ID in the constructor
const map = new Map({
  basemap: "dark-gray-3d"
});

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

// 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
});

bookmarks

autocast inherited Property

Type: Collection<Bookmark>

Inherited from: WebDocument2D

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

declaredClass

readonlyinherited Property

Type: string

Inherited from: Accessor

Since: ArcGIS Maps SDK for JavaScript 4.7

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

editableLayers

readonlyinherited Property

Type: ReadonlyCollection<EditableLayerUnion>

Inherited from: Map

Since: ArcGIS Maps SDK for JavaScript 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.

See also

floorInfo

autocast inherited Property

Type: MapFloorInfo | null | undefined

Inherited from: WebDocument2D

When a web map is configured as floor-aware, it has a floorInfo property defined. A floor-aware map is a map that contains indoor GIS data representing floor plan features. The floor info must contain MapFloorInfo.levelLayer and MapFloorInfo.facilityLayer properties at a minimum. The MapFloorInfo.siteLayer property is optional.

focusAreas

autocast inherited Property

Type: FocusAreas

Inherited from: Map

A container of all focus areas present in the map.

Known Limitations

Focus areas are only supported in SceneView.

See also

geotriggersInfo

autocast Property

Type: GeotriggersInfo | null | undefined

Since: ArcGIS Maps SDK for JavaScript 4.24

Information relating to a list of Geotriggers.

ground

autocast inherited Property

Type: Ground

Inherited from: Map

Specifies the surface properties for the map. In MapView, this property is used by the ElevationProfileAnalysis 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.

See also

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 ]
  })
});

initialViewProperties

autocast inherited Property

Type: InitialViewProperties

Inherited from: WebDocument2D

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

ipsInfo

autocast Property

Type: IPSInfo | null | undefined

Since: ArcGIS Maps SDK for JavaScript 4.31

Contains indoor positioning system information for the map.

layers

autocast inherited Property

Type: Collection<Layer>

Inherited from: LayersMixin

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 Collection.add() or Collection.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.tables or WebMap.tables 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

readonlyinherited Property

Type: boolean

Inherited from: WebDocument2D

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

readonlyinherited Property

Type: EsriError | null | undefined

Inherited from: LoadableMixin

The Error object returned if an error occurred while loading.

loadStatus

readonlyinherited Property

Type: "not-loaded" | "loading" | "failed" | "loaded"

Inherited from: LoadableMixin

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.

Default value: "not-loaded"

loadWarnings

readonlyinherited Property

Type: any[]

Inherited from: LoadableMixin

A list of warnings which occurred while loading.

portalItem

autocast inherited Property

Type: PortalItem | null | undefined

Inherited from: WebDocument2D

The portal item from which the WebMap is loaded.

presentation

Property

Type: any

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

sourceVersion

readonly Property

Type: Version | null | undefined

Since: ArcGIS Maps SDK 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.

tables

autocast inherited Property

Type: Collection<Layer>

Inherited from: TablesMixin

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 FeatureLayer.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 FeatureLayer.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 FeatureLayer.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.tables is not yet supported. If this is needed, add them to the Map.tables and/or WebMap.tables.

Currently, only feature service feature layers are recognized. To access spatial layers, use the layers property in either Map.layers or WebMap.layers classes

See also

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"
});
// Add featureLayer to the map
map.add(featureLayer);

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

// 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

inherited Property

Type: string | null | undefined

Inherited from: WebDocument2D

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

utilityNetworks

autocast Property

Type: Collection<UtilityNetwork> | null | undefined

The utilityNetworks object contains a collection of UtilityNetworks saved on the web map.

widgets

autocast inherited Property

Type: Widgets | null | undefined

Inherited from: WebDocument2D

The widgets object contains widgets that are exposed to the user.

Methods

Method	Signature	Class
`fromJSON` static	`fromJSON(json: any): WebMap`
`add` inherited	`add(layer: Layer \| PromiseLike<Layer>, index?: number): void`	LayersMixin
`addMany` inherited	`addMany(layers: Layer[], index?: number): void`	LayersMixin
`cancelLoad` inherited	`cancelLoad(): this`	LoadableMixin
`destroy` inherited	`destroy(): void`	WebDocument2D
`emit` inherited	`emit<Type extends EventNames<this>>(type: Type, event?: this["@eventTypes"][Type]): boolean`	EventedMixin
`findLayerById` inherited	`findLayerById(layerId: string): Layer \| null \| undefined`	LayersMixin
`findTableById` inherited	`findTableById(tableId: string): Layer \| null \| undefined`	TablesMixin
`hasEventListener` inherited	`hasEventListener<Type extends EventNames<this>>(type: Type): boolean`	EventedMixin
`isFulfilled` inherited	`isFulfilled(): boolean`	EsriPromiseMixin
`isRejected` inherited	`isRejected(): boolean`	EsriPromiseMixin
`isResolved` inherited	`isResolved(): boolean`	EsriPromiseMixin
`load` inherited	`load(options?: AbortOptions \| null \| undefined): Promise<this>`	WebDocument2D
`loadAll` inherited	`loadAll(): Promise<this>`	WebDocument2D
`on` inherited	`on<Type extends EventNames<this>>(type: Type, listener: EventedCallback<this["@eventTypes"][Type]>): ResourceHandle`	EventedMixin
`remove` inherited	`remove(layer: Layer): Layer \| null \| undefined`	LayersMixin
`removeAll` inherited	`removeAll(): Layer[]`	LayersMixin
`removeMany` inherited	`removeMany(layers: Layer[]): Layer[]`	LayersMixin
`reorder` inherited	`reorder(layer: Layer, index?: number): Layer \| null \| undefined`	LayersMixin
`save` inherited	`save(options?: SaveOptions): Promise<PortalItem>`	WebDocument2D
`saveAs` inherited	`saveAs(portalItem: PortalItemProperties, options?: SaveAsOptions): Promise<PortalItem>`	WebDocument2D
`updateFrom` inherited	`updateFrom(view: MapView, options?: UpdateFromOptions): Promise<void>`	WebDocument2D
`when` inherited	`when<TResult1 = this, TResult2 = never>(onFulfilled?: OnFulfilledCallback<this, TResult1> \| null \| undefined, onRejected?: OnRejectedCallback<TResult2> \| null \| undefined): Promise<TResult1 \| TResult2>`	EsriPromiseMixin

fromJSON

static Method

Signature: fromJSON (json: any): WebMap

Since: ArcGIS Maps SDK for JavaScript 4.12

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 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.

Parameters

Parameter	Type	Description	Required
json	`any`	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: WebMap
Returns a new instance of this class.

Example

// Retrieve a WebMap JSON by url and deserialize it into a WebMap API instance
const [esriRequest, WebMap] = await $arcgis.import(["@arcgis/core/request.js", "@arcgis/core/WebMap.js"]);
esriRequest("https://domain/url/to/webmap.json").then(function(json) {
  const webmap = WebMap.fromJSON(json);
});

add

inherited Method

Signature: add (layer: Layer | PromiseLike<Layer>, index?: number): void

Inherited from: LayersMixin

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

See also

layer collection's push() method

Parameters

Parameter	Type	Description	Required
layer	`Layer \| PromiseLike<Layer>`	Layer or a promise that resolves to a layer to add to the layers collection.
index	`number`	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.

Returns: void

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

addMany

inherited Method

Signature: addMany (layers: Layer[], index?: number): void

Inherited from: LayersMixin

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

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

See also

layer collection's push() method

Parameters

Parameter	Type	Description	Required
layers	`Layer[]`	Layer(s) to be added to the layers collection.
index	`number`	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.

Returns: void

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

cancelLoad

inherited Method

Signature: cancelLoad (): this

Inherited from: LoadableMixin

Cancels a load() operation if it is already in progress.

Returns: this

destroy

inherited Method

Signature: destroy (): void

Inherited from: WebDocument2D

Since: ArcGIS Maps SDK for JavaScript 4.17

Destroys the webmap, and any associated resources, including its layers, basemap, ground, tables, 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 webmap before calling destroy().

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

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

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

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

// prevent the utility networks from being destroyed by removing them from the webmap
const networks = webmap.utilityNetworks.removeAll();

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

See also

Returns: void

emit

inherited Method

Signature: emit <Type extends EventNames<this>>(type: Type, event?: this["@eventTypes"][Type]): boolean

Type parameters: <Type extends EventNames<this>>

Inherited from: EventedMixin

Since: ArcGIS Maps SDK for JavaScript 4.5

Emits an event on the instance. This method should only be used when creating subclasses of this class.

Parameters

Parameter	Type	Description	Required
type	`Type`	The name of the event.
event	`this["@eventTypes"][Type]`	The event payload.

Returns: boolean
true if a listener was notified

findLayerById

inherited Method

Signature: findLayerById (layerId: string): Layer | null | undefined

Inherited from: LayersMixin

Returns a layer based on the given layer ID.

Parameters

Parameter	Type	Description	Required
layerId	`string`	The ID assigned to the layer.

Returns: Layer | null | undefined
Returns the requested layer object.

findTableById

inherited Method

Signature: findTableById (tableId: string): Layer | null | undefined

Inherited from: TablesMixin

Since: ArcGIS Maps SDK for JavaScript 4.18

Returns a table based on the given table ID.

Parameters

Parameter	Type	Description	Required
tableId	`string`	The ID assigned to the table.

Returns: Layer | null | undefined
Returns the requested table object.

hasEventListener

inherited Method

Signature: hasEventListener <Type extends EventNames<this>>(type: Type): boolean

Type parameters: <Type extends EventNames<this>>

Inherited from: EventedMixin

Indicates whether there is an event listener on the instance that matches the provided event name.

Parameters

Parameter	Type	Description	Required
type	`Type`	The name of the event.

Returns: boolean
Returns true if the class supports the input event.

isFulfilled

inherited Method

Signature: isFulfilled (): boolean

Inherited from: EsriPromiseMixin

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: boolean
Indicates whether creating an instance of the class has been fulfilled (either resolved or rejected).

isRejected

inherited Method

Signature: isRejected (): boolean

Inherited from: EsriPromiseMixin

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

Returns: boolean
Indicates whether creating an instance of the class has been rejected.

isResolved

inherited Method

Signature: isResolved (): boolean

Inherited from: EsriPromiseMixin

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

Returns: boolean
Indicates whether creating an instance of the class has been resolved.

load

inherited Method

Signature: load (options?: AbortOptions | null | undefined): Promise<this>

Inherited from: WebDocument2D

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 MapView.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.

See also

portalItem

Parameters

Parameter	Type	Description	Required
options	`AbortOptions \| null \| undefined`	Additional options.

Returns: Promise<this>
Resolves when the WebMap is loaded.

Example

const WebMap = await $arcgis.import("@arcgis/core/WebMap.js");

const 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
    const allLayers = map.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

inherited Method

Signature: loadAll (): Promise<this>

Inherited from: WebDocument2D

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

See also

load()

Returns: Promise<this>
Resolves when all the loadable resources have been loaded. Rejects if at least one of the loadable resources failed to 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");
  });

on

inherited Method

Signature: on <Type extends EventNames<this>>(type: Type, listener: EventedCallback<this["@eventTypes"][Type]>): ResourceHandle

Type parameters: <Type extends EventNames<this>>

Inherited from: EventedMixin

Registers an event handler on the instance. Call this method to hook an event with a listener.

Parameters

Parameter	Type	Description	Required
type	`Type`	An event or an array of events to listen for.
listener	`EventedCallback<this["@eventTypes"][Type]>`	The function to call when the event fires.

Returns

ResourceHandle

Returns an event handler with a remove() method that should be called to stop listening for the event(s).

Property	Type	Description
remove	Function	When called, removes the listener from the event.

Example

view.on("click", function(event){
  // event is the event handle returned after the event fires.
  console.log(event.mapPoint);
});

remove

inherited Method

Signature: remove (layer: Layer): Layer | null | undefined

Inherited from: LayersMixin

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

Parameters

Parameter	Type	Description	Required
layer	`Layer`	Layer to remove from the layers collection.

Returns: Layer | null | undefined
Returns the layer removed from the layers collection.

removeAll

inherited Method

Signature: removeAll (): Layer[]

Inherited from: LayersMixin

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

Returns: Layer[]
Returns the layers removed from the layers collection.

removeMany

inherited Method

Signature: removeMany (layers: Layer[]): Layer[]

Inherited from: LayersMixin

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

Parameters

Parameter	Type	Description	Required
layers	`Layer[]`	Array of layers to remove from the layers collection.

Returns: Layer[]
Returns the layers removed from the layers collection.

reorder

inherited Method

Signature: reorder (layer: Layer, index?: number): Layer | null | undefined

Inherited from: LayersMixin

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

Parameters

Parameter	Type	Description	Required
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: Layer | null | undefined
Returns the layer that was moved.

save

inherited Method

Signature: save (options?: SaveOptions): Promise<PortalItem>

Inherited from: WebDocument2D

Saves the WebMap or WebLinkChart to its associated portal item. The portal item must already exist and be valid. This is a convenience method that will use PortalItem.update() to store the WebMap / WebLinkChart in the item.

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

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

The WebMap / WebLinkChart will be automatically loaded if it is not already before saving.

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

Known Limitations

Feature collections and multi-layer feature collections cannot currently be saved.

See also

updateFrom()

Parameters

Parameter	Type	Description	Required
options	`SaveOptions`	Additional options.

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

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

inherited Method

Signature: saveAs (portalItem: PortalItemProperties, options?: SaveAsOptions): Promise<PortalItem>

Inherited from: WebDocument2D

Saves the WebMap or WebLinkChart 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 / WebLinkChart. This is a convenience method that will create a new PortalItem and use PortalUser.addItem() to store the WebMap / WebLinkChart in a Portal.

Use updateFrom() to store the current view properties in the WebMap / WebLinkChart before saving it.

Note that this always saves the WebMap / WebLinkChart 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 / WebLinkChart will be automatically loaded if it is not already before saving.

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

Known Limitations

Feature collections and multi-layer feature collections cannot currently be saved.

See also

updateFrom()

Parameters

Parameter	Type	Description	Required
portalItem	`PortalItemProperties`	The new portal item to which the `WebMap` / `WebLinkChart` 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` / `WebLinkChart` portal item (if any).
options	`SaveAsOptions`	Additional save options.

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

Example

const webmap = new WebMap();
// Use updateFrom to store the current view properties
// in the webmap before saving it
webmap.updateFrom(view);
webmap.saveAs({
  // autocasts as new PortalItem()
  title: "New WebMap"
});

updateFrom

inherited Method

Signature: updateFrom (view: MapView, options?: UpdateFromOptions): Promise<void>

Inherited from: WebDocument2D

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:

InitialViewProperties.spatialReference

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

The Viewpoint.rotation, Viewpoint.scale, and Viewpoint.targetGeometry properties of InitialViewProperties.viewpoint
The thumbnail of the PortalItem

See also

Parameters

Parameter	Type	Description	Required
view	`MapView`	The view to update from.
options	`UpdateFromOptions`	Update options.

Returns: Promise<void>
Resolves when the update has completed.

when

inherited Method

Signature: when <TResult1 = this, TResult2 = never>(onFulfilled?: OnFulfilledCallback<this, TResult1> | null | undefined, onRejected?: OnRejectedCallback<TResult2> | null | undefined): Promise<TResult1 | TResult2>

Type parameters: <TResult1 = this, TResult2 = never>

Inherited from: EsriPromiseMixin

Since: ArcGIS Maps SDK for JavaScript 4.6

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

Parameters

Parameter	Type	Description	Required
onFulfilled	`OnFulfilledCallback<this, TResult1> \| null \| undefined`	The function to call when the promise resolves.
onRejected	`OnRejectedCallback \| null \| undefined`	The function to execute when the promise fails.

Returns: Promise<TResult1 | TResult2>
Returns a new promise for the result of onFulfilled 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
});