Get started with Angular and ArcGIS Maps SDK for JavaScript

The @arcgis/map-components npm package can be used in an Angular application. The package includes industry-standard web components built on top of @arcgis/core that handle much of the boilerplate functionality, while ensuring the underlying API remains accessible.

For more information on working with components, assets and configuring CSS, see the Get started with npm guide topic.

Steps

Install map components

Install the @arcgis/map-components npm package as well as the @arcgis/core modules npm package. @arcgis/core is the minified, unbuilt version of the SDK's core API ES modules.

1
npm install @arcgis/map-components && @arcgis/core

Configure Angular schema

Configure Angular's CUSTOM_ELEMENTS_SCHEMA. This is a standard pattern for allowing non-Angular elements to be used inside Angular components:

1
2
3
4
5
6
7
8
9
10
import { Component, CUSTOM_ELEMENTS_SCHEMA, OnInit } from "@angular/core";

@Component({
  selector: "app-root",
  standalone: true,
  imports: [RouterOutlet],
  templateUrl: "./app.component.html",
  styleUrl: "./app.component.css",
  schemas: [CUSTOM_ELEMENTS_SCHEMA], // Set the schema here
})

Configure CSS

Configure the map component's styles in the Angular component's CSS file. The CSS selectors and settings may vary depending on how your project's unique requirements:

1
2
3
4
5
6
@import url('https://js.arcgis.com/4.31/@arcgis/core/assets/esri/themes/dark/main.css');

arcgis-map {
  display: block;
  height: 100vh;
}

Add the following to the global stylesheet in your Angular project:

1
2
3
4
html,
body {
  margin: 0;
}

Configure Calcite's asset path

In the Angular project's root component, import the module for setting Calcite components asset path, and initialize the asset path in the component's constructor:

1
2
3
4
5
6
7
8
9
10
11
import { setAssetPath as setCalciteComponentsAssetPath } from '@esri/calcite-components/dist/components';

. . .

export class AppComponent {

  constructor() {
    setCalciteComponentsAssetPath("https://js.arcgis.com/calcite-components/2.13.2/assets");
  }

}

Add a map

Add the arcgis-map component to the app.component.html file and assign it an optional item-id if using a WebMap from ArcGIS Online or ArcGIS Enterprise portal. See the tutorial for step-by-step instructions.

1
<arcgis-map item-id="05e015c5f0314db9a487a9b46cb37eca"></arcgis-map>

Also, add the respective import to the root component:

1
import "@arcgis/map-components/dist/components/arcgis-map";

Add additional functionality

Once that's completed, you can:

• Set properties, e.g. the basemap, center and zoom
• Use the arcgisViewReadyChange event to watch for when the view is ready or if the view's map or scene have been replaced
• Add custom JavaScript logic using the core API.

Here is an example of adding the arcgis-zoom component to the map, and then implementing the functionality to listen for change events.

Add the arcgis-zoom component inside the arcgis-map component, and assign its position to the top-left corner of the map. Then bind arcgis-map to the arcgisViewChange event:

1
2
3
<arcgis-map item-id="05e015c5f0314db9a487a9b46cb37eca" (arcgisViewChange)="arcgisViewChange($event)">
   <arcgis-zoom position="top-left"></arcgis-zoom>
</arcgis-map>

Last, add the import for arcgis-zoom into the root component, and set an event listener inside the app component's class:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
import "@arcgis/map-components/dist/components/arcgis-map";
import "@arcgis/map-components/dist/components/arcgis-zoom";

. . .

export class AppComponent {

  arcgisViewChange(event: CustomEvent) {
    const { center, zoom } = event.target;
    console.log("Center (lon/lat): ", `${center.longitude}, ${center.latitude}`);
    console.log("Zoom: ", zoom);
  }

}

See the tutorial for step-by-step instructions.

Download project

You can download the Angular sample projects from the jsapi-resources GitHub repository:

• Map components sample
• @arcgis/core sample