Get started with Angular and ArcGIS Maps SDK for JavaScript

For Angular applications, use the @arcgis/map-components package. The package provides industry-standard web components built on @arcgis/core, reducing boilerplate while keeping the underlying API fully 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 package along with its dependencies:

Use dark colors for code blocksCopy
1
2

    npm install @arcgis/map-components

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:

app.component.ts
Use dark colors for code blocksCopy
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:

app.component.css
Use dark colors for code blocksCopy
1
2
3
4
5
6
7
8
@import url("https://js.arcgis.com/4.32/@arcgis/core/assets/esri/themes/dark/main.css");
@import url("https://js.arcgis.com/calcite-components/3.0.3/calcite.css");
@import url("https://js.arcgis.com/map-components/4.32/arcgis-map-components.css");

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

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

styles.css
Use dark colors for code blocksCopy
1
2
3
4
html,
body {
  margin: 0;
}

Add a map

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

app.component.html
Use dark colors for code blocksCopy
1
<arcgis-map item-id="05e015c5f0314db9a487a9b46cb37eca"></arcgis-map>

Also, add the respective import to the root component:

app.components.ts
Use dark colors for code blocksCopy
1
import "@arcgis/map-components/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 arcgisViewReadyChange event:

app.component.html
Use dark colors for code blocksCopy
1
2
3
<arcgis-map item-id="05e015c5f0314db9a487a9b46cb37eca" (arcgisViewReadyChange)="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:

app.component.ts
Use dark colors for code blocksCopy
1
2
3
4
5
6
7
8
9
10
11
12
13
14
import "@arcgis/map-components/components/arcgis-map";
import "@arcgis/map-components/components/arcgis-zoom";

. . .

export class AppComponent {

  arcgisViewReadyChange(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:

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