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 packge for specific installation directions.

Install with NPM:

Use dark colors for code blocks
      
1
2
3
4
5
6
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
      
1
2
3
4
5
6
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.

CommonJSESM
Use dark colors for code blocks
         
1
2
3
4
5
6
7
8
9
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_API_KEY")
})

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 blocks
         
1
2
3
4
5
6
7
8
9
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_API_KEY")
})

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 Skypack which is optimized for serving ES modules.

ESMGlobal
Use dark colors for code blocks
                    
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html>
  <head>
    <script type="module">
      import { ApiKeyManager } from "https://cdn.skypack.dev/@esri/arcgis-rest-request@4.0.0";
      import { geocode } from "https://cdn.skypack.dev/@esri/arcgis-rest-geocoding@4.0.0";

      geocode({
        address: "1600 Pennsylvania Ave",
        postal: 20500,
        countryCode: "USA",
        authentication: ApiKeyManager.fromKey("YOUR_API_KEY")
      }).then((response)=>{
        console.log(response);
        document.body.innerHTML = `<pre>${JSON.stringify(response, null, 2)}</pre>`
      })
    </script>
  </head>
  <body></body>
</html>

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.

Use dark colors for code blocks
                                                
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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<!doctype html>
<html>
<head>
  <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.0.0-beta.3/dist/esm/index.js",
      "@esri/arcgis-rest-request": "https://ga.jspm.io/npm:@esri/arcgis-rest-request@4.0.0-beta.7/dist/esm/index.js"
    },
    "scopes": {
      "https://ga.jspm.io/": {
        "@esri/arcgis-rest-fetch": "https://ga.jspm.io/npm:@esri/arcgis-rest-fetch@4.0.0-beta.1/browser-ponyfill.mjs",
        "@esri/arcgis-rest-form-data": "https://ga.jspm.io/npm:@esri/arcgis-rest-form-data@4.0.0-beta.1/browser-ponyfill.mjs",
        "@esri/arcgis-rest-request": "https://ga.jspm.io/npm:@esri/arcgis-rest-request@4.0.0-beta.3/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";
        address: "1600 Pennsylvania Ave",
        postal: 20500,
        countryCode: "USA",
        authentication: ApiKeyManager.fromKey("YOUR_API_KEY")
      }).then((response)=>{
        console.log(response);
        document.body.innerHTML = `<pre>${JSON.stringify(response, null, 2)}</pre>`
  </script>
</body>
</html>

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