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
  • 🆒 Features
  • 📋 Status & To-Do List
  • 👏 Inspiration

📚 General info

• Basic PWA with SSR and 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
• 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 v15
• Angular Service Workers v15 used to make this a Progressive Web App (PWA)
• Angular Server-side rendering (SSR) with Angular Universal
• Angular Formcontrol
• RxJS Library v7 used to handle async operations using observables
• @arcgis/core v4.24.7 - 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) (not working)
• npm run build:ssr to create SSR build files
• npm run serve:ssr to see on a dev server http://localhost:4000
• 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.

🆒 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 dev
• To-Do: Home page: change map, Location page: Add user location pin if possible.Fix PWA & SSR or replace. Add home page map content, create web address and add to robots.txt and sitemap.xml

👏 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