Menu
I am looking at ArcGIS Javascript API 4.18.1. But it is confusing, how I should add it to a new Angular 11 project. Is there an example project somewhere that shows the basic folder structure and getting a map setup in Angular 11? I want to get it set up with just ES modules using NPM.
https://developers.arcgis.com/javascript/latest/es-modules/
I did this:
npm install @arcgis/core
Then I added the following to app.component.ts
import WebMap from '@arcgis/core/WebMap';
import MapView from '@arcgis/core/views/MapView';
I am new to this. And It seems like all the documentation talks about React.
Then in the getting started with Map it has you enter a key:
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
<title>ArcGIS API for JavaScript Tutorials: Display a map</title>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<link rel="stylesheet" href="https://js.arcgis.com/4.18/esri/themes/light/main.css">
<script src="https://js.arcgis.com/4.18/"></script>
<script>
require(["esri/config","esri/Map", "esri/views/MapView"], function (esriConfig,Map, MapView) {
esriConfig.apiKey = "YOUR-API-KEY";
const map = new Map({
basemap: "arcgis-topographic" // Basemap layer service
});
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>
But these docs are not for Typescript. Do they have typescript docs somewhere? How do you add the Key with the new API 4.18.1 and Typescript and NPM and Angular 11?
913
This is what I came up with.
It is based off https://github.com/TheKeithStewart/angular-esri-components which uses the arcgis-js-api library
https://github.com/Esri/jsapi-resources/tree/master/esm-samples/jsapi-angular-cli has the basic setup instructions for using @arcgis/core in an Angular application
esri-map.component.scss:
#mapViewNode {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
esri-map.component.ts:
import {
Component,
ElementRef,
Input,
OnInit,
NgZone,
OnDestroy,
ViewChild,
Output,
EventEmitter,
} from '@angular/core';
import config from '@arcgis/core/config';
import { EsriMapService } from './esri-map.service';
@Component({
// tslint:disable-next-line: component-selector
selector: 'esri-map',
template: '<div #mapViewNode></div>',
styleUrls: ['./esri-map.component.scss'],
})
export class EsriMapComponent implements OnInit, OnDestroy {
@ViewChild('mapViewNode', { static: true }) private elementRef!: ElementRef;
@Input() mapProperties!: any;
@Input() mapViewProperties!: any;
@Output() mapInit: EventEmitter<any> = new EventEmitter();
private mapView: any;
constructor(private zone: NgZone, private mapService: EsriMapService) {}
ngOnInit(): void {
config.assetsPath = 'assets/';
this.zone.runOutsideAngular(() => {
this.loadMap();
});
}
ngOnDestroy(): void {
this.mapView.destroy();
}
loadMap(): void {
this.mapService.isLoaded.subscribe((n: any) => {
this.mapView = n.view;
this.zone.run(() => {
this.mapInit.emit({ map: n.map, view: n.view });
this.mapInit.complete();
});
});
this.mapService.loadWebMap({
...this.mapProperties,
...this.mapViewProperties,
container: this.elementRef.nativeElement,
});
}
esri-map.service.ts:
import { EventEmitter, Injectable } from '@angular/core';
import MapView from '@arcgis/core/views/MapView';
import WebMap from '@arcgis/core/WebMap';
import Widget from '@arcgis/core/widgets/Widget';
import Layer from '@arcgis/core/layers/Layer';
export type Position =
| 'bottom-leading'
| 'bottom-left'
| 'bottom-right'
| 'bottom-trailing'
| 'top-leading'
| 'top-left'
| 'top-right'
| 'top-trailing'
| 'manual';
@Injectable({
providedIn: 'root',
})
export class EsriMapService {
map!: WebMap;
view!: MapView;
loaded = false;
isLoaded = new EventEmitter();
constructor() {}
loadWebMap(props: {
basemap: any;
container: any;
center: any;
zoom: any;
}): void {
this.map = new WebMap({ basemap: props.basemap });
this.view = new MapView({
container: props.container,
map: this.map,
center: props.center,
zoom: props.zoom,
});
this.loaded = true;
this.isLoaded.emit({
map: this.map,
view: this.view,
});
}
addLayer(layer: Layer, clearLayers?: boolean): void {
if (clearLayers) {
this.view.map.removeAll();
}
this.view.map.add(layer);
}
addWidget(
component: string | HTMLElement | Widget | any[],
position?: Position,
): void {
this.view.ui.add(component, position);
}
}
You would just instantiate the component like this:
<esri-map [mapProperties]="mapProperties" [mapViewProperties]="mapViewProperties" (mapInit)="onMapInit($event)">
</esri-map>
mapProperties sets the base map.
mapViewProperties sets the center and zoom.
mapInit lets you know when the map is loaded.
The service provides the map view for constructing the map.
You would then add your layers to the map view as usual.
141
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
