When building applications with the ArcGIS Maps SDK for JavaScript, there are multiple options, each with their own advantages depending on your specific goals and requirements. For a small project, the ArcGIS Content Delivery Network (CDN) might be the best approach to get started. For larger or complex applications built with a modern JavaScript framework or build tool, installing component packages from npm is best practice.
CDN
Using the ArcGIS CDN is a straightforward way to include the SDK's capabilities in your application without needing to install any packages locally. This is ideal for simple applications, quick prototyping, or when you want to leverage optimized cloud caching for faster module downloads.
npm
If you're building a more complex application, especially within modern build tools or JavaScript frameworks like React, Vue, or Angular, then it is recommended to install the JavaScript Maps SDK via npm. This allows you to manage any packages as a dependency in your project, take advantage of npm's package management capabilities, and integrate more seamlessly with modern build tools like Webpack and Vite.
Each component package from the JavaScript Maps SDK is designed to be framework-agnostic, meaning they are compatible with most JavaScript frameworks or no framework at all.
CSS
Depending on how you load the SDK into your application, you may need to include additional CSS links. If you are using components from the CDN, the CSS links are included automatically. If you are using npm, you will need to import the CSS files into your application manually.
Components
| Components stylesheet | Core API stylesheet | Calcite stylesheet | |
|---|---|---|---|
| npm | Manual | Manual | Manual |
| CDN | Automatic | Manual | Automatic |
Core API
| Core API stylesheet | Calcite stylesheet | |
|---|---|---|
| npm | Manual | Automatic |
| CDN | Manual | Automatic |
Access tokens
Access tokens are required to access ArcGIS services, such as basemaps, geocoding, and routing. Visit your portal and create an access token with custom privileges and referrers for your specific needs. Include your access token in the tutorials and samples when required in the instructions. You can use a global API key, as well as more fine-grained API keys on specific classes.