- Angular app to display a zoomable map view using the ArcGIS API mapping solution from Esri with esri-loader. Note: This is the old-fashioned way using esri-loader - from v4.18 of the ArcGIS API for JavaScript it is easier to use @arcgis/core and building with Esri ES modules instead of using esri-loader.
- ArcGIS API for Javascript CDN link in
esri-map
component.
- ArcGIS for Developers offers a full suite of tools and resources to build mapping and analytics solutions. Use ArcGIS APIs to create location-based applications for web, desktop, and mobile devices.
![Example screenshot](./img/map.png)
- Install dependencies by running
npm i
- Run
ng serve
for a dev server. Navigate to http://localhost:4200/
.
- The app will automatically reload if you change any of the source files
- extract from
esri-map.component.ts
to set up map coordinates etc.
export class EsriMapComponent implements OnInit {
private _zoom = 10;
private _center = [0.1246, 51.5007];
private _basemap = "streets";
@Input()
set zoom(zoom: number) {
this._zoom = zoom;
}
get zoom(): number {
return this._zoom;
}
@Input()
set center(center: any[]) {
console.log("centre: ", center);
this._center = center;
}
get center(): any[] {
return this._center;
}
@Input()
set basemap(basemap: string) {
this._basemap = basemap;
}
get basemap(): string {
return this._basemap;
}
@Output() mapLoaded = new EventEmitter<boolean>();
@ViewChild("mapView", { static: true }) public mapViewEl: ElementRef;
constructor(private esriMapService: EsriMapService) {}
public ngOnInit() {
this.esriMapService.loadMap(this._basemap, this._center, this._zoom, this.mapViewEl).then((res: Boolean) => {
console.log("result of map loading: ", res);
this.mapLoaded.emit(true);
});
}
}
- Status: Working.
- To-Do: Nothing. This is the old way of accessing map data using esri-loader. In future use Esri ES modules.
- This project is licensed under the terms of the MIT license.