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:
npm install @arcgis/map-components
Configure Angular schema
Configure Angular's CUSTOM
. This is a standard pattern for allowing non-Angular elements to be used inside Angular components:
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:
@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:
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.
<arcgis-map item-id="05e015c5f0314db9a487a9b46cb37eca"></arcgis-map>
Also, add the respective import to the root component:
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
arcgis
event to watch for when the view is ready or if the view's map or scene have been replacedView Ready Change - 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 arcgis
event:
<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:
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: