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.

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.

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

The developer dashboard has moved

You can no longer sign into this site. Go to your ArcGIS portal or the ArcGIS Location Platform dashboard to perform management tasks.

Your ArcGIS portal

Create, manage, and access API keys and OAuth 2.0 developer credentials, hosted layers, and data services.

Your ArcGIS Location Platform dashboard

Manage billing, monitor service usage, and access additional resources.

Learn more about these changes in the What's new in Esri Developers June 2024 blog post.

Close