Introduction - components (beta)

The component library (beta) is a collection of pre-built UI components for building web apps with minimal code. The component library is available as a feature of the JavaScript Maps SDK, our foundational SDK for building geospatial mapping software on the web.

Built as standards-based web components, they extend the JavaScript Maps SDK core API into reusable custom HTML elements, such as <arcgis-map />. The components are available on CDN and npm. They are also designed to be JavaScript framework agnostic, so you can use them in applications built with vanilla JavaScript or with most frameworks and module bundlers.

With the current beta release, there are three component packages: map, coding and common components.

Map components

The @arcgis/map-components package contains the map, scene, and all the JavaScript Maps SDK widgets wrapped as web components. These components are an alternative option for quickly building mapping apps when integrating with frameworks. Here is a code snippet example:

Use dark colors for code blocksCopy
<arcgis-map item-id="05e015c5f0314db9a487a9b46cb37eca" />
Map component sample

Coding components

The @arcgis/coding-components package will eventually contain a wide range of tools, resources, code editors and utilities that support coding. Currently, only the Arcade editor component is supported, which allows the end user to create Arcade expressions that drive aspects of your map or app within your solution. They will have the same experience editing their Arcade expressions as they do in Map Viewer and the Arcade playground.

Common components

The @arcgis/common-components package can be used alongside the other SDK component packages to provide additional functionality. For example, the arcgis-api-key and arcgis-identity components may be used alongside packages that can leverage an API key or identity, such as @arcgis/map-components.


To learn more about the ArcGIS Maps SDK components, check out the following resources:

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