andrewjbateman/angular-arcgis-multimaps

:clipboard: Angular multi-page app using RxJS operators and ArcGIS esri-mapping solutions from Esri to display a map. Tailwind CSS used for reduced styles build bundle. For the About page info. the Github API is accessed using Angular httpClient and the RxJS take(1) method.

Angular ArcGIS Multimaps

• Angular multi-page app using RxJS operators and ArcGIS API mapping from Esri to display map *** Note: to open web links in a new window use: ctrl+click on link**

📄 Table of contents

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

📚 General info

• Basic PWA app with Tailwind CSS
• Esri-map view refactored to use @arcgis/core mapView and WebMap with a GraphicsLayer to allow sketching
• WebView map specified using a portalItem id
• About page - info. about the app
• Contact page - info. about the author - data from Github API
• Location page uses sessionStorage to store user coordinates and these are lost the moment the browser is closed
• Progressive Web App (PWA) capability added. The PWA is still evolving and I believe worth including in an app but needs to be kept up to date
• 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.
• Esri - about
• RxJS subscriptions objects used to represent the execution of observables

📷 Screenshots

📶 Technologies

• Angular v17
• Angular Service Workers v17 used to make this a Progressive Web App (PWA)
• Angular Formcontrol 17
• RxJS Library v7 used to handle async operations using observables
• @arcgis/core v4.29.10 - the version is significant because ES modules were added after v4.18

💾 Setup

• Install dependencies by running npm i then enter:
• npm start for a dev server. Navigate to http://localhost:4200/.
• npm run build for a PWA build folder (not working)
• http-server -p 8080 -c-1 dist/angular-arcgis-multimaps/ then select http://127.0.0.1:8080 to see PWA app running on a dev server (ng serve does not work)
• The app will automatically reload if you change any of the source files

🔦 Testing

• ng test to execute the unit tests via Karma.
• ng lint to lint all files
• ng e2e to execute the end-to-end tests via Protractor.

💻 Code Examples

• extract from app/pages/location/services/coords.service.ts

    // handle error if geolocation request unsuccesful
    function handleError(error: any) {
      let errorStr;
      switch (error.code) {
        case error.PERMISSION_DENIED:
          errorStr = 'User denied the request for Geolocation.';
          break;
        case error.POSITION_UNAVAILABLE:
          errorStr = 'Location information is unavailable.';
          break;
        case error.TIMEOUT:
          errorStr = 'The request to get user location timed out.';
          break;
        case error.UNKNOWN_ERROR:
          errorStr = 'An unknown error occurred.';
          break;
        default:
          errorStr = 'An unknown error occurred.';
      }
      console.error('An error occurred: ' + errorStr);
    }

🆒 Features

• Tailwind purges unused CSS to make a very small styles build bundle
• 100% perfect Lighthouse score for About page

📋 Status & To-Do List

• Status: Working
• To-Do: Nothing

👏 Inspiration

• Youtube: ArcGIS API for JavaScript: Building Apps with Angular
• Youtube: ArcGIS API for JavaScript: Using Frameworks
• Esri config example
• ArcGIS API docs
• Matt Callahan Blog: Angular + ArcGIS API for JavaScript: A unit testing strategy using dependency injection and the facade pattern
• ArcGIS Living Atlas of the World
• Dev.to: Setup TailwindCSS in Angular the easy way
• Free svg icons
• StackOverflow: ngIf - Expression has changed after it was checked

✉️ Contact

• Repo created by ABateman, email: [email protected]