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ă Routing, Place Search, Address Search. Plasati controalele de directii (rutare), cautare locatii si cautare adresa respectind layoutul din figura de mai jos

Task 2 Observati ca daca dati click pe o locatie (cafenea, parc, benzinarie, etc) nu mai este afisat popup-ul aferent locatiei ci acel click este considerat ca punct de plecare pentru rutare. Modificati codul astfel incat rutarea sa se faca numai daca se da click pe harta, in afara locatiilor, iar daca se da click pe o locatie se afiseaza popup-ul.

   viewElement.addEventListener("arcgisViewClick", async (event) => {
        const view = viewElement.view;
        const hit = await view.hitTest(event.detail);
  if (hit.results.length > 0  && hit.results[0].graphic.attributes?.PlaceName) {
            // deschide popup
            .....
             return;  // opreste rutarea
                                                                               }
         //continua cu rutarea
         ......
                                                                      });

Task 3

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/