Save a web map

This sample demonstrates how to save a WebMap to a Portal for ArcGIS item by either creating a new item or overwriting an existing item that has been loaded from a Portal for ArcGIS item.

Saving a web map is easy. All that's required is a WebMap and a valid Portal to save the map to.

Saving to a new item

Create a new empty WebMap instance and a Portal instance where the WebMap should be saved to. Loading the Portal will trigger user authentication, and if successful the item will be saved to the given Portal.

Use dark colors for code blocksCopy
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
/************************************************************
 * Creates a new empty WebMap instance. An empty WebMap
 * must have at least the basemap property defined to be
 * functional.
 ************************************************************/
const map = new WebMap({
  basemap: "topo-vector"
});

/************************************************************
 * Create a new Portal instance and request immediate user
 * authentication.
 ************************************************************/
const portal = new Portal({
  authMode: "immediate"
});

/************************************************************
 * Loading the portal will trigger authentication and once the
 * returned Promise is resolved, the WebMap will be saved as
 * a new PortalItem using the given title.
 ************************************************************/
portal.load().then(() => {
  map.updateFrom(view).then(() => {
    map.saveAs({
      title: "Empty WebMap",
      portal: portal
    });
  });
});

Overwriting an existing item

Create a new WebMap instance and set the portal item ID inside the portalItem property of the WebMap. Loading the Portal will trigger user authentication, and if successful the item will be saved to the given Portal.

Use dark colors for code blocksCopy
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
/************************************************************
 * Creates a new WebMap instance. A WebMap can reference
 * a PortalItem ID that represents a WebMap saved to
 * arcgis.com or an on-premise portal.
 ************************************************************/
const webmap = new WebMap({
  portalItem: {
    id: "f2e9b762544945f390ca4ac3671cfa72"
  }
});

/************************************************************
 * Create a new Portal instance and request immediate user
 * authentication.
 ************************************************************/
const portal = new Portal({
  authMode: "immediate"
});

/************************************************************
 * Loading of either the webmap or the portal will trigger
 * authentication and once both Promises are resolved, the
 * Webmap will be saved thereby overwriting the previously
 * loaded PortalItem with any changes that have occurred.
 ************************************************************/
webmap.load().then(() => {
  portal.load().then(() => {
    webmap.portalItem.title = "Modified webmap";
    webmap.portalItem.portal = portal;
    webmap.save();
  });
});

To use load or save items from an on-premise portal, set the URL of the portal in esriConfig.portalUrl.

Please refer to the ArcGIS Organization portals for information on how the ArcGIS Maps SDK for JavaScript makes use of working with portal items.

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