Step 6: Pin Angular app - solargis/cdk-workshop GitHub Wiki

In this step we will integrate an Angular map application, which uses Pin API to manage pins.

Leaflet map is used to display pins, interactively select existing pins, or create new pins. We use OpenStreetMap Nominatim geocoder to reverse-geocode pins locations, and to search for locations by address.

Code for the Angular application is out of scope of this workshop and is fully provided.

Fast-forward to this step (optional)

git checkout step-6/pin-angular
npm install

NOTE: if you have uncommited work in project repository it is not possible to checkout new Git branch, you have 3 options:

git stash - move all local changes into a 'drawer', more info here

git commit -a -m "my change" - commit all changes to local branch

git reset --hard HEAD - remove all local changes

Preparation (skip if fast-forwarded)

Add npm dependencies:

npm install --save @angular/cdk @angular/material @ngxs/store leaflet lodash.isequal [email protected]

Extract Angular Pin app code from step6-pin-angular.zip into ./

./lib/web/src/app/components/app.component.ts         - updated root app component
./lib/web/src/app/components/header.component.ts      - header component with logo and search
./lib/web/src/app/components/image.component.ts       - component for displaying pin image
./lib/web/src/app/components/image-input.component.ts - file selector component for images
./lib/web/src/app/components/map.component.scss       - SCSS styles for map component
./lib/web/src/app/components/map.component.ts         - map component for Leaflet map
./lib/web/src/app/components/search.component.ts      - search with geocoder autocomplete
./lib/web/src/app/components/sidebar.component.ts     - map sidebar component
./lib/web/src/app/services/nominatim.service.ts       - Nominatim geocoder service
./lib/web/src/app/services/pin-api.service.ts         - Pin API service wrapper
./lib/web/src/app/state/pin.state.ts                  - NgXS state for pins
./lib/web/src/app/utils/array.utils.ts                - helper methods for JS arrays
./lib/web/src/app/utils/simple-change.operator.ts     - RxJS operator to track changes
./lib/web/src/app/app.module.ts                       - updated root app module
./lib/web/src/styles.scss                             - added Material theme to styles

6.1 Integrate Angular app

If not yet removed, delete initial AppComponent - ./lib/web/src/app/app.component.ts

Set path for shared code: ./lib/tsconfig.web.json

"paths": {
  "shared/*": ["shared"]
}

To write simple imports from shared code: import { something } from 'shared/code';

Include Leaflet assets in Angular app: ./angular.json

"assets": [
  "lib/web/src/favicon.ico",
  "lib/web/src/assets",
  {
    "glob": "**/*",
    "input": "node_modules/leaflet/dist/images",
    "output": "/assets/leaflet"
  }
],

Build and deploy:

npm run build
cdk deploy

Test

Open app in browser, test app: pin images, delete pins
Inspect resources in AWS Console: S3, DynamoDB