ArcGIS API for JavaScript installation and configuration

ArcGIS API for JavaScript is a JS library for visualization of geographic information or geographic data or geographic analysis and processing, which can be used in browser environment and Node.js environment 1. There are several ways to use the ArcGIS JS API in your project.

AMD and ESM

Prerequisites for selecting an API installation mode are briefly described.

• AMD stands for “Asynchronous Module Definition”. It loads modules asynchronously without affecting the execution of subsequent statements. All statements that depend on this module are defined in a callback function that will not run until the load is complete.

  require([module], callback);
  Copy the code

  The first argument, [module], is an array whose members are the modules to be loaded. The second argument, callback, is the callback function after the successful loading.

• ES Module treats a file as a Module, and each Module has its own independent scope. The core point is the import and export of the Module.

  • Export can only be followed by function, class, var, let, const, default, {}. The function of export is to add attributes to the object of the current module for later import into other modules. The export default method is most commonly used.

  • The import command is used to import data provided by other modules in the following format:

    import <module> from <url>
    Copy the code

Four ways to install an API

	CDN (AMD)	ESM local build	AMD local build
No installation, configuration, or local build is required	X
Fast download through CDN cache	X
Quick installation is available via NPM		X
Seamlessly integrates with most modern frameworks and build tools		X
Use 4.17 or earlier apis and frameworks or build tools			X
Use Dojo 1 or RequireJS			X

AMD modules provided through THE CDN

The most common way to access an API is to use a managed version.

<link rel="stylesheet" href="https://js.arcgis.com/4.20/esri/themes/light/main.css">
<script src="https://js.arcgis.com/4.20/"></script>
Copy the code

ES module provided through NPM¹

The API can also be used as an ES module through NPM. You can install the API locally for use with JavaScript frameworks like React and Vue and packagers like WebPack.

1. The installation

   yarn add @arcgis/core
   Copy the code

2. The import

   import Map from "@arcgis/core/Map";
   Copy the code

3. To configure the CSS

   • Copy /node_modules/@arcgis/core/assets to /public/assets

   • Set the ArcGIS resource path to the local path

     import esriConfig from "@arcgis/core/config.js";
     esriConfig.assetsPath = "./assets";
     Copy the code

   • ArcGIS native style files are introduced in global CSS files

     @import "~@arcgis/core/assets/esri/themes/light/main.css";
     Copy the code

Locally hosted AMD modules

Modify the init.js file and dojo.js file in the API, and deploy the modified API on its own server for the environment where the network is missing or poor.

1. download

   ArcGIS JS API download website

   

   The download is divided into API and SDK. The API contains library files required for development, and the SDK is an offline document and example 2.

2. Unzip the package and copy \arcgis_js_v420_api\arcgis_js_api\javascript\4.20\ and all the following contents into the managed server directory. For example C: \ Inetpub \ javascript below \ \ API \ \ 4.20

3. Open C: Inetpub\wwwroot\javascript\ API \4.20\init.js search for [HOSTNAME_AND_PATH_TO_JSAPI], www.example.com/javascript/api/4.20/init.js and replace with the following string.

   The SDK deployment is the same as above.

ES module provided through CDN¹

Note: This approach is currently recommended only for the development and prototyping phases.

<link rel="stylesheet" href="https://js.arcgis.com/4.20/@arcgis/core/assets/esri/themes/light/main.css">
<script type="module">
  import Map from "https://js.arcgis.com/4.20/@arcgis/core/Map.js";

  // Use the Map class
</script>
Copy the code

Server Configuration

Web servers hosting the ArcGIS API for JavaScript will need to register the following MIME/ Types (mainly IIS).

extension	MIME/type	Description
.ttf	application/octet-stream	True Type Fonts
.wasm	application/wasm	WebAssembly
.woff	application/font-woff	Web Open Font Format
.woff2	application/font-woff2	2.0 WOFF File Format
.wsv	application/octet-stream	Supports SceneView‘s stars visualization