tactusoft / maps

⚡ Angular RxJS ArcGIS

• Angular app using RxJS operators and the ArcGIS API mapping solution from Esri with esri-loader

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

📄 Table of contents

• ⚡ Angular RxJS ArcGIS
  • 📄 Table of contents
  • 📚 General info
  • 📷 Screenshots
  • 📶 Technologies
  • 💾 Setup
  • 🔦 Testing
  • 💻 Code Examples
  • 🆒 Features
  • 📋 Status & To-Do List
  • 👏 Inspiration
  • ✉️ 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.
• RxJS subscriptions objects used to represents the execution of observables

📷 Screenshots

📶 Technologies

• Angular v11
• Angular Formcontrol
• Esri-loader v3 library to use the ArcGIS API for JavaScript
• ArcGIS API for JavaScript v4.18 mapping and analytics software
• @types/arcgis-js-api v4.18.0 type definitions for ArcGIS API for JavaScript
• RxJS Library v6 used to handle async operations using observables
• Calcite Web css framework v1.2.5 a web adaptation of Calcite, the desktop framework developed for ArcGIS Pro. Referenced directly from the CDN in src/styles.css

💾 Setup

• Install dependencies by running npm i
• Run ng test for Jasmine tests carried out in Karma console
• 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

• Run ng test to execute the unit tests via Karma.
• Run ng e2e to execute the end-to-end tests via Protractor.

💻 Code Examples

• extract from control-panel.component.ts to pan to map view in 2s

panMap(coordinates: string) {
    this.mapView.goTo(coordinates).then(() => {
      this.mapView.zoom = 18;
      setTimeout(() => {
        this.mapService.panToWonderComplete();
      }, 2000);
    });
  }

🆒 Features

• map view pan function

📋 Status & To-Do List

• Status: Working. Passing 2 out of 4 tests, issue with provider of EsriMapService, e2e testing fails.
• To-Do: Fix errors

👏 Inspiration

• ArcGIS API for JavaScript: Building Apps with Angular
• #ANGULAR, Deploying an Angular App to Firebase Hosting

✉️ Contact

• Repo created by ABateman - you are welcome to send me a message