Laboratorul 02. Aplicație web cu ArcGIS în JavaScript
Obiective laborator
- Introducere în realizarea aplicațiilor web configurabile cu ArcGIS Instant Apps builder
- Familiarizare cu servicii de date în ArcGIS, ex. un feature layer poate fi expus printr-un serviciu web (feature service)
- Introducere în ArcGIS for Developers
- Familiarizare cu ArcGIS Maps SDK for JavaScript
ArcGIS Instant Apps builder
Pentru a înțelege mai bine ce presupune o aplicație web ArcGIS, vom porni de la harta creată anterior și funcția Create app > Instant Apps disponibilă în Map Viewer
Selectați modelul Basic, configurați componentele incluse, apoi publicați aplicația web și copiați link-ul generat într-o fereastra de browser.
Aceasta este o metodă simplă și rapidă de a crea aplicații web folosind portalul ArcGIS, dar nu este cea mai potrivita în cazul aplicațiilor mai complexe, cu funcționalități și integrări specifice. In aceste cazuri se vor folosi API-urile ArcGIS
ArcGIS for Developers
Pentru a dezvolta o aplicație web folosind direct SDK-ul și API-urile ArcGIS, aveți nevoie de un API KEY generat pe contul Location ArcGIS. Dupa ce va autentificati, selectati “Content”, apoi “New item” si optiunea “Developer credentials”. In pop-upul care apare selectati “API Key Credentials”. Selectati “Next” iar in pagina referitoare la privilegii bifati toate privilegiile.
IMPORTANT! Cand generati API Key-ul, copiati sirul respectiv de caractere si salvati-l undeva deoarece ulterior nu veti mai avea acces la acesta!
Familiarizare cu JavaScript
JavaScript este un limbaj de programare aparent simplu (se poate face rapid o aplicație simplă, rulează în browser, nu necesită un toolkit avansat) dar în același timp complex (programare asincronă, multi-paradigmă). Există numeroase framework-uri de JavaScript pentru dezvoltarea aplicațiilor web, atât pe partea de front end (Angular, Vue, React), cât și de back end (Node.js).
Pentru acest laborator, vom realiza o aplicație simplă în browser, folosind SDK-ul ArcGIS pentru JavaScript, și un tutorial pas cu pas. Nu sunt necesare cunoștințe avansate de JavaScript, dar pentru o mai bună înțelegere a limbajului de programare și a modului de organizare a unei aplicații web, puteți consulta tutoriale disponibile online:
Setup aplicație web
Pentru a începe lucrul cu ArcGIS Maps SDK for JavaScript, găsiți aici un setup minimal pentru a afișa o hartă: Display a map
Incepind cu versiunea 4.27 a ArcGIS API for JavaScript se folosesc web components native (taguri precum <arcgis-map>, <arcgis-search>, <arcgis-legend> etc. sunt taguri HTML personalizate — adică Web Components create de Esri)
Sandbox
Pentru a vă putea testa codul puteți folosi Sandbox-ul codepen.io Pentru a salva proiectele realizate în CodePen este necesar să vă creați un cont gratuit.
Plan laborator
Inițializare hartă
Inițializați aplicația și afișați harta folosind ArcGIS Maps SDK for JavaScript:
https://developers.arcgis.com/javascript/latest/display-a-map/
Geolocație
Adăugați modulul esri/widgets/Locate pentru a integra funcția de localizare și urmărire prin geolocație:
https://developers.arcgis.com/javascript/latest/display-your-location/
Elemente grafice pe hartă
Se pot adăuga elemente grafice definite prin coordonate geografice (latitudine, longitudine). Aceste elemente definesc un layer grafic, ce poate fi gestionat direct la nivel de aplicație.
Elementele grafice de tip Point, Polyline, Polygon se definesc prin coordonate și simboluri, și sunt afișate pe hartă folosind un obiect de tip Graphic.
https://developers.arcgis.com/javascript/latest/add-a-point-line-and-polygon/
Adăugare layere
Se pot adăuga layere din surse externe în diferite moduri:
FeatureLayerGeoJSONLayerRasterLayer- …
Adăugați modulul esri/layers/FeatureLayer pentru a integra layere de tip FeatureLayer.
https://developers.arcgis.com/javascript/latest/add-a-feature-layer/
Adăugați modulul esri/layers/GeoJSONLayer pentru a integra layere dintr-un fișier GeoJSON.
https://developers.arcgis.com/javascript/latest/sample-code/layers-geojson/
esri/layers/GeoJSONLayer se pot integra layere din surse externe, fără a fi necesară crearea unui FeatureLayer pe platforma ArcGIS. Fișierul GeoJSON poate fi hostat pe un server, independent de platforma ArcGIS.
Configurare layere
Layerele adăugate pot fi configurate programatic din aplicație.
https://developers.arcgis.com/javascript/latest/style-a-feature-layer/
Configurare popup-uri
Popup-urile pot fi configurate programatic din aplicație.
https://developers.arcgis.com/javascript/latest/display-a-pop-up/
Task
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.
