Install and set up | ArcGIS REST JS

ArcGIS REST JS is compatible with a wide array of use cases and tools and is distributed as native ES modules, CommonJS modules and UMD modules.

Available packages

ArcGIS REST JS divides functionality into separate packages. All packages have a peer dependency on @esri/arcgis-rest-request. You can refer to each package for specific installation directions.

@esri/arcgis-rest-request: Core package containing request/response processing, authentication helpers and error handling.
@esri/arcgis-rest-feature-service: Provides functions to query and edit features in hosted feature layers.
@esri/arcgis-rest-geocoding: A geocoding wrapper for ArcGIS REST JS.
@esri/arcgis-rest-routing: A routing and directions wrapper for ArcGIS REST JS.
@esri/arcgis-rest-demographics: To access the ArcGIS GeoEnrichment service.
@esri/arcgis-rest-elevation: To access the ArcGIS Elevation service.
@esri/arcgis-rest-portal: To access and manage users, group and content in an ArcGIS Portal.
@esri/arcgis-rest-developer-credentials: To access and manage API keys and OAuth 2.0 application credentials.
@esri/arcgis-rest-basemap-sessions: Helpers for starting and managing basemap sessions in ArcGIS REST JS.

Install with NPM:

Use dark colors for code blocks
npm install @esri/arcgis-rest-request npm install @esri/arcgis-rest-feature-service npm install @esri/arcgis-rest-geocoding npm install @esri/arcgis-rest-routing npm install @esri/arcgis-rest-demographics npm install @esri/arcgis-rest-elevation npm install @esri/arcgis-rest-portal npm install @esri/arcgis-rest-developer-credentials npm install @esri/arcgis-rest-basemap-sessions

Install with Yarn:

Use dark colors for code blocks
yarn install @esri/arcgis-rest-request yarn install @esri/arcgis-rest-feature-service yarn install @esri/arcgis-rest-geocoding yarn install @esri/arcgis-rest-routing yarn install @esri/arcgis-rest-demographics yarn install @esri/arcgis-rest-elevation yarn install @esri/arcgis-rest-portal yarn install @esri/arcgis-rest-developer-credentials yarn install @esri/arcgis-rest-basemap-sessions

Node JS

After installation, require or import the specific methods or functions from the packages you are using. To view supported versions of Node, go to System requirements.

CommonJS

ESM

Use dark colors for code blocksCopy
const { ApiKeyManager } = require("@esri/arcgis-rest-request"); const { geocode } = require("@esri/arcgis-rest-geocoding");  geocode({  address: "1600 Pennsylvania Ave",  postal: 20500,  countryCode: "USA",  authentication: ApiKeyManager.fromkey("YOUR_ACCESS_TOKEN") })

To use ArcGIS REST JS as ES Modules you must specify type: "module" in your package.json file or name your file with the .mjs extension. See the Node.js ES module documentation for more details.

Browsers

For browsers ArcGIS REST JS is distributed as both ES modules which should work "out-of-the-box" with most popular module bundlers and as UMD (universal module definition) files which should work as both a browser global or with older module bundlers.

ES modules

ArcGIS REST JS should work out-of-the-box with most popular bundlers that support ES modules. Demos showing integrations with specific tools in the ArcGIS REST JS Samples GitHub repo.

Use dark colors for code blocksCopy
import { ApiKey } from "@esri/arcgis-rest-request"; import { geocode } from "@esri/arcgis-rest-geocoding";  geocode({  address: "1600 Pennsylvania Ave",  postal: 20500,  countryCode: "USA",  authentication: ApiKey.fromkey("YOUR_ACCESS_TOKEN") })

CDN

Using ArcGIS REST JS from a CDN is a viable option for demos and smaller applications. ArcGIS REST JS uses 2 CDNs: unpkg, which can be used with a simple script tag, and esm.run, which is optimized for serving ES modules.

ESM

Global

Expand
Use dark colors for code blocksCopy
 <script type="module">  import { ApiKeyManager } from "https://esm.run/@esri/arcgis-rest-request@4";  import { geocode } from "https://esm.run/@esri/arcgis-rest-geocoding@4";   geocode({  address: "1600 Pennsylvania Ave",  postal: 20500,  countryCode: "USA",  authentication: ApiKeyManager.fromKey("YOUR_ACCESS_TOKEN")  }).then((response)=>{  console.log(response);  document.body.innerHTML = `<pre>${JSON.stringify(response, null, 2)}</pre>`  })  </script> 
Expand

Import map

While the import map specification is not yet supported by all browsers it can be used with polyfills from services such as JSPM which can generate the proper import map.

Expand
Use dark colors for code blocksCopy
 <meta charset="utf-8">  <title>Untitled</title>  <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body>  <!--  JSPM Generator Import Map  Edit URL: https://generator.jspm.io/#U2VhYGBiDs0rySzJSU1hcEgtLsrUTyxKTs8s1i1KLS7RTU/NT85PycxLdzDRM9Az0E1KLUnUM8aisCi1sBRIIyszBwAtOxDoXgA  -->  <script type="importmap">  {  "imports": {  "@esri/arcgis-rest-geocoding": "https://ga.jspm.io/npm:@esri/arcgis-rest-geocoding@4/dist/esm/index.js",  "@esri/arcgis-rest-request": "https://ga.jspm.io/npm:@esri/arcgis-rest-request@4/dist/esm/index.js"  },  "scopes": {  "https://ga.jspm.io/": {  "@esri/arcgis-rest-fetch": "https://ga.jspm.io/npm:@esri/arcgis-rest-fetch@4/browser-ponyfill.mjs",  "@esri/arcgis-rest-form-data": "https://ga.jspm.io/npm:@esri/arcgis-rest-form-data@4/browser-ponyfill.mjs",  "@esri/arcgis-rest-request": "https://ga.jspm.io/npm:@esri/arcgis-rest-request@4/dist/esm/index.js",  "@terraformer/arcgis": "https://ga.jspm.io/npm:@terraformer/arcgis@2.1.0/dist/t-arcgis.esm.js"  }  }  }  </script>   <!-- ES Module Shims: Import maps polyfill for modules browsers without import maps support (all except Chrome 89+) -->  <script async src="https://ga.jspm.io/npm:es-module-shims@1.5.1/dist/es-module-shims.js" crossorigin="anonymous"></script>   <script type="module">  import { ApiKeyManager } from "@esri/arcgis-rest-request";  import { geocode } from "@esri/arcgis-rest-geocoding"; 
Expand