Load a basic WebMap

Explore in the sandboxView live

This map consumes a WebMap that shows accidental deaths by state. The size of the markers indicate the total number of accidental deaths in each state, while the color indicates the rate. Bright red indicates more accidental deaths per 100,000 people, while dark green indicates fewer accidental deaths per 100,000 people. The WebMap is accessed from an ArcGIS Online or Portal for ArcGIS item into a custom web application.

All that is required is the item ID of the WebMap item from the portal.

Create a new WebMap instance and set the portal item ID inside the portalItem property of the WebMap. Since WebMap extends esri/Map, you then set the web map instance on the map property of the MapView.

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
/************************************************************
 * Creates a new WebMap instance. A WebMap must reference
 * a PortalItem ID that represents a WebMap saved to
 * arcgis.com or an on-premise portal.
 ************************************************************/

const webmap = new WebMap({
  portalItem: {
    id: "e691172598f04ea8881cd2a4adaa45ba"
  }
});

/************************************************************
 * Set the WebMap instance to the map property in a MapView.
 ************************************************************/
const view = new MapView({
  map: webmap,
  container: "viewDiv"
});

To reference an item 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.