Install

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 GeoEnrichment service.
@esri/arcgis-rest-portal: To access and manage users, group and content an ArcGIS Portal.

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

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

Node JS

After installation, require or import the specific methods or functions from the packages you are using.

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