angular-arcgis-multimaps Tailwind Templates

Angular Arcgis Multimaps

📋 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 #rxjs #tailwind #tailwindcss #pwa #angular-universal #esri-javascript-api #esri #rxjs7
Download

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**

:page_facing_up: Table of contents

:books: 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

:camera: Screenshots

Example screenshot Example screenshot Example screenshot Example screenshot

:signal_strength: Technologies

:floppy_disk: 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

:flashlight: 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.

:computer: 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);
    }

:cool: Features

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

:clipboard: Status & To-Do List

  • Status: Working
  • To-Do: Nothing

:clap: Inspiration

:envelope: Contact

Top categories

tailwind daisyui resume portfolio email blog dashboard landing-page admin ecommerce
Loading Svelte Themes