Integrarea funcțională presupune fie apelarea unor servicii web / API-uri, instalarea unor pachete / SDK-uri, sau chiar utilizarea unui Framework ca structură generală a aplicației. În acest laborator, vom folosi în continuare SDK-ul ArcGIS pentru JavaScript, la care vom adăuga servicii avansate disponibile pe bază de API-uri. Apoi vom face setup-ul pentru un proiect realizat în framework-ul Angular, unde vom integra harta și alte funcționalități separate de ArcGIS.

• Familiarizare cu ArcGIS Maps SDK for JavaScript
• Înțelegerea modului de integrare a funcționalităților ArcGIS interactive
• Familiarizare cu serviciile avansate din ArcGIS
  • Serviciul de rutare
  • Serviciul de căutare a locațiilor
• Familiarizare cu structura unei aplicații într-un framework web (Angular)

ArcGIS pune la dispoziție o multitudine de servicii interactive ce pot fi integrate în aplicații web folosind ArcGIS Maps SDK: Mapping APIs and location services

Se poate folosi serviciul de rutare pentru calcularea rutelor și afișarea indicațiilor de navigație (este necesar contul de developer și API key-ul generat) Routing service

Testați serviciul de rutare în CodePen, folosind API key-ul generat în laboratorul anterior.

Pentru căutarea locațiilor dintr-o arie geografică se poate folosi serviciul Place search. Acesta poate returna locații după categorie (ex. cafenea), nume (ex. Starbucks), adresă Address search, sau coordonate (lat, lng).

Task 1

Creați o (singură) aplicație web care să includă toate funcționalitățile din planul de laborator. Adăugați toate resursele specificate în tutorial.

Task 2

Realizați setup-ul proiectului Angular de mai jos, pe care îl vom folosi în laboratorul următor. Verificați că aplicația rulează în browser fără erori:

• se încarcă interfața?
• se încarcă harta? (dacă nu, identificați cauza și modificați codul .ts al paginii în care este afișată)

Pentru început am lucrat în CodePen. În laboratorul următor, dorim să realizăm un proiect mai complex și vom lucra pe mașina locală. Avem nevoie de câteva tool-uri înainte de a începe.

Instalați versiunea LTS de aici, dacă nu aveți deja instalat Node.js: https://nodejs.org/en/

PowerShell

npm install -g @angular/cli

https://angular.io/guide/setup-local

În folder-ul dezarhivat pe care l-ați descărcat anterior, deschideți un terminal (e.g. PowerShell, shift+click dreapta / Open PowerShell window here) și rulați comanda:

npm install

Pentru a împacheta proiectul și a deschide un server local, ne folosim de toolkit-ul Angular (ng serve). Putem folosi următoarea comandă definită în configurarea proiectului (package.json)

npm run start

Dacă totul este ok (nu sunt erori în cod și toate dependențele au fost instalate corect), se va deschide un server pe portul 4200.

Deschideți browser-ul la adresa: http://localhost:4200/