- 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 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
![Example screenshot](./imgs/location.png)
- 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
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.
- 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);
}
- Tailwind purges unused CSS to make a very small styles build bundle
- 100% perfect Lighthouse score for About page
- Status: Working
- To-Do: Nothing