AndrewJBateman / angular-esri-arcgis

:clipboard: Displays map data from the ArcGIS API, using the esri-loader and an Angular map creation service

⚡ Angular Esri Arcgis

• 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.

• Note: to open web links in a new window use: ctrl+click on link

📄 Table of contents

• ⚡ Angular Esri Arcgis
  • 📄 Table of contents
  • 📚 General info
  • 📷 Screenshots
  • 📶 Technologies
  • 💾 Setup
  • 🔦 Testing
  • 💻 Code Examples
  • 🆒 Features
  • 📋 Status & To-Do List
  • 👏 Inspiration
  • 📁 License
  • ✉️ Contact

📚 General info

• 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.

📷 Screenshots

📶 Technologies

• Angular v16
• Esri-loader v3 library to use the ArcGIS API for JavaScript
• ArcGIS API for JavaScript v4.27 mapping and analytics software
• @types/arcgis-js-api v4.27.0 type definitions for ArcGIS API for JavaScript

💾 Setup

• 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

🔦 Testing

• No test code added.

💻 Code Examples

• 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);
      });
  }
}

🆒 Features

• map view pan function

📋 Status & To-Do List

• Status: Working.
• To-Do: Nothing. This is the old way of accessing map data using esri-loader. In future use Esri ES modules.

👏 Inspiration

• ArcGIS API for JavaScript: Building Apps with Angular
• esri-loader documentation

📁 License

• This project is licensed under the terms of the MIT license.

✉️ Contact

• Repo created by ABateman, email: [e-mail]