require(["esri/WebMap"], (WebMap) => { /* code goes here */ });
import WebMap from "@arcgis/core/WebMap.js";
esri/WebMap
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
- See also
Constructors
-
Parameterproperties Objectoptional
See the properties for a list of all the properties that may be passed into the constructor.
Example// Typical usage const map = new WebMap({ portalItem: { id: "e691172598f04ea8881cd2a4adaa45ba" } });
Property Overview
Name | Type | Summary | Class |
---|---|---|---|
A flattened collection of all layers in the map. | Map | ||
A flattened collection of tables anywhere in the map's hierarchy. | Map | ||
The applicationProperties contains the viewing properties of the WebMap. | WebMap | ||
The name of the application that authored the WebMap. | WebMap | ||
The version of the application that authored the WebMap. | WebMap | ||
Specifies a basemap for the map. | Map | ||
An array of saved geographic extents that allow end users to quickly navigate to a particular area of interest. | WebMap | ||
The name of the class. | Accessor | ||
A collection of editable layers. | Map | ||
When a web map is configured as floor-aware, it has a floorInfo property defined. | WebMap | ||
Information relating to a list of Geotriggers. | WebMap | ||
Specifies the surface properties for the map. | Map | ||
The initial view of the WebMap. | WebMap | ||
A collection of operational layers. | Map | ||
Indicates whether the instance has loaded. | WebMap | ||
The Error object returned if an error occurred while loading. | WebMap | ||
Represents the status of a load operation. | WebMap | ||
The portal item from which the WebMap is loaded. | WebMap | ||
Provides multiple slides. | WebMap | ||
The version of the source document from which the WebMap was read. | WebMap | ||
A collection of layer instances that are tables saved in a Map and/or a WebMap. | Map | ||
The URL to the thumbnail used for the webmap. | WebMap | ||
The utilityNetworks object contains a collection of UtilityNetworks saved on the web map. | WebMap | ||
The widgets object contains widgets that are exposed to the user. | WebMap |
Property Details
-
allLayers
InheritedPropertyallLayers 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
InheritedPropertyallTables Collection<Layer>readonly
Inherited from MapSince: ArcGIS Maps SDK for JavaScript 4.17Map 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
applicationProperties ApplicationProperties
Since: ArcGIS Maps SDK for JavaScript 4.14WebMap since 4.0, applicationProperties added at 4.14. -
The applicationProperties contains the viewing properties of the WebMap.
-
authoringApp
authoringApp String
Since: ArcGIS Maps SDK for JavaScript 4.14WebMap since 4.0, authoringApp added at 4.14. -
The name of the application that authored the WebMap.
-
authoringAppVersion
authoringAppVersion String
Since: ArcGIS Maps SDK for JavaScript 4.14WebMap since 4.0, authoringAppVersion added at 4.14. -
The version of the application that authored the WebMap.
-
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 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) Examples// 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: { 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
bookmarks Collection<Bookmark>autocast
-
An array of saved geographic extents that allow end users to quickly navigate to a particular area of interest.
-
editableLayers
InheritedPropertyeditableLayers Collection<(FeatureLayer|SceneLayer|SubtypeGroupLayer|GeoJSONLayer|OrientedImageryLayer)>readonly
Inherited from MapSince: ArcGIS Maps SDK for JavaScript 4.20Map 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
floorInfo MapFloorInfoautocast
Since: ArcGIS Maps SDK for JavaScript 4.19WebMap since 4.0, floorInfo added at 4.19. -
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 levelLayer and facilityLayer properties at a minimum. The siteLayer property is optional.
-
geotriggersInfo
geotriggersInfo GeotriggersInfoautocast
Since: ArcGIS Maps SDK for JavaScript 4.24WebMap since 4.0, geotriggersInfo added at 4.24. -
Information relating to a list of Geotriggers.
-
Inherited from Map
-
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
orundefined
, 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
initialViewProperties InitialViewPropertiesautocast
-
The initial view of the WebMap. This object contains properties such as viewpoint, spatialReference, that will be applied to the view when the WebMap loads.
-
layers
InheritedPropertylayers Collection<Layer>autocast
Inherited from Map -
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);
-
loadError
loadError Errorreadonly
-
The Error object returned if an error occurred while loading.
- Default Value:null
-
loadStatus
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
portalItem PortalItemautocast
-
The portal item from which the WebMap is loaded.
-
presentation
presentation Object
-
Provides multiple slides. Each slide has a different "title", "extent", "basemap", "layers" etc.
-
sourceVersion
sourceVersion Objectreadonly
Since: ArcGIS Maps SDK for JavaScript 4.1WebMap since 4.0, sourceVersion added at 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
InheritedPropertytables Collection<Layer>autocast
Inherited from Map -
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
thumbnailUrl String
Since: ArcGIS Maps SDK for JavaScript 4.14WebMap since 4.0, thumbnailUrl added at 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.Examplewebmap.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
utilityNetworks Collection<UtilityNetwork>
-
The utilityNetworks object contains a collection of UtilityNetworks saved on the web map.
-
widgets
widgets Widgets
-
The widgets object contains widgets that are exposed to the user.
Method Overview
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 webmap, and any associated resources, including its layers, basemap, ground, tables, and portalItem. | WebMap | ||
Returns a layer based on the given layer ID. | Map | ||
Returns a table based on the given table ID. | Map | ||
* | Creates a new instance of this class and initializes it with values from a JSON object generated from an ArcGIS product. | WebMap | |
Returns true if a named group of handles exist. | Accessor | ||
| WebMap | ||
| WebMap | ||
| WebMap | ||
Triggers the loading of the WebMap instance. | WebMap | ||
Loads all the externally loadable resources associated with the webmap. | WebMap | ||
Removes the specified layer from the layers collection. | Map | ||
Removes all layers. | Map | ||
Removes a group of handles owned by the object. | Accessor | ||
Removes the specified layers. | Map | ||
Changes the layer order. | Map | ||
Saves the webmap to its associated portal item. | WebMap | ||
Saves the webmap to a new portal item. | WebMap | ||
Update properties of the WebMap related to the view. | WebMap | ||
| WebMap |
Method Details
-
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.
ParametersLayer or a promise that resolves to a layer to add to the layers collection.
index NumberoptionalA 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.
- See also
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);
-
Inherited from Accessor
Since: ArcGIS Maps SDK for JavaScript 4.25Accessor 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();
ParametershandleOrHandles WatchHandle|WatchHandle[]Handles marked for removal once the object is destroyed.
groupKey *optionalKey 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.
-
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.
ParametersLayer(s) to be added to the layers collection.
index NumberoptionalA 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.
- See also
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);
-
Since: ArcGIS Maps SDK for JavaScript 4.17WebMap since 4.0, destroy added at 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();
-
findTableById
InheritedMethodfindTableById(tableId){Layer}
Inherited from MapSince: ArcGIS Maps SDK for JavaScript 4.18Map since 4.0, findTableById added at 4.18. -
Returns a table based on the given table ID.
ParametertableId StringThe ID assigned to the table.
ReturnsType Description Layer Returns the requested table object.
-
Since: ArcGIS Maps SDK for JavaScript 4.12WebMap since 4.0, fromJSON added at 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.Parameterjson ObjectA JSON representation of the instance in the ArcGIS format. See the web map specification for more detailed information on serializing web map to JSON.
ReturnsType 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("https://domain/url/to/webmap.json").then(function(json) { const webmap = WebMap.fromJSON(json); const view = new MapView({ map: webmap, container: "viewDiv" }); }); });
-
hasHandles
InheritedMethodhasHandles(groupKey){Boolean}
Inherited from AccessorSince: ArcGIS Maps SDK for JavaScript 4.25Accessor since 4.0, hasHandles added at 4.25. -
Returns true if a named group of handles exist.
ParametergroupKey *optionalA group key.
ReturnsType 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
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.ReturnsType Description Boolean Indicates whether creating an instance of the class has been fulfilled (either resolved or rejected).
-
load
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 callload()
explicitly to interact with its resources.Returns- See also
Examplerequire([ "esri/WebMap" ], function( WebMap ) { 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); }); });
-
Since: ArcGIS Maps SDK for JavaScript 4.9WebMap since 4.0, loadAll added at 4.9. -
Loads all the externally loadable resources associated with the webmap. For the webmap this will load the ground, basemap and layers.
Returns- See also
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
InheritedMethodremove(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.
Parameterlayer LayerLayer to remove from the layers collection.
ReturnsType Description Layer Returns the layer removed from the layers collection.
-
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
-
Inherited from Accessor
Since: ArcGIS Maps SDK for JavaScript 4.25Accessor since 4.0, removeHandles added at 4.25. -
Removes a group of handles owned by the object.
ParametergroupKey *optionalA group key or an array or collection of group keys to remove.
Exampleobj.removeHandles(); // removes handles from default group obj.removeHandles("handle-group"); obj.removeHandles("other-handle-group");
-
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.
Returns
-
reorder
InheritedMethodreorder(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.ParametersReturnsType Description Layer Returns the layer that was moved.
-
save
save(options){Promise<PortalItem>}
Since: ArcGIS Maps SDK for JavaScript 4.14WebMap since 4.0, save added at 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.
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.
Parametersoptions ObjectoptionalAdditional options.
SpecificationignoreUnsupported BooleanoptionalWhen
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.ReturnsType Description Promise<PortalItem> A promise that resolves with the PortalItem instance when the item has successfully been saved, or rejected otherwise. - See also
Examplewebmap.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
saveAs(portalItem, options){Promise<PortalItem>}
Since: ArcGIS Maps SDK for JavaScript 4.14WebMap since 4.0, saveAs added at 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.
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.
ParametersSpecificationAutocasts from ObjectThe 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 ObjectoptionalAdditional save options.
Specificationfolder PortalFolderoptionalThe folder in which to save the item.
ignoreUnsupported BooleanoptionalAllow 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.
ReturnsType Description Promise<PortalItem> A promise that resolves with the PortalItem instance when the item has successfully been saved, or rejected otherwise. - See also
Exampleconst 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
updateFrom(view, options){Promise}
Since: ArcGIS Maps SDK for JavaScript 4.14WebMap since 4.0, updateFrom added at 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:
Depending on the provided options, the following properties are also updated:
- The rotation, scale, and targetGeometry properties of InitialViewProperties.viewpoint
- The
thumbnail
of the PortalItem
ParametersSpecificationview MapViewThe view to update from.
options ObjectoptionalUpdate options.
SpecificationbackgroundExcluded BooleanoptionalWhen
true
, the view's background will not be updated for the webmap. The default isfalse
meaning the background will be updated for the webmap if there is a background.viewpointExcluded BooleanoptionalWhen
true
, the initial viewpoint of the view will not be updated for the webmap. Defaults tofalse
, meaning the viewpoint will be updated for the webmap. Must setscalePreserved
totrue
if the view's scale should be updated for the webmap.scalePreserved BooleanoptionalWhen
true
, the view's scale will be updated for the webmap. Defaults tofalse
meaning view's scale will not be updated for the webmap. It is ignored whenviewpointExcluded
istrue
.thumbnailExcluded BooleanoptionalWhen
true
, the thumbnail will not be updated for the webmap. Defaults tofalse
meaning the thumbnail will be updated for the webmap.thumbnailSize ObjectoptionalThe 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.
widgetsExcluded BooleanoptionalWhen
true
, the webmap's widgets property will not be updated. Whenfalse
, the definition of the first TimeSlider assigned to the View will be used to update the WebMap.widgets property. The default value isfalse
.ReturnsType Description Promise Resolves when the update has completed.
-
when
when(callback, errback){Promise}
Since: ArcGIS Maps SDK for JavaScript 4.6WebMap 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: acallback
function and anerrback
function. Thecallback
executes when the instance of the class loads. Theerrback
executes if the instance of the class fails to load.ParametersReturnsType 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 });
Type Definitions
-
FloorFilter
FloorFilter Object
-
Floor filtering is controlled by a configurable floor filter. Those configurations are saved to the web map as a Floor Filter widget.
- Properties
-
enabled Boolean
Indicates whether the FloorFilter is active and filtering the displayed content according to the FloorFilter selection.
longNames BooleanIndicates whether the levels list is showing the long names from longNameField.
minimized BooleanIndicates whether the floor filter has been minimized to show only the levels list.
pinnedLevels BooleanIndicates whether the levels portion of the floor filter has been pinned to show the levels list.
site StringContains the site ID for the initially selected site in the floor filter.
facility StringContains the facility ID for the initially selected facility in the floor filter.
level StringContains the level ID for the initially selected floor, which is used when filtering layers by their configured floor-aware properties.
-
Widgets
Widgets Object
-
The widgets object contains widgets that are exposed to the user.
- Properties
-
timeSlider TimeSlider
Time animation is controlled by a configurable time slider. Those configurations are saved to the web map as a TimeSlider widget.
floorFilter FloorFilterFloor filtering is controlled by a configurable floor filter. Those configurations are saved to the web map as a FloorFilter widget.