Praktikum 18 Veebirakendused, veebimajutus

Tavalised arvutis hoitavad kaardid on digitaalsed kaardid, mille võib panna ka veebilehele, ent mille koostamine, säilitamine ja näitamine ei sõltu kuidagi veebitehnoloogiast. Digitaalsed kaardid on staatilised. Veebikaardid aga mitte lihtsalt ei paikne veebis, vaid on veebist sõltuvad: nii nende koostamine kui ka vaatamine sõltub veebitehnoloogiast. Sageli on veebikaardid dünaamilised, interaktiivsed ning võivad kasutada ka mujalt veebist päritavaid andmeid.

Lisaks sellele, et veebikaartidel saab kuvada korraga mitut kihti, mingeid kihte sisse ja välja lülitada või kasutada andmete esitamiseks animatsiooni, saab nendele lisada ka erinevaid lisaelemente, näiteks sisse- ja väljasuumimine, vahemaade mõõtmine, legend, pealkirjad, otsing jpm. Samuti saab määrata, mis juhtub, kui kasutaja liigub hiirega mingi punkti peale, sellel klikib või mingil muul moel veebikaardiga suhtleb.

Tänapäevase veebikaardi aluskaart koosneb paanidest (tiles), tüüpiliselt 256×256 piksli suurustest rasterpiltidest (aga juba kasutatakse ka resolutsioonist sõltumatuid vektorpaane), mida laaditakse vastavalt kasutaja valikutele kaardipaanide serverist (näiteks OpenStreetMapi serverist). See tähendab, et kasutajale näidatakse ainult seda osa kaardist, mida tal on vaja näha, muutes kaardi laadimise oluliselt kiiremaks.

Kaardipaanide laadimine (Allikas: [Axis Maps](https://www.axismaps.com/guide/what-is-a-web-map))

Joonis 18.1: Kaardipaanide laadimine (Allikas: Axis Maps)

Aluskaart annab veebikaardile geograafilise konteksti, ent ei ole iseenesest kaardi tegemise ega vaatamise põhjuseks. Aluskaardil saab omakorda kuvada muid vektor- või rasterandmeid.

Suur osa veebikaartidest (ja neid pakkuvatest APIdest ehk rakendusliidestest) on vaikimisi Web Mercatori projektsioonis (CRS-iga EPSG:3857), mille puhul peab arvestama sellega, et alade suurus on moonutatud.

Kui tahta teha sageli, palju või korralikke veebikaarte ja kaardirakendusi, tasub vähemalt mingil algtasemel ära õppida keel, milles seda teha saab. Veebilehed kasutavad (vähemalt) HTMLi, et veebilehte struktureerida, CSSi, et veebilehte kujundada, ning JavaScripti, et lisada veebilehele interaktiivsust.

HTML, JavaScript ja CSS (Allikas: [dev.to](https://dev.to/fabcodingzest/how-to-get-started-with-web-development-front-end-part-1-5c6h))

Joonis 18.2: HTML, JavaScript ja CSS (Allikas: dev.to)

Ühe lihtsa veebilehe struktuur HTML-failis võib välja näha näiteks selline:

<!DOCTYPE html>
<html>
  <head>
    <title>Minu lehe pealkiri</title>
    <link href="stiil.css" type="text/css" rel="stylesheet">
  </head>
  <body bgcolor="black" text="white">
    <h1>Minu esimene veebileht</h1>
    <p>Siin on mingi tekst.</p>
    <p>Siin on <a href="https://tartugeohum.github.io/" target="_blank">link</a>, kust leiab kõik selle kursuse materjalid</p>
    <p>Siin all on nupp, millele vajutades saab veel midagi teada.</p>
    <button type="button" onclick="document.getElementById('pealkiri').style.display='block'">Vajuta siia!</button>
    <p id="pealkiri" style="display:none">See on minu esimene veebileht!</p>
  </body>
</html>

Selle veebilehe juurde käiv CSS-fail omakorda selline:

h1{
  text-align: center;
  color: blue;
  font-size: 40px;
}
p{
  font-family: courier;
  font-size: 20px;
}

Kokku saab ühe väga lihtsa lehe, mis näeb välja selline:

Joonis 18.3: Lihtne veebileht

Interaktiivsete veebikaartide jaoks kasutatakse sageli näiteks JavaScripti teekide/pakettide Leafleti või OpenLayersi APIsid ehk rakendusliideseid, mis suhtlevad erinevate serveritega ning muudavad ja kuvavad kaarti vastavalt kasutaja valikutele. Mõlemad teegid on vabavaralised ja avatud lähtekoodiga, samas kui näiteks Google Mapsi API ja ArcGISi API on seotud konkreetse omandusliku (proprietary) tarkvaraga.

Joonis 18.4: Leaflet ja OpenLayers

Leafleti kasutatakse üldiselt rohkem, see on ökonoomsem, lihtsama APIga ning sobib hästi lihtsamate kaardirakenduste tegemiseks (Leaflet does the 20% of things that are required 80% of the time). Samas saab paljud funktsioonid kätte ainult erinevatest pluginatest ning kõiki võib-olla ei olegi veel olemas. Suure hulga funktsionaalsustega kaardirakenduste jaoks soovitatakse kasutada pigem OpenLayersit, mille API on keerulisem, ent selle võrra on see paindlikum ning pakub rohkem funktsioone.

Ka Mapbox pakub oma JavaScripti teeki/paketti Mapbox GL JS, mis võimaldab koostada veebikaarte ja kaardirakendusi.

18.1 Kaardikihid QGISis

Eelmisel korral tegime kaardid, kus interpoleerisime murdeatlase levikuandmete ja murdekorpuse sagedusandmete põhjalt ei ole ja pole rasterkihid, kus teadaolevate andmepunktide keelendi väärtuste järgi ennustasime ka vahepealseid väärtusi kohtadesse, kust andmeid ei olnud.

Kuvame neid rasterkihte veebikaardil. Lisaks anname veebikaardi kasutajale võimaluse vaadata eraldi atlase ja korpuse punktandmeid ning kihelkondade vektorkihti.

Selleks, et kihtide loomine kiiremini läheks, on juba tekitatud sobivad vektorkihid atlas.gpkg, korpus.gpkg ja kihelkonnad.gpkg, mida pole vaja enam filtreerida ega muude andmetega ühendada.

Laadime kihid QGISi,
värvime atlase punktid vastavalt sellele, kas punkt esindab ei ole või pole varianti (Categorized),
värvime korpuse punktid vastavalt sellele, kui suur on ei ole osakaal (Graduated),
määrame atlase ja korpuse punktidele erinevad sümbolid.

Järgmiseks teeme rasterkihid Thin Plate Spline meetodiga, et ennustada ei ole (vs. pole) väärtusi ka nendele aladele, kust atlases või korpuses andmeid ei ole.

Processing → Toolbox → Thin Plate Spline
Kasutame atlase punktikihi KeelendNum tulpa, kus on ainult väärtused 0 ja 1, ja korpuse punktikihi eiole tulpa, kus on väärtused 0st 1ni. Rasterkihtidel niisiis ennustame väärtusi 0 ja 1 vahepeale (tegelikult ka üle ja alla nende).
Määrame piksli suuruseks 500 ja Regularisation väärtuseks 0.1, otsinguraadiuseks 20 km (20 000 meetrit).
Lõikame rastrid kihelkondade kihi järgi.
Värvime rastrid nii, et alad, mis on pole-lembesemad, on tumedamad. Määrame skaala otspunktideks 0 ja 1.
Nimetame lõigatud ja värvitud rastrid nt nimedega atlase TPS ja korpuse TPS.

18.2 Veebikaartide tegemine

Peidame vektorkihtidelt tunnused, mida me ei taha veebikaardil näidata. Selleks teeme igal kihil topeltkliki, liigume jaotisesse Attributes Form, valime peidetava atribuudi ja Widget Type alt valime Hidden. Võiksime peita vähemalt objekte identifitseeriva atribuudi fid, lisaks ka nt kihelkondade lühendid jms.

Järgmiseks valime kaardile aluskaardi (QuickMapServices) ja muudame projekti CRSi EPSG:3857ks. Salvestame projekti ja rasterfailid!

Tehtud kaartide hõlpsaks lisamiseks veebi saab installida nüüd qgis2web pistikprogrammi. See genereerib QGISi projektist kas OpenLayersi, Leafleti või Mapboxi API abil veebikaardi tervikliku veebilehena koos kõikide vajalike kaustade ja failidega, ilma et peaksime tingimata ise JavaScriptis, CSSis ja HTMLis koodi kirjutama.

Valime seejärel Web → qgis2web → Create web map.

Jaotises Layers and Groups valime, milliseid kihte oma veebikaardil tahame näidata.

Iga kihi juures saab omakorda valida, kas tahame, et kiht oleks kohe kaarti avades nähtav (Visible), kas kihi elementidel klikkides avaneksid hüpikaknad (Popups) ja kas soovime, et väiksemal mõõtkaval oleksid lähedased punktid klasterdatud ühe punkti alla, nii et oleks nähtav, kui mitu punkti sellesse piirkonda jääb (Cluster, ainult vektorkihtidel).
Hüpikakende puhul (Popup fields) saab omakorda igale andmestiku tunnusele määrata, kas lisada sellele ka tulbanimi ja kui, siis kas tulbas oleva teksti kõrvale (inline label) või kohale (header label).

Joonis 18.5: Kihtide ja nende atribuutide kuvamine QGISi qgis2web pistikprogrammis

Jaotises Appearance valime, milliseid üldisi elemente ja vidinaid oma kaardile soovime lisada. Näiteks:

Add layers list alt saab valida, kas võimalikud kihid kuvada menüüs, mille saab lahti klõpsata (Collapsed), või menüüs, kus on kõik kihid kohe nähtaval (Expanded).
Attribute filter kastis saab valida need andmestiku atribuudid, mille põhjal kaardi kasutaja saab alamhulki pärida, nt kui tahab näha ainult Võru murde andmeid või ainult ei ole punkte.
Layer search alt saab määrata kihid, millelt kasutaja võib päringuid teha (nt et leida üles mõni Pühalepa kihelkonna punktike).
Template ütleb, kas kaardi suurus veebilehel on nii suur, kui ta on parajasti näha QGISi peaaknas, nn lõuendil (canvas), või ulatub kaart üle kogu veebilehe.
Extent määrab ära, kas näeme veebikaardi avamisel seda vaadet, mida parajasti QGISi peaaknas lõuendil, või näidatakse sellist ulatust, mis katab ära kihtide maksimaalse ulatuse (nt et kõik punktid kaardil oleksid kohe alguses näha).
Max zoom level ja Min zoom level määravad ära, kui detailselt (mis suumimise astmel) kasutajal kaarti vaadata lubame.

Joonis 18.6: Interaktiivsete võimaluste lisamine

Jaotises Export saame määrata ära, kuhu veebikaardi väljundi saadame: kas mingisse lokaalsesse kausta oma arvutis või otse FTP serverisse. Paneme väljundi esialgu oma kursuse kausta. Vajutame Export.

Lähemalt saab qgis2web pistikprogrammist lugeda jaotisest Help.

18.3 Ülesanne

Salvestame olemasoleva QGISi projekti ja teeme seejärel uue projekti. Laadime sinna andmestiku notable_estonians.gpkg. See on veidi puhastatud versioon juba 12. praktikumis kasutatud andmestikust tuntud eestlaste või Eestiga seotud isikute kohta, mis on aluseks rakendusele Notable people (punktid). Terve andmestiku viide ja allalaadimise link siin, andmestiku tutvustus siin.

Kujundame punktid.

Teeme rakenduse, kus tuntud eestlaste punkte saaks kõikide tunnuste järgi filtreerida ja punktile liikudes saaks konkreetse isiku kohta rohkem infot. Lisaks võiks saada teha päringuid konkreetsete nimede põhjal.

Ekspordime veebikaardi Leafleti APIt kasutades. Nimetame väljundkausta ümber nimega kuulsad_eestlased.

18.4 Veebikaartide majutamine ja jagamine

Valmis veebikaardi jagamiseks teistega võid saata kogu rakenduse kausta kellelegi lokaalselt vaatamiseks või selle kuskile serverisse avalikult üles panna.

18.4.1 Ülikooli võrguketas

Tartu Ülikooli tudengitel ja töötajatel on TÜ serveris \\pohl.ut.ee või \\leesikas.ut.ee oma võrguketas (vaikimisi 1GB), kus on võimalik hoida ja varundada oma isiklikke faile. Samuti saab TÜ serverisse oma kodukataloogi salvestada ja üles panna loodud veebilehed. Veebilehed tuleks salvestada kodukataloogi alamkausta public_html ning nendele saab ligi aadressilt https://kodu.ut.ee/~kasutajanimi/.

Ülikooli võrguketastele ligipääsemiseks peab olema ülikooli sisevõrgus. Väljastpoolt ülikooli saab sisevõrku turvaliselt ühenduse virtuaalse privaatvõrgu (VPN) abil.

Ülikooli sisevõrgus olles saab isikliku võrguketta kodu- või sülearvutile külge haakida. Windowsis näiteks tuleb selleks minna esmalt jaotisesse This PC ja valida ülamenüüst Computer → Map network drive. Vali võrgukettale suvaline täht, mis pole veel kasutuses, Folder jaotisse kirjuta \\pohl.ut.ee\sinukasutajanimi või \\leesikas.ut.ee\sinukasutajanimi. NB! Kui sisselogimisel küsitakse kasutajanime, siis see olgu kujul domenis\kasutajanimi või kasutajanimi@ut.ee.

(Kui see kohe ei tööta, siis proovi esmalt seda.)

Kui liigutad nüüd kogu qgis2web väljundi kausta (kas kausta kuulsad_eestlased või ei ole/pole veebirakenduse) oma kursuse kaustast külge haagitud võrgukettale public_html kausta ja kirjutad seejärel mõne veebibrauseri aadressiribale https://kodu.ut.ee/~sinukasutajanimi/rakendusekaustanimi, peaksid nägema oma veebikaarti kõigile kättesaadaval kujul.

18.4.2 GitHub Pages

Veebikaarte saab tasuta majutada näiteks ka GitHubis (vaata lühikest juhendit siit). Selleks tuleks teha uus avalik repositoorium, kuhu paigutada qgis2webi väljundkausta sisu (sh kindlasti ka fail index.html). Vaata juhendit näiteks siit.

Tee endale GitHubi konto ning seal loo uus repositoorium (New), nt kas üldisema nimega veebikaart või spetsiifilisema nimega.

Joonis 18.7: Uue repositooriumi tegemine GitHubis

Kõige lihtsam on GitHubis toimetada GitHub Desktopi rakenduse abil.

Laadi programm alla.
Ava programm.
Vali File → Options → Accounts ning logi sisse GitHub.com kontole oma GitHubi kasutajanime ja parooliga (võib toimuda läbi brauseri).
Järgmiseks vali avalehel Clone a repository from the Internet ning filtreeri välja veebis loodud repositoorium (nt MPilvik/veebikaart). Vali see, vali oma arvutis koht, kus tahad seda kausta lokaalselt enda arvutis hoida, ning vajuta Clone. Nüüd tekib sinu arvutis vastavasse kausta uus tühi kaust.
Sikuta sellesse tühja kausta kogu qgis2web pistikprogrammi eksporditud väljundkausta sisu (NB! ainult sisu, mitte kausta ennast).
Mine tagasi GitHub Desktopi rakendusse. Näed, et rakendus näitab sulle kaustas toimunud muudatusi (lisamisi, kustutamisi, muid muudatusi).
Selleks, et veebikaardi materjale nüüd GitHubi üles lükata, tuleb need n-ö commit’ida ning seejärel push’ida. All vasakus nurgas on kastike koos nupuga Commit to main. Lisa Summary väljale mingi kirjeldus, mis uuendusi üles laadid (nt veebikaardi materjalid) ning vajuta Commit to main nupule.
Lõpuks pead vajutama Publish branch/Push origin nupule, et kõik veebi üles laadida.
Lehel github.com peaksid nüüd sisse logides nägema, et qgis2webi väljundid (sh index.html) on kõik loodud veebikaardi kaustas.

Joonis 18.8: Üleslaaditud veebikaardi materjalid GitHubis

Lõpuks tuleb veebileht ka rakendusena nähtavaks teha. Selleks saab kasutada GitHub Pages veebimajutuse teenust. Vali oma repositooriumis Settings → Pages → Branch = main v master ja vajuta Save. Oota paar sekundit ning mine lehele https://sinukasutajanimi.github.io/sinurakendusenimi/

Kui tahad veebikaardi repositooriumit ära kustutada, saad teha seda kaustas Settings → General → Danger Zone → Delete this repository alt.

Kuskile serverisse riputatud veebilehte saab omakorda paigutada teise veebilehe sisse, nt HTML-i iframe-märgendi abil.

18.5 LISA: ajatelje kasutamine QGISis

Kasutame Eesti filmi andmebaasist kogutud andmeid selle kohta, milliseid geograafilisi kohti läbi aegade Eesti filmides näha on olnud. Selleks on andmebaasis lisaks tavalistele märksõnadele märgendatud eraldi ka kohanimed. Selle kursuse tarbeks korjasime need R-i skriptiga kokku ning eri aastate peale kokku vähemalt 5 korda esinenud kohanimede koordinaatidega sidumiseks kasutasime Maa-ameti geokodeerimise teenust.

Kohad, millele teenuses mingid koordinaadid määrati, oleme üle vaadanud ning nende punktid enam-vähem õigesse kohta liigutanud (seega koordinaatide ja atribuudi Taisaadress andmed ei pruugi alati klappida). Kohtadele, mis koordinaate ei saanud, ei ole koordinaate ka eraldi lisatud.

Laadime saadud andmestiku efis_parandatud.gpkg QGISi. Valime QuickMapServices kaudu ka mingi sobiva aluskaardi. Määrame projekti CRS-iks EPSG:3857.

Filtreerime andmestikust kõigepealt välja ainult need read, kus aastaarvud on olemas.
Kuna Eesti kohta on info oluliselt detailsem kui välismaa kohta, piirame oma veebikaardi samuti ainult Eesti alaga. Kasutame selleks Select Features by Freehand tööriista, et tõmmata ümber Eesti ala piiri, mille seest punkte valida.
Salvestame tehtud valiku eraldi kihina. Nimetame selle nt nimega efis_eesti.gpkg.
Eemaldame punktidelt äärejooned, valime punktidele värvid, teeme need läbipaistvamaks ning määrame punktide suuruse vastavalt sellele, kui palju mingit kohta mingil aastal filmides näidatud oli (tulp n, mille väärtuseid võiks lineaarselt kujutada suuruste kaudu 2 mm-st kuni 15 mm-ni: Data defined override → Assistant → Source: n, Values from: 1, to: 10, Size from: 2, to: 15, Scale method: Radius).
Kuna aastaarvu sisaldav tulp on hetkel andmestikus tekstikujul ja sisaldab ka ajavahemikke (nt 1940-1941), tekitame andmestikku kaks uut tulpa:
- nimetame esimese tulba nimega aasta1, kus oleks arvu kujul ainult 4 esimest numbrit aasta tulbast: to_int(left("aasta", 4)).
- Seejärel teeme tulba nimega kuupaev, paneme tulbale aasta1 ümber funktsiooni to_date(), mis muudab aastaarvu kuupäevaks: to_date("aasta1", 'yyyy') ja määrame aasta viitepunktiks mitte 1. jaanuari, vaid juuni lõpu: to_date("aasta1", 'yyyy') + to_interval('2 days').

Joonis 18.9: Eesti filmidega seotud kohad ja uued tunnused atribuuttabelis

Teeme nüüd efis_eesti kihil paremkliki ning valime Properties. Vasakult menüüst valime Temporal ja teeme linnukese valiku ette Dynamic Temporal Control.
Kuna meil on andmestikus nüüd kuupäeva tulp, saame valida konfiguratsiooniks väärtuse Single Field with Date/Time ning Field väärtuseks loodud tulba kuupaev. Vajutame OK.

Joonis 18.10: Ajadimensiooni kasutamine QGISis

Valime järgmiseks menüüribalt, kus on nt ka salvestamise ja suumimise ikoonid, kella pildiga tööriista Temporal Controller Panel . Kui seda ikooni ei ole menüüs näha, siis saab minna View → Panels → Temporal Controller ja teha sinna ette linnuke.
Avanenud menüüs vajutame rohelise noolekesega nupule Animated temporal navigation . Animation range’i saame määrata värskendamise ikooni juurest: Set to Full Range ja liidame lõpuaastale ühe (2021. aasta asemel niisiis 2022). Ajatelje “sammuks” määrame 1 aasta.
Vajutame animatsiooni mängimise nupule ning seejärel peaks nägema, kuidas kaardile ilmuvad igal aasta filmidega seotud olnud kohad ning nende ikoonide suurus vastab sellele, kui mitme filmiga need sel aastal seotud olid.
Võime kuvada kaardil ka aastaarvu, et oleks lihtsam jälgida: View → Decorations → Title Label. Teeme linnukese valiku ette Enable Title Label, valime Insert or Edit an Expression ja trükime avaldise kasti year(@map_start_time).

Joonis 18.11: QGIS Temporal Controller

QGIS ei lase animatsiooni gif-ina salvestada, vaid kõik 100 pilti (aastatest 1921-2021) salvestatakse eraldi pildifailidena ning neid tuleb eraldi animeerida mõnes teises programmis, nt Ezgifi veebipõhises programmis.

Selline gif on aga põhimõtteliselt lihtsalt liikuv pilt ning kasutajal ei ole võimalik andmeid kuidagi oma soovidele vastavalt põhjalikumalt uurida.

18.6 Järgmisel korral

Ruumiandmete analüüs R-is. Selleks palun installi endale R ja RStudio uusimad versioonid.