- 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**
- 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-mapcomponent. - 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
- 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
- Install dependencies by running
npm ithen enter: npm startfor a dev server. Navigate tohttp://localhost:4200/.npm run buildfor a PWA build folder (not working)http-server -p 8080 -c-1 dist/angular-arcgis-multimapsthen selecthttp://127.0.0.1:8080to see PWA app running on a dev server (ng servedoes not work) (not working)npm run build:ssrto create SSR build filesnpm run serve:ssrto see on a dev serverhttp://localhost:4000- The app will automatically reload if you change any of the source files
ng testto execute the unit tests via Karma.ng lintto lint all filesng e2eto execute the end-to-end tests via Protractor.
- Tailwind purges unused CSS to make a very small styles build bundle
- 100% perfect Lighthouse score for About page
- 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
- 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