Skip to content

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

Notifications You must be signed in to change notification settings

AndrewJBateman/angular-arcgis-multimaps

Repository files navigation

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

📚 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

Example screenshot Example screenshot Example screenshot Example screenshot

📶 Technologies

💾 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

✉️ Contact

  • Repo created by ABateman, email: gomezbateman@gmail.com

About

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

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published