SVEUČILIŠTE U ZAGREBU GEODETSKI FAKULTET Lovorka Bošković WebGIS GUSTOĆE STANOVNIŠTVA HRVATSKE Diplomski rad Zagreb, 2016.

Транскрипт

1 SVEUČILIŠTE U ZAGREBU GEODETSKI FAKULTET Lovorka Bošković WebGIS GUSTOĆE STANOVNIŠTVA HRVATSKE Diplomski rad Zagreb, 2016.

2 I. Autor Ime i prezime: Lovorka Bošković Datum i mjesto rođenja: 22. lipnja 1992., Zagreb, Republika Hrvatska II. Diplomski rad Naslov: WebGIS gustoće stanovništva Hrvatske Mentor: doc.dr.sc. Dubravko Gajski Drugi mentor: dr.sc. Mateo Gašparović Voditelj: dr.sc. Mateo Gašparović Datum zadavanja zadatka: 03. veljače Datum obrane: 16. rujna III. Ocjena i obrana Sastav povjerenstva pred kojim je branjen diplomski rad: doc. dr. sc. Dubravko Gajski dr.sc. Mateo Gašparović doc. dr. sc. Andrija Krtalić 2

3 Zahvala: Zahvaljujem se mentoru doc. dr. sc. Dubravku Gajskom i voditelju dr.sc. Mateu Gašparoviću na pristupačnosti i savjetima prilikom izrade ovog rada. Hvala svim profesorima i asistentima što su me vodili tijekom studija i naučili svemu što znam. Hvala i mojim prijateljima i kolegama što su studiranje učinili lakšim i zabavnijim. Hvala mojoj obitelji na razumijevanju i podršci pruženoj tijekom cijelog studija. Uvijek ste me poticali da u svemu što radim dajem sve od sebe. Hvala i svima ostalima koji su na neki drugi način utjecali na moj život i učinili me osobom kojom danas jesam. 3

4 WebGIS gustoće stanovništva Hrvatske Sažetak Kroz povijest broj stanovnika Hrvatske je varirao. Od prvog popisa stanovništva pa do danas, broj stanovnika je uglavnom rastao, uz iznimke poratnih godina kada je popisom utvrđen pad broja stanovništva. Danas prosječna gustoća naseljenosti u Hrvatskoj iznosi nešto manje od 80 st./km2, no prostor Hrvatske nije ravnomjerno naseljen. Zbog procesa deruralizacije ta se razlika još više povećava. Osim demografske razlike u odnosu selo-grad, uočljive su i razlike među regijama Hrvatske. Cilj je ovog rada izrada webgis-a gustoće stanovništva Hrvatske i usporedbe gustoće stanovništva tijekom godina. Kao izvor podataka o broju i gustoći stanovništva koristiti će se popisi stanovništva Državnog zavoda za statistiku. Za izradu webgis-a koristit će se isključivo alati otvorenog koda. Ključne riječi: stanovništvo, gustoća, migracije, webgis, alati otvorenog koda WebGIS of Croatia's population density Abstract Population of Croatian has varied throughout the history. Since the first census until today, the population has been generally growing, with the exception of post-war years when the census showed population decline. Today, the average population density in Croatia is slightly less than 80 people per km 2, but the Croatian area is not evenly populated. This difference even more increases due process of deruralisation. In addition to demographic differences between village and town, there are evident differences between regions of Croatia. The aim of this paper is making WebGIS of Croatia's population density and comparing the density of the population over the years. A source of data on the number and density of the population will be census the Central Bureau of Statistics. Exclusively open source tools will be used to create WebGIS. Key words: population, density, migration, web GIS tools open source 4

5 Sadržaj 1. Uvod Korijeni i razvoj webgis-a Koncept webgis-a Popis stanovništva Državni zavod za statistiku Korištene tehnologije Hyper Text Markup Language JavaScript OGC standardi ESRI Shape ASP.NET Korišteni alati Apache HTTP Server PostgreSQL i PostGIS GeoServer OpenLayers Izrada webgis aplikacije Prikupljanje podataka Statistički/atributni podaci Geometrijski/vektorski podaci Priprema i obrada podataka Spajanje statističkih i geometrijskih podataka Određivanje gustoće stanovništva teritorijalnih jedinica Postavljanje PostgreSQL baze podataka i unos podataka Postavljanje GeoServera i unos podataka Unos podataka u GeoServer Stilsko uređivanje slojeva

6 5.5. Priprema za pisanje koda Pisanje koda webgis aplikacije Kreiranje osnovne stranice web aplikacije Kreiranje stranice za prikaz gustoće stanovništva po županijama Kreiranje stranice za prikaz gustoće stanovništva po gradovima i općinama Kreiranje stranice s opisom projekta Prikaz konačnog rezultata Zaključak Literatura

7 1. Uvod Geoinformacije ili geoprostorne informacije digitalna su veza između lokacije, ljudi i njihovih aktivnosti. Ove informacije mogu grafički ilustrirati što se događa (gdje, kako i zašto) te dati uvid u prošlost, sadašnjost i (vjerojatnu) budućnost (URL 1). Geoinformacijski sustavi (GIS) su tehnologija koja daje odgovore na pitanja gdje te pomaže pri donošenju inteligentnih odluka temeljenih na prostoru i lokaciji. GIS je sustav hardvera, softvera, podataka, ljudi, organizacija i institucija organiziranih za prikupljanje, pohranjivanje, analizu i širenje informacija o područjima na zemlji (Chrisman, 1997). Ova tehnologija starija je od Interneta i Weba. Prvi operacionalni GIS razvijen je godine za kanadski Državni ured za šumarstvo i ruralni razvoj. Razvio ga je Roger Tomlinson, koji se nakon toga još godinama bavio razvojem GIS-a i promicanjem GIS metodologije, zbog čega ga se danas smatra ocem GIS-a. Najčešća uporaba GIS-a je pri izradi velikog broja karata različitih mjerila, tema i kartografskih znakova, no GIS može dati puno više od toga. Analitičke funkcije dio su GIS-a zaslužan za pretvaranje podataka u korisne informacije te su stoga njegov najvažniji dio. Uz povezivanje odvojenih podataka iz geografije, snažne funkcije GIS-a mogu otkriti razne skrivene veze, uzorke i trendove koji nisu vidljivi u statističkim tablicama te dati potpuno novu informaciju, koja može biti ključna pri donošenju odluka. Na taj način omogućuje se ljudima da razmišljaju prostorno kako bi riješili svoje probleme. Nakon desetljeća korištenja GIS-a, razvijen je velik broj GIS aplikacija koje se koriste u raznim područjima. Unatoč tome, smatra se kako GIS i dalje ima velik potencijal koji još nije do kraja realiziran. Prije Web-a, pristup GIS-u imao je relativno malen broj GIS stručnjaka. Pojavom Web-a, nestaju brojna ograničenja i GIS postaje dostupan široj publici. Web je GIS učinio dostupnijim ljudima u njihovim uredima i domovima te fleksibilnijim pomoću na API-a (engl. Application Programming Interface) baziranog Web-u. Osoba koja razvija GIS koristi API kako bi olakšala integraciju s drugim informacijskim sustavima (Fu, 2011). Slika 1: Preklapanje različitih slojeva prostora u GIS-u (URL 2) 7

8 1.1. Korijeni i razvoj webgis-a Početkom devedesetih godina prošlog stoljeća, točnije godine, svoj je razvoj započeo World Wide Web-a, danas najpoznatiji i najkorišteniji dio Interneta, nakon čega je otvoreno novo poglavlje u svijetu računalne tehnologije. WebGIS se pojavio godine, a njegov razvoj od tog trenutka pa sve do danas odvijao se velikom brzinom. Prvim webgis-om smatra se web kartografski preglednik (engl. Web map viewer), kojeg je godine razvio Palo Alto Research Center (PARC) kao dio korporacije Xerox. Web stranica, otvorena unutar web preglednika, pružala je mogućnosti zumiranja, odabira sloja te promjenu kartografske projekcije (slika 2). Klikom na link neke od funkcija, web preglednik bi poslao HTTP (HyperText Transfer Protocol) zahtjev web poslužitelju. Web poslužitelj bi primio zahtjev, proveo određene operacije na karti, generirao novu kartu te ju vratio web pregledniku koji je zahtjev poslao. Web preglednik bi, nakon zaprimanja, kartu prikazao korisniku. Upravo mogućnost otvaranja GIS-a unutar web preglednika, bez da korisnik mora prethodno GIS lokalno instalirati, najveća je razlika i prednost nad tradicionalnim desktop GIS softverima. Nakon što je uočila prednosti ovakvog pristupa, GIS zajednica brzo je prihvatila koncept korištenja GIS funkcija u web preglednicima. Shodno tome, ubrzo su se pojavile brojne webgis aplikacije: National Atlas of Canada, godina Canadian National Atlas Information Service ovim projektom omogućio je korisnicima da u svojim domovima na web stranici pregledavaju karte, za koje su sami mogli izabrat koje slojeve žele da karta prikaže (primjerice ceste, rijeke, administrativne granice, ekološki značajna područja) Alexandria Digital Library, godina Sveučilište u Kaliforniji, Santa Barbara, stvorilo je alat kojim su korisnici, na temelju ključnih riječi i odabranog područja na karti, mogli vrlo lako doći do karata i satelitskih snimaka koji su odgovarali zadanim kriterijima National Geospatial Data Clearinghouse, godina - U.S. Geological Survey (USGS) razvio je projekt koji je funkcionirao na istom principu kao Alexandria Digital Library. Oba projekta potiču dijeljenje geoprostornih informacija te su rani primjeri geoportala. TIGER (Topologically Integrated Geographic Encoding and Referencing) Mapping Service, godina - U.S. Census Bureau objavom ovog kartografskog servisa, omogućio je korisnicima da vrše upite i kreiraju karte s demografskim podacima o državama, okruzima i grafovima, nudeći im velik broj informacija dostupnih u državnoj bazi podataka popisa stanovništva GRASSLinks, godina Projekt koji je Susan Huse razvila kao dio svoje doktorske disertacije na Berkeleyu, Sveučilište u Kaliforniji. GRASS (Geographic Resources Analysis Support System) u tom je trenutku već postojao kao desktop GIS alat, a Huse je razvila sučelje koje je povezalo web poslužitelja i GRASS. Ovo je bio jedan od najranijih 8

9 pokazatelja da su mogućnosti webgis-a veće od prikazivanja karta i izvršavanja upita nad njima. MapQuest, godine - GeoSystems Global Corporation, današnji MapQuest, objavio je svoju web kartografsku aplikaciju koja danas za područje Sjedinjenih Američkih Država ima drugi najveći udio na tržištu online kartiranja, odmah iza Google Maps-a. Od svog prvog objavljivana, aplikacija je služila korisnicima za pregled karata, potragu za lokalnim tvrtkama, pronalazak optimalnih ruta do željene lokacije i planiranje putovanja. Slika 2. Prvi webgis Web map viewer (URL 3) PARC-ov kartografski preglednik i ostale webgis aplikacije iz tog doba bile su ograničenih funkcionalnosti te nisu istovremeno mogle služiti velik broj korisnika. Svejedno, prednosti korištenja Web-a kao medija za prijenos GIS funkcija široj publici nakon ovih projekata bile su neupitne (Fu, 2011) godine održana je prva Web 2.0 konferencija, čime je započela nova era razvoja Web-a. Sve do godine, ova konferencija održavala se jednom godišnje u San Franciscu u Kaliforniji. Na konferenciji su se okupljali mnogi od najistaknutijih poduzetnika i mislilaca Web zajednice kako bi raspravljali o World Wide Webu. Cilj im je bio dići kvalitetu Web-a na višu razinu, odnosno učiniti ga 9

10 što interaktivnijim, integriranijim i što više korisnim zajednici. U nastavku (1) prikazan je izraz kojim je opisan Web 2.0. Web 2.0 = User-generated content + the Web as a platform + a rich user experience (1) Industrija geoprostornih informacija također pokušava pratiti razvoj Weba, slijedeći njihova načela o osiguravanju bogatog korisničkog iskustva, potičući sudjelovanje korisnika te nudeći jednostavne API-e, kako bi korisnik mogao sam kreirati svoju aplikaciju. Profesionalne GIS kompanije usvojile su načela Web-a 2.0 u svojim webgis proizvodima kako bi potaknule dijeljenje, komunikaciju, interoperabilnost, suradnju i integraciju geoprostornih informacija na Webu (Fu, 2011) Koncept webgis-a U svojim početcima, webgis bio je GIS koji se mogao otvoriti pomoću web preglednika. WebGIS kakvog danas poznajemo u mogućnosti je služiti i desktop i mobilne klijente, kao i klijente web preglednika. WebGIS je bilo koji GIS koji koristi web tehnologiju. U užoj definiciji, Web GIS je bilo koji GIS koji koristi web tehnologiju za komuniciranje između komponenti (Fu, 2011). Najjednostavnija se forma webgis-a sastoji od najmanje jednog poslužitelja (engl. server) i jednog korisnika (engl. client). Poslužitelj je uglavnom klasični web poslužitelj, a klijent je web preglednik, desktop aplikacija ili mobilna aplikacija. Klijenti pronalaze poslužitelja na temelju njegova URL-a (Uniform Resource Locator). URL adresa poslužitelja je putanja do tog poslužitelja na webu. Oslanjajući se na specifikacije HTTP-a, klijent šalje zahtjev (engl. request) poslužitelju. Poslužitelj prima zahtjev i provodi traženu GIS operaciju te ponovo putem HTTP-a šalje odgovor natrag klijentu (slika 3). Odgovor može biti u različitim formatima - može primjerice biti HTML (HyperText Markup Language) formata, XML (Extensible Markup Language), JSON (JavaScript Object Notation) ili binarna slika. Slika 3. Klijent-poslužitelj arhitektura (Wong, 2010) 10

11 Pojam webgis usko je vezan uz još dva termina: internet GIS i geoprostorni Web. Web se često pogrešno koristi kao sinonim za Internet, pa se tako često pogrešno smatra i da su Internet GIS i webgis isto. Među njima ipak postoje određene razlike. Web je samo jedan od servisa koje Internet podržava. GIS koji koristi bilo koji od Internet servisa, ne samo Web, smatra se Internet GIS-om. Stoga, Internet GIS širi je pojam od webgis-a. Ipak, Web je glavna atrakcija Interneta i najčešće korišteni Internet servis, pa je tako i WebGIS najčešći oblik Internet GIS-a. Geoprostorni Web, ili skraćeno GeoWeb, nešto je potpuno drugačije od webgis-a. Definicija GeoWeb-a kaže da je to sjedinjavanje geoprostornih informacija s apstraktnim informacijama koje trenutno dominiraju Web-om (URL 4). Ova definicija slična je definicijama prostornog tagiranja i raščlanjivanja područja istraživanja WebGIS-a. Otkako su Internet i Web uklonili ograničenje udaljenosti od virtualnog prostora, omogućen je brz pristup informacijama preko Weba, bez obzira na to koliko su korisnik i server udaljeni. Ova osobina daje webgis-u važne prednosti nad tradicionalnim desktop GIS-om, uključujući sljedeće: globalan doseg korisnici mogu pristupiti webgis-u sa svojih kućnih računala ili mobilnih uređaja veći broj korisnika dok je kod desktop GIS-a u određenom trenutku najčešće samo jedan korisnik, kod webgis-a može ih biti stotine ili tisuće istovremeno više podržanih platformi većinu klijenata webgis-a čine web preglednici, kao što su Internet Explorer, Mozilla Firefox, Apple Safari i Google Chrome, koji djeluju na različitim operativnim sustavima, uključujući Microsoft Windows, Linux i Apple Mac OS jeftiniji dok se za desktop GIS često mora platiti softver ili kupiti licenca, korištenje webgis-a najčešće je besplatno jednostavno korištenje desktop GIS je namijenjen profesionalnim korisnicima s godinama iskustva, dok je webgis namijenjen široj publici, uključujući i javne korisnike od kojih neki ne znaju ništa o GIS-u ujednačeno ažuriranje kod desktop GIS-a ažuriranja se moraju instalirati na svako pojedino računalo, no kod webgis-a jedno ažuriranje dovoljno je za sve korisnike različite aplikacije kako je broj korisnika webgis-a veći nego kod desktop GIS-a, postoji i veći broj korisničkih zahtjeva te se tako webgis koristi kod većeg broja raznih aplikacija. 11

12 2. Popis stanovništva Popis stanovništva (cenzus) sustavan je postupak prebrojavanja, odnosno evidentiranja sveukupne populacije nekoga područja, najčešće države. Popis stanovništva trenutačan je demografski pokazatelj, budući da je definiran tzv. kritičnim trenutkom popisa (URL 5). Postoje dvije temeljne metode popisivanja stanovništva popisivanje stalnog (de iure) stanovništva i popisivanje prisutnog (de facto) stanovništva. Prema koncepciji stalnoga stanovništva, popisuju se sve osobe prema mjestu stalnoga boravka te nije bitno jesu li u kritičnom trenutku prisutne. Prema koncepciji prisutnoga stanovništva, popisuju se svi zatečeni u trenutku popisa. Prvi popisi stanovništva provodili su se više prema načelu prisutnosti, no u novije doba češći su popisi prema načelu stalnosti. Iako postoje zabilježbe o prvim pojedinačnim popisima stanovništva još u robovlasničkom dobu, sustavni popisi stanovništva novijeg su datuma. Prve popise stanovništva u Europi imale su Švedska (1749. godine), Norveška (1760. godine) i Danska (1769. godine). Brzo su uslijedile i ostale europske zemlje, poput Velike Britanije, njemačkih kneževina, Habsburške Monarhije i Rusije. Izvan Europe popise su provodile SAD (1790. godine) (slika 4), Japan te djelomično Kina i Indija (Jugoslavenski leksikografski zavod, 1981). Slika 4. Zadužena osoba od poljoprivrednika na polju prikuplja podatke za popis stanovništva (URL 6) Prvi moderan popis stanovništva na prostoru današnje Hrvatske proveden je godine. Provela ga je Habsburška Monarhija na cijelom svojem teritoriju, a popisu se odazvalo skoro 40 milijuna ljudi. Za svakog stanovnika bilježilo se ime i prezime, datum rođenja, bračno stanje, zanimanje, vjeroispovijest, mjesto pripadnosti, oznaka o prisustvu ili odsutnosti osobe te podaci o stoci. Od godine popis stanovništva provodio se otprilike svakih deset godina (URL 7). Zadnji popis stanovništva na području Hrvatske proveden je godine. Popis je proveden temeljem Zakona o Popisu stanovništva, kućanstava i stanova u Republici Hrvatskoj godine (Narodne novine, broj 92/10). Popisom su se obuhvatile sljedeće jedinice popisa: stanovništvo, kućanstva te stanovi i ostale stambene jedinice. Popis je pripremio, organizirao i proveo Državni zavod za 12

13 statistiku. Proveden je na temelju službenih podataka iz Registra prostornih jedinica o kojima se brine Državna geodetska uprava. Državna geodetska uprava bila je dužna također izraditi tehničku dokumentaciju za provođenje Popisa (Narodne novine, broj 92/10 ). Gustoća naseljenost (aritmetička ili opća relativna gustoća) dobije se dijeljenjem ukupnog broja stanovnika koji žive na nekom teritoriju s ukupnom površinom tog teritorija u kvadratnim kilometrima. Ona pokazuje koliko žitelja prosječno živi na 1 km 2. U promatranju gustoće naseljenosti razlikujemo i: fiziološku gustoću broj stanovnika na jedinici za obradbu pogodne površine poljoprivrednu gustoću broj poljoprivrednog stanovništva na jedinici poljoprivredne površine agrarnu gustoću broj agrarnog stanovništva na jedinici oranične površine ruralnu gustoću urbanu gustoću druge gustoće (Jugoslavenski leksikografski zavod, 1981) Državni zavod za statistiku Državni zavod za statistiku (DZS) je državna upravna organizacija, koja se bavi poslovima službene statistike Republike Hrvatske. U radu je samostalan te obavlja svoje poslove u skladu s odredbama Zakona o službenoj statistici. Program statističkih aktivnosti Republike Hrvatske temelj je po kojem DZS provodi redovita statistička istraživanja (URL 8). Glavni ured DZS-a je u Zagrebu, a u svakoj od županija postoji dodatno po još jedan ili više županijskih ureda. DZS je počeo kao Zemaljski statistički ured za Kraljevinu Hrvatsku, Slavoniju i Dalmaciju. Utemeljen je godine, za vrijeme Austro-Ugarske. Od godine djelovao je pod imenom Statistički ured u Zagrebu. Nakon što je kralj Aleksandar I. Karađorđević 6. siječnja u Kraljevini SHS uveo monarhističku diktaturu (Šestosiječanjska diktatura), ured je tada u potpunosti izgubio svu novčarsku i strukovnu samostalnost u radu. Organizacijski je postao podređen "direkciji državne statistike Kraljevine Jugoslavije". Ured je godine pripojen Predsjedničkom uredu Banske vlasti Banovine Hrvatske. Nakon što je godine osnovana NDH (Nezavisna Država Hrvatska), Predsjedništvo Vlade uspostavilo je Ured opće državne brojidbe. Statistički ured Narodne Republike Hrvatske, utemeljen godine, već godine mijenja ime u Zavod za statistiku i evidenciju. Isti je godine preimenovan u Zavod za statistiku Narodne Republike Hrvatske, a godine u Republički zavod za statistiku Socijalističke Republike Hrvatske (URL 9). Državni zavod za statistiku osnovala je Republika Hrvatska godine. Zavod je u svome radu potpuno samostalan. Od pristupanja Hrvatske Europskoj uniji, teži se program DZS-a što više uskladiti sa statistikom Europske unije. 13

14 3. Korištene tehnologije U ovom poglavlju bit će objašnjene korištene tehnologije u svrhu razvoja ovog projekta Hyper Text Markup Language HyperText Markup Language (HTML) je znakovni (engl. markup) jezik za opisivanje web dokumenata (web stranica). Znakovni jezik zapravo je skup oznaka (engl. tag). HTML oznake se stavljaju uz pojedine sadržaje te tako određuju način prikaza dokumenta na korisničkom sučelju. Svaka oznaka opisuje drugačiji sadržaj stranice. Dokumenti pisani ovim jezikom imaju ekstenziju.htm ili.html. Za razvoj se brinu W3C (World Wide Web Consortium) i tvorci modernih preglednika (Đurek, 2016). HTML se prvi put javno spominje i opisuje godine u dokumentu čiji je autor Tim Berners-Leej, fizičar i zaposlenik CERN-a (Europska organizacija za nuklearno istraživanje). Dokument se zvao HTML tags, a opisivao je 18 oznaka koje je jezik tada sadržavao. Mnoge od tih oznaka nastale su na temelju jednog od ranih jezika za formatiranje teksta, zvanog runoff. Runoff je razvijen u ranim im za CTSS (Compatible Time-Sharing System) operacijski sustav, a kasnije je inkorporiran u UNIX operativni sustav u neke od naprednijih formatirajućih programa. Berners-Lee godine napustio je CERN te osnovao organizaciju W3C, koja se bavi standardizacijom tehnologija korištenih na webu. Prva verzija HTML jezika objavljena je godine. Sadržavala je samo osnovne elemente i bila je vrlo ograničenih mogućnosti. Krajem i početkom godine objavljene su druga i treća verzija. Druga nije sadržavala velike promjene, a u trećoj je uvedena mogućnost kreiranja tablica. Ta verzija je također bila prva koju je razvio i standardizirao W3C. HTML 4.0 objavljen je krajem godine, kao preporuka W3C-a. Imao je tri izdanja: Strict, Transitional i Frameset. Razlika između izdanja bila je u elementima koji su se mogli koristiti. Nadogradnja na HTML 4.0 objavljena je godine pod imenom HTML 4.1. Također je bila preporuka W3C-a te je imala ista tri izdanja kao i prethodna verzija. Krajem godine objavljen je HTML5. Nastao u suradnji W3C i Web Hypertext Application Technology Working Group (WHATWG). Do godine su ove dvije grupe radile odvojeno. WHATWG je radio s web formama i aplikacijama, a W3C sa XHTML 2.0. Udruživanjem snaga kreirali su ovu novu verziju HTML-a (URL 10). Uz Cascading Style Sheets (CSS) i JavaScript, HTML je jedna temeljnih tehnologija za World Wide Web. Kod HTML dokumenta može se čitati pomoću bilo kojeg programa za uređivanje teksta, a za pregledavanje web dokumenata potreban je preglednik (engl. browser). Web preglednici primaju HTML dokument s web poslužitelja ili iz lokalne pohrane i prikazuju ih kao multimedijalne web stranice (URL 11). 14

15 3.2. JavaScript Dok HTML određuje sadržaj web stranice, a CSS definira njihov izgled, JavaScript omogućuje dinamičan i interaktivan sadržaj na web stranicama. To je objektno orijentiran skriptni jezik, koji se izvršava u web pregledniku na strani korisnika. Naziva se skriptnim ili interpretiranim jezikom zato što je jedan od jezika koji se koristi za pisanje relativno kratkih programa visoke razine skripti (Kalafatić, 2012). Objektno orijentiran znači da je sposoban raditi sa objektima. Jezik je nastao godine, nakon što ga je Brendan Eich napisao u 10 dana za tvrtku Netscape Communications. Inspiracija su mu bili programski jezici Java, Scheme i Self. Razvijan je pod imenom Mocha, no službeni naziv bio mu je LiveScript. Naknadno je preimenovan u JavaScript. Konačni odabir imena najčešće se tumači kao marketinški trik, kojim je tvrtka htjela dići popularnost svoga proizvoda povezujući ga sa Javom, u to vrijeme jako popularnim jezikom za web programiranje (URL 12). I danas ljude često zbunjuje jesu li Java i JavaScript isto, no razlike između ova dva jezika su velike. Java je objektno orijentirani programski jezik, dok je JavaScript, iako podržava klase i objekte, više objektno orijentiran skriptni jezik. Kod pisan u Javi mora se cijeli kompilirati da bi se proveo, a JavaScript kod se čita i odmah interpretira redak po redak. Java je samostalan jezik, dok se JavaScript kod mora nalaziti unutar HTML dokumenta kako bi se pokrenuo. Java je puno veći i složeniji jezik, koji kreira samostalne aplikacije (URL 13). JavaScript je programski jezik niže razine. Ne sadrži složenije funkcije manipulacije i dekoracije stranica, što onemogućuje kreiranje animacija. Korištenje direktnog JavaScript koda čak može uzrokovati probleme vezane uz nekompatibilnost preglednika. JQuery je JavaScript biblioteka koja omogućuje korisnicima da izbjegnu ove probleme, dodajući joj mnoge napredne funkcije standardnom jeziku. Biblioteka je besplatna i otvorenog koda, a njezinim razvojem bavi se vrlo dinamična zajednica. JQuery je najpopularnija JavaScript biblioteka danas u uporabi. Njezina sintaksa je dizajnirana kako bi olakšala navigaciju dokumenta, odabir objekata DOM (Document Object Model) modela, podržala izmjene i razvoj Ajax aplikacija (URL 14). Ajax funkcije, koje omogućuju ažuriranje web stranice bez da se stranica ponovno učitava te mogu slati zahtjeve serveru i primati podatke nakon što je stranica već učitana, danas su skoro neizostavan dio web aplikacija. Chart.js je JavaScript biblioteka za crtanje grafikona, koja omogućuje korisnicima da jednostavno vizualiziraju svoje podatke (URL 15). Podržava 8 vrsta grafova, od kojih je svaki animiran i vrlo prilagodljiv. Biblioteka je besplatna i otvorenog koda. Moguće ju je koristiti na svim modernim web preglednicima. 15

16 3.3. OGC standardi Open Geospatial Consortium (OGC) je međunarodni konzorcij nekoliko stotina tvrtki, agencija i sveučilišta koji nastoji razvijati javne, otvorene standarde za rad s prostornim podacima na webu i općenito. Naglasak u OGC standardima stavlja se na podršku interoperabilnim rješenjima, odnosno na osposobljavanje programera za izradu prostornih informacija i usluga koje će biti dostupne i korisne unutar raznih računalnih aplikacija (URL 16). Konzorcij je osnovan godine pod imenom Open GIS Consortium. Tada je konzorcij činilo tek 8 članova: Sveučilište u Arkansasu CAST, Center for Environmental Design Research Sveučilišta u Kaliforniji Berkeley, PCI Remote Sensing, USACERL (US Army Corps of Engineers Construction Engineering Research Laboratory), USDA Soil Conservation Service, QUBA, Camber Corporation i Intergraph Corporation. Intergraph je bio prvi komercijalni član OGC-a (URL 17). Open GIS Consortium godine mijena ime u Open Geospatial Consortium. Od do konzorcij je došao do više od 500 članova, među kojima su brojne vladine i akademske organizacije te organizacije privatnog sektora. Danas OGC surađuje s više od 20 međunarodnih tijela za standarde, uključujući W3C (World Wide Web Consortium), OASIS (Organization for the Advancement of Structured Information Standards) i druge. Većina OGC standarda ovisi o generaliziranoj arhitekturi opisanoj nizom dokumenata, zajedničkog naziva Abstract Specification. Ovi dokumenti opisuju osnovni model podataka za prikazivanje geografskih značajki. Osnovu OGC standarda čini više od 30 standarda, među kojima se nalazi i Web Map Service (WMS). WMS je protokol za objavu georeferencirane karte koju generira poslužitelj. Ovaj standard putem HTTP-a šalje zahtjev za kartom iz jedne ili više distribuiranih baza prostornih podataka. Klijent putem HTTP-a šalje zahtjev, poslužitelj generira kartu na temelju parametra iz poslanog zahtjeva te potom vraća gotovu kartu (Mikolić, 2015). WMS zahtjevom definira se određen geografski sloj i područje interesa, čiji se prikaz želi. Odgovor na zahtjev je jedan ili više kartografskih prikaza, rasterskog formata, koji se mogu prikazati u pregledniku aplikacije. HTTP veza podržava također i mogućnost postavljanja hoće li slika biti transparentna, kako bi se slojevi s više poslužitelja mogli kombinirati, ili neće biti transparenta (URL 18). Uz WMS, često se koristi i Web Feature Service (WFS), protokol za dobivanje geoprostornih obilježja/prostornih podataka. Dok je rezultat WMS protokola rasterska karta, korištenjem WFS protokola dohvaćeni su podaci najčešće u vektorskom obliku tj. geometrija s atributima. WMS omogućuje samo pregledavanje karte, no podatke dobivene WFS servisom moguće je dalje uređivati (Mikolić, 2015). 16

17 3.4. ESRI Shape Environmental Systems Research Institute (Esri) međunarodni je isporučitelj GIS softvera, webgis aplikacija i aplikacija za upravljanje prostornim bazama podataka. Središte tvrtke je u Sjedinjenim Američkim Državama, u gradu Redlans u Kaliforniji. Tvrtka je osnovana godine kao savjetodavna tvrtka za korištenja zemljišta. Danas je tvrtka vodeća na tržištu kada su u pitanju GIS softveri. Shapefile je njihov najpoznatiji vektorski format (URL 19). Shapefile format digitalni je vektorski format za pohranu podataka koji sadrže geometriju, lokaciju i povezane atribute. Esri ga je razvio kao pretežno otvorenu specifikaciju za interoperabilnost podataka između Esri i drugih GIS softverskih proizvoda. Format je predstavljen ranih 1990-ih s drugom verzijom ArcView GIS-a. Njime je moguće čitati i pisati geografske setove s brojnim GIS softverima. Naziv shapefile je dosta čest, no ponekad je zbunjujući, pošto se format sastoji od seta datoteka koje nose isto ime i pohranjene su unutar iste mape, no različitih ekstenzija. Tri osnovne ekstenzije su *.shp, *.shx i *.dbf. Pod nazivom shapefile podrazumijeva se *.shp datoteka, no pri distribuciji nije dovoljna ona sama (URL 20). Potrebne su i druge dvije pomoćne datoteke. 3 osnovne datoteke: *.shp (shape format) sadrži geometriju *.shx (shape indeks format) sadrži pozicijske indekse geometrije koji omogućuju brzo pretraživanja *.dbf (atributni format) sadrži tablicu atributa za svaku geometriju, u dbase IV formatu U sve tri datoteke, zapisi oblika (engl. shapes) su poredani istim redoslijedom. Dodatno postoji još nekoliko datoteka, koje su opcionalne: *.prj (format projekcije) podaci o koordinatnom sustavu i projekciji, u WKT (Well-known text) formatu *.sbn i *.sbx prostorni indeks značajki *.fbn i *.fbx prostorni indeks značajki koje se mogu samo čitati (engl. read-only) *.ain i *.aih atributni indeks aktivnih polja u tablici *.ixs indeks geokodiranja za podatake koji se mogu i čitati i uređivati (engl. read-write) *.mxs indeks geokodiranja za podataka koji se mogu i čitati i uređivati, u ODB formatu *.atx atributni indeks za.dbf datoteku *.shp.xml geoprostorni metapodaci u XML formatu *.cpg datoteka koja određuje kodnu stranicu koja će se koristit za*.dbf datoteku *.qix alternativni prostorni indeks oblika stabla četverokuta (engl. quadtree spatial index) 17

18 3.5. ASP.NET ASP.NET je web radni okvir (engl. framework) otvorenog koda, za izradu dinamičkih web stranica (URL 21). Nastao je integracijom ASP-a (Active Server Pages) i.net-a. ASP, razvijen godine, Microsoft-ov je jezik za programiranje i kodiranje web stranica, koji se koristi zajedno s HTML kodovima. HTML služi kao standardan format za opisivanje web dokumenata. Pri opisu statičkih dokumenata s tekstom i grafikom može biti samostalan, no za bilo kakvu interakciju s korisnicima potrebno je nešto više. Jedan od načina rješavanja problema dinamike web stranice je ASP, danas često zvan klasični APS, kao skripta koja se izvršava na strani poslužitelja. Među srodnim rješenjima nalazi se i PHP (originalno od Personal Home Page, danas rekurzivni akronim za Hypertext Preprocessor), koji je od svoje pojave bio puno popularniji od ASP-a. PHP je bio otvorenog koda te je mogao raditi na Linux/Unix-oidnim operativnim sustavima, koji su besplatna platforma, dok je ASP bio ograničen i mogao raditi samo na Microsoft Windows operativnom sustavu. Upravo zbog toga Microsoft prestaje razvijati staru tehnologiju i okreće se izradi nove.net tehnologije (URL 22) godine predstavljen je.net, a godina finaliziran.net Framework 1.0..NET Framework predstavlja osnovu.net-a. Pojednostavljenom definicijom, to je sustav koji nadograđuje mogućnosti samog operativnog sustava. Predstavlja posebnu infrastrukturu koja programerima nudi gotova rješenja i funkcionalnosti da bi ubrzala i pojednostavila razvoj aplikacija svih vrsta i oblika. ASP.NET dio je.net Framework-a. Ovom integracijom jezika i sustava na poslužitelju (.NET Framework) u svijet web programiranja uvedene su pogodnosti do tada dostupne samo programerima desktop aplikacija. Glavna mu je svrha omogućiti programerima izradu dinamičkih web stranica, web aplikacija i web servisa. Velika prednost ASP.NET-a u odnosu na neka druga rješenja je brzina. Ta brzina je direktna posljedica toga što se ASP.NET aplikacije prevode. Prevođenje se odvije u dva stupnja. U prvom stupnju kod se prevodi u "međujezik" nazvan Microsoft Intermeidate Language (MSIL ili samo IL). Drugi stupanj prevođenja odvija se trenutku kada se aplikacija izvršava. Tada se IL prevodi u strojni kod. Ova faza poznata je kao "Just-In-Time" (JIT) prevođenje, i odvija se na isti način i kod svih.net aplikacija. JIT prevođenje izvršava se samo prvi put kada se zatraži web stranica te nakon toga svaki put kada se izvrše promjene u kodu. Zahvaljujući prevođenju u IL,.NET kod moguće je pisati u čitavom nizu različitih jezika (C#, VisualBasic...). Za razliku od ASP-a, čiji objektni model predstavlja samo tanki sloj iznad HTTP-a i HTML-a, ASP.NET nudi pravi, objektno orijentirani model (URL 23). 18

19 4. Korišteni alati U ovom poglavlju bit će objašnjeni alati korišteni u svrhu razvoja ovog projekta. Važno su korišteni isključivo alati otvorenog koda Apache HTTP Server Apache HTTP Server (Apache HTTP Poslužitelj), najčešće zvan samo Apache, najčešće je korišteni web poslužitelj. Ovim projektom, koji je dio Apache Software Foundation, zajedničkim snagama upravlja grupa volontera sa svih strana svijeta, koristeći Internet i Web za komunikaciju, planiranje i razvoj poslužitelja i uz njega vezane dokumentacije. Također, stotine korisnika doprinijelo je projektu svojim idejama, kodovima i dokumentacijom (URL 24). Objavljen je pod Apache licencom, a besplatan je i otvorenog koda. Operabilan na raznim operativnim sustavima, kao što su Unix-oidni sustavi (najčešće Linux), Microsoft Windows, ecomstation, NetWare, OpenVMS, OS/2, i TPF. Temelj za razvoj Apache HTTP Servera bio je HTTP deamon (HTTPd), sredinom 1990-ih najpopularniji poslužiteljski softver na Web-u. Razvio ga je Rob McCool za National Center for Supercomputing Applications (NCSA) Sveučilišta u Illinoisu. Kada je godine McCool napustio Centar, razvoj HTTPd-a je stao. Mnogi stručnjaci za web tada su počeli sami razvijati svoje nadopune i ispravljati pogreške. Nekoliko njih okupilo se i komunicirajući preko privatne e-pošte odlučilo spojiti svoje promjene. U kratkom roku, njih 8 osnovalo je Apache Group, koja nakon porasta broja članova promijenila svoje ime u Apache Software Foundation. U travnju godine objavljeno je prvo izdanje Apache-a (verzija 0.6.2) dostupno javnosti. Apache 1.0 objavljen je krajem iste godine i iznenadio sve kada je u roku godinu dana postao najkorišteniji web poslužitelj. Sredinom godine osnovana je Apache Software Foundation kao bez-profitna korporacija. Na konferenciji ApacheCon, održanoj godine u Orlandu na Floridi, tijekom završne sesije objavljen je Apache 2.0 Alpha (URL 25). Iako bi Apache Software Foundation, kao kompanija koja drži više od 60% tržišta, mogao uvesti naplatu korisnicima ovog web poslužitelja, oni drže strogu politiku kako Apache mora ostati besplatan. Smatraju kako bi svi alati za online objavljivanje trebali biti dostupni svima, a kako bi tvrtke koje su softvere razvile trebale zarađivati na dodatnim servisima uz softver, poput specijaliziranih modula i korisničke podrške. Jasnog su stava kako Apache mora ostati besplatna platforma pomoću koje će pojedinci i institucije moći graditi pouzdane sustave, u eksperimentalne i ozbiljnije svrhe. 19

20 4.2. PostgreSQL i PostGIS PostgreSQL je sustav za upravljanje objektno relacijskim bazama podataka. Sustav je besplatan i otvorenog koda. Kod je dostupan pod PostgreSQL licencom. Sustav je u početku razvijan za rad na UNIX platformama, no s vremenom je prilagođen radu na svim većim operativnim sustavima, uključujući Linux, UNIX i Windows. Unutar ovih baza podataka moguće je pohranjivati podatke različitih tipova, uključujući cijele brojeve, decimalne brojeve, logičke podatke, znakove i datume. Također podržava pohranu slika, zvukova i videa. Ukoliko je potrebno bazi podataka pristupati i pri izradi klijentske aplikacije, PostgreSQL ima programsko sučelje za C/C++, Java,.Net, Perl, Python, Ruby, Tcl, ODBC i drugo (URL 26). PostgreSQL, originalnog naziva Postgres, nastao je na temeljima Ingres baze podataka, čiji je danas vlasnik Computer Associates. Postgres je razvio Michael Stonebraker, profesor računale znanosti na Sveučilištu u Birminghamu. Kasnije je Stonebraker postao voditelj tehnološkog odjela Informix Corporation, koji je danas dio korporacije IBM. Projekt je pokrenut godine, a Stonebraker ga je sa studentima razvijao 8 godina. Dvojica studenata pod vodstvom Stonebrakera, godine zamijenili su do tada korišteni POSTQUEL jezik za kreiranje upita s SQL jezikom i preimenovali sustav u Postgres95. Projekt je javnosti objavljen godine, s otvorenim kodom. Grupa razvojnih programera prepoznala je tada potencijal projekta. Nakon uložene velike količine truda i rada, Postgres je brzo stekao reputaciju nove baze podataka koja garantira iznimnu stabilnost. U vrijeme novog početka u svijetu tehnologija otvorenog koda, s mnogim novim značajkama i poboljšanjima, Postgres95 preimenovan u PostgreSQL. PgAdmin je grafičko sučelje za administriranje i razvoj PostgreSQL baza podataka. Može se koristiti na svim većim računalnim platformama. Dizajniran je kako bi udovoljio svim potrebama korisnika, od pisanja jednostavnog SQL upita do razvoja složenih baza podataka. Grafičko sučelje podržava sve PostgreSQL značajke te olakšava upravljanje. Razvila ga je zajednica PostgreSQL stručnjaka diljem svijet te je dostupan na mnogim jezicima. Besplatan je te objavljen pod PostgreSQL licencom. PostGIS je dodatak PostgreSQL-a, koji proširuje mogućnosti ove objektno-relacijske baze podataka tako što omogućava podršku za prostorne podatke. Dodavanjem PostGIS proširenja, omogućuje se vršenje SQL upita vezanih uz lokaciju. PostgreSQL bazi podataka tada se mogu dodati novi tipovi podataka (geometrija, geografija, raster itd.) PostGIS slijedi Simpe Featires for SQL specifikaciju OGC-a (Open Geospatial Consortium), a softver je otvorenog koda objavljen pod GNU General Public licencom (URL 27). 20

21 4.3. GeoServer GeoServer je kartografski poslužitelj temeljen na programskom jeziku Java, koji omogućuje korisnicima pregled i uređivanje geoprostornih podataka. Koristeći OGC standarde, GeoServer pruža veliku fleksibilnost u kreiranju karte i dijeljenju podataka. Pomoću WMS standarda, GeoServer može kreirati karte u raznim izlaznim formatima. Također je u skladu s WFS standardom, koji omogućava stvarnu razmjenu i uređivanje podataka koji su korišteni u izradi karte (URL 28). Ovu tehnologiju je godine pokrenuo The Open Planning Project (TOPP). Osnivači su predviđali razvoj geoprostornog Weba, kao analogiju World Wide Webu. Pretražujući World Wide Web, moguće je pronaći tekst i preuzeti ga. Ideja geoprostornog Weba bila je pretraživanje i preuzimanje geoprostornih podataka (URL 29). Pružatelji podataka mogli bi objavljivati svoje podatke na ovom webu, a korisnici bi im mogli direktno pristupiti. Uskoro je pokrenut GeoTools projekt, set GIS alata otvorenog koda temeljenih na Javi, pomoću kojeg su GeoServeru dodane podrška za Shapefile, Oracle baze podataka, integracija ArcSDE i više. Paralelno s razvojem GeoServera, OGC je radio na razvoju WFS i WMS protokola. Ubrzo je GeoServer povezan i s PostGIS bazom prostornih podataka i OpenLayers bibliotekom. GeoServer danas može čitati podatke brojnih izvora i izvoziti podatke u mnoge razne formate. GeoServer je besplatan softver otvorenog koda. Njegova cijena velika je prednost u usporedbi s tradicionalnim GIS produktima, a i ispravljanje pogrešaka i unapređivanje značajki kod softvera otvorenog koda značajno su ubrzane u usporedbi s tradicionalnim softverskim rješenjima. Ovaj alat može prikazati podatke na svakoj od popularnih kartografskih aplikacija, kao što su Google Maps, Google Earth, Yahoo Maps i Microsoft Virtual Earth. OpenLayers, besplatna kartografska biblioteka, integrirana je u GeoServer, što stvaranje karata čini brzim i jednostavnim. Ovaj poslužitelj podržava razne formate podataka, uključujući PostGIS, Oracle Spatial, ArcSDE, DB2, MySQL, Shapefiles, GeoTIFF, GTOPO30, ECW, MrSID, JPEG2000. Preko standardnih protokola proizvodi KML, GML, Shapefile, GeoRSS, PDF, GeoJSON, JPEG, GIF, SVG, PNG i više. Dodatno, podatke je moguće uređivati pomoću WFS transactional profile (WFS-T). GeoServer teži tome da bude povezna točna između besplatnih i otvorenih infrastruktura prostornih podataka. Kao što je Apache HTTP Server ponudio besplatan i otvoren web poslužitelj za objavu HTML-a, GeoServer želi napraviti isto za geoprostorne podatke (URL 30). 21

22 4.4. OpenLayers OpenLayers je biblioteka napisana u JavaScript programskom jeziku, za kreiranje interaktivnih web karata vidljivih u skoro svakome pregledniku. Biblioteka znači da je OpenLayers kartografski alat, koji nudi API. API može biti korišten za razvitak vlastitih web karata. Umjesto izgradnje kartografske aplikacije od početka, za dio kartiranja se može koristiti OpenLayers (Gratier, T., 2015). Biblioteku je originalno razvila privatna tvrtka MetaCarta, djelomično kao odgovor na Google Maps. 2.x serija biblioteke razvila se u zreo, popularan radni okvir s mnogim strastvenim razvojnim programerima i zajednicom koja mnogo doprinosi. Biblioteku je uspostavio Open Source Geospatial Foundation (OSGeo) (URL 31). Alat je besplatan i otvorenog koda. Zajednica pruža dobru podršku, no također postoje i opcije komercijalne podrške. Vrlo je jednostavan za korištenje, zahvaljujući brojnim primjerima na službenoj web stranici (slika 5). Velika prednost OpenLayersa je to što ga se može integrirati u bilo koju aplikaciju otvorenog ili zatvorenog koda, pošto je objavljen pod BSD 2-Clause licencom (Gratier, 2015). Nije vezan ni uz jednu tehnologiju ili kompaniju u vlasništvu, što znači da se korisnik ne mora brinuti o tome da li svojom aplikacijom krši zakon. Biblioteka se nalazi na korisničkoj strani klijent-poslužitelj komunikacijske arhitekture te ne zahtjeva posebne softvere poslužiteljske strane ili postavke moguće ju je koristiti bez ikakvih preuzimanja. Alat podržava GeoRSS, KML, GML, GeoJSON i kartografske podatke iz ostalih izvora koristeći OGC standarde kao što su WMS i WFS. Slika 5. Web stranica OpenLayers-a nudi velik broj primjera koji korisniku uvelike olakšavaju korištenje biblioteke 22

23 5. Izrada webgis aplikacije Izrada web aplikacije proces je koji se sastoji od više koraka. Prije svega, prikupljaju se podaci te pripremaju za unos u bazu podataka. Također, potrebno je izvršiti instalacije svih potrebnih alata te se tek tada može pristupiti pisanju koda aplikacije. 5.1.Prikupljanje podataka Za izradu rada prvenstveno je bilo potrebno prikupiti podatke o stanovništvu, odnosno njihovom ukupnom broju. Podaci su naknadno obrađeni kako bi se dobila gustoća stanovništva po određenim teritorijalnim jedinicama. Da bi se podaci prikazali na karti, prikupljene su također i granice županija te gradova i općina na području Hrvatske. Ovi geometrijski podaci preuzeti su u vektorskom obliku. Svi podaci korišteni u radu preuzeti su besplatno s određenih web stranica Statistički/atributni podaci Za početak preuzeti su statistički podaci s web stranice Državnog zavoda za statistiku ( DZS nudi korisnicima uvid u većinu podataka prikupljenih tijekom godina, od prvog popisa stanovništva godine do zadnjeg godine. Otvaranjem web stranice DZS-a, lako se uočava opcija za pregled baze podataka Zavoda. Unutar baze podataka, potrebni podaci razvrstani su u dvije glavne skupine: Naselja i stanovništvo Republike Hrvatske te Popis stanovništva Naselja i stanovništvo Republike Hrvatske sadrži prikupljene podatke o stanovništvu za sve popise stanovništva održane između godine i godine. Klikom na ime skupine, korisniku se otvara mogućnost preuzimanja općih informacija te informacija vezanih uz stanovništvo. Pod općim informacijama nalaze se podaci o površinama županija te broju gradova, općina, naselja i bivših naselja unutar njih. Pod informacijama vezanim uz stanovništvo nalaze se podaci o broju stanovnika, razvrstani posebno po županija, gradovima i općinama, naseljima te bivšim naseljima. Podaci o broju stanovnika preuzeti su za administrativnu podjelu na razini županija te za razinu gradova i općina. Preuzimanje podataka za županije vrši se na sljedeći način: - potrebno je odabrati za koje sve županije korisnik želi preuzeti podatke - potrebno je odabrati za koje sve godine popisivanja stanovništva korisnik želi preuzeti podatke - potrebno je odabrati između tablice na zaslonu i formata datoteke za preuzimanje podataka Obavezno je potrebno odabrati najmanje jednu županiju i najmanje jednu godinu za koju korisnik želi preuzeti podatke. Podaci su preuzeti u *.csv (Comma-separated values) datotekama, razdvojeni međusobno točkom sa zarezom i bez zaglavlja. 23

24 Pri odabiru podataka za administrativnu podjelu na gradove i općine preuzimanje se vrši na sličan način. Jedina je razlika što ove podatke nije moguće preuzeti sve odjednom u istoj *.csv datoteci. Naime, podaci za gradove i općine razdvojeni su te potom grupirani po županijama unutar kojih se gradovi i općine nalaze. Tako je u ovom slučaju bilo potrebno preuzeti 21 datoteku, za 20 županija i Grad Zagreb. Podaci Popisa stanovništva preuzimaju se odvojeno. U trenutku izrade ovog diplomskog rada još nisu obrađeni svi prikupljeni podaci te su javnosti dostupni samo prvi rezultati popisa: - Popisane osobe, kućanstva i stambene jedinice prema, prvi rezultati popisa po županijama - Popisane osobe, kućanstva i stambene jedinice prema, prvi rezultati popisa po naseljima - Popisane osobe, kućanstva i stambene jedinice prema, prvi rezultati popisa po gradskim četvrtima Grada Zagreba Pri odabiru podataka za županije, u ovom slučaju ne bira se godina popisa stanovništva, nego kriterij po kojem korisnik želi prikaz podataka (slika 6). Moguće je odabrati: popisane osobe ukupno broj stanovnika ukupno kućanstva ukupno privatna kućanstva stambene jedinice ukupno stambene jedinice stanovi za stalno stanovanje Slika 6. Preuzimanje statističkih podataka za godinu 24

25 Za potrebe ovog rada, preuzeti su podaci za ukupan broj stanovnika u 20 županija i Gradu Zagrebu. Podaci o stanovništvu po gradovima i općina za godinu nisu u trenutku izrade rada bili dostupni te se oni neće prikazivati Geometrijski/vektorski podaci Vektorski podaci preuzeti su u Shape formatu s web stranice Global Administrative Areas ( Global Administrative Areas (GADM) prostorna je baza podataka državnih administrativnih područja (ili administrativnih granica) za uporabu u GIS-u i sličnim softverima. Administrativna područja koja je moguće dobiti iz ove baze podataka su države te njihove podjele na manja područja. U slučaju Hrvatske, GADM nudi tri razine podjele teritorij države u cjelini (HRV_adm0.shp), podjela teritorija države na županije (HRV_adm1.shp) te podjela teritorija države na gradove i općine (HRV_adm2.shp). GADM uz sva administrativna područja daje i određene atribute, poput njihova naziva. Preuzimanje podataka s web stranice GADM-a vrlo je jednostavno. Korisnik samo mora odabrati državu koja ga zanima te odabrati format u kojem podatke želi preuzeti (slika 7). Za format podataka moguće je odabrati između: ESRI file geodatabasse Shapefile Geopackage (SpatiaLite) R (SpatialPolygonsDataFrame) Google Earth.kmz ESRI personal geodatabase Slika 7. Preuzimanje geometrijskih podataka 25

26 5.2. Priprema i obrada podataka Za spajanje podataka korišten je Quantum GIS (QGIS) softver. Kako bi se podaci što uspješnije spojili, potrebno ih je prvo odvojeno pripremiti. Za pripremu podataka za njihovo spajanje korišteni su Microsoft Excel i Notepad++. QGIS je korišten u verziji , a Excel iz Office paketa Spajanje statističkih i geometrijskih podataka Prvo je izvršeno spajanje podataka o županijama. S obzirom da su statistički podaci DZS-a za županije nakon preuzimanja razdvojeni u dva dokumenta, jedan s podacima popisa godine i drugi s podacima svih popisa održanih između i godine, prvi korak bio je spajanje svih podataka u jednu datoteku. To je izvršeno u Microsoft Excel-u. Novonastala datoteka s podacima svih provedenih popisa stanovništva potom je pohranjena u *.csv format, kako bi se mogla učitati u QGIS softver. Datoteka *.csv formata učitava se u QGIS pomoću naredbi: Sloj > Dodaj sloj > Add Delimited Text Layer. QGIS tada traži od korisnika da postavi standard za čitanje znakova u tekstualnoj datoteci koja se unosi. Od standarda koji podržavaju hrvatske dijakritičke znakove, moguće je odabrati Windows- 1250, ISO ili UTF-8. U ovom slučaju za hrvatske znakove korišten je standard Windows Za oblik datoteke odabire se Prilagođeni delimiteri te se za razdjelnik podataka označava Točka-zarez. U opcijama zapisa potrebno je postaviti da prvi zapis sadrži nazive polja, a za definiranje geometrije postavlja se kako geometrije nema, odnosno da tablica sadrži samo atribute. Zatim je u QGIS učitan vektorski sloj s granicama županija, originalno nazvan HRV_adm1.shp, pomoću naredbi Sloj > Dodaj sloj > Dodaj vektorski sloj. Nakon što je sloj dodan, naredbom Sloj > Open Attribute Table moguće je otvoriti atributne tablice. Unutar atributne tablice sloja, nakon pregleda svih atributa dobivenih s vektorskim podacima, izbrisani su svi nepotrebni stupci te ostavljen samo atribut imena županije. Također, ispravljene su sve pogreške u imenima, poput velikih i malih slova te pogrešaka u dijakritičkim znakovima. Kako bi se vektorski i statistički podaci uspješno spojili, nužno je da sva imena županija budu ispravno i jednako napisana u oba dodana sloja. QGIS u svome paketu sadrži ugrađenu opciju spajanja sloja s geometrijom i sloja s atributom. Odabirom Sloj > Osobine korisniku se otvara mogućnost uređivanja određenih osobina sloja, primjerice općenitih informacija vezanih uz sloj, stila, oznaka, načina prikaza i slično. Tu se također nalazi i opcija Spoji, kojom korisnik može sloju kojeg uređuje dodati atribute drugog sloja. Potrebno je odabrati Spoji > + (znak na dnu prozora). Tada se otvara novi prozor u kojem se odabire ime sloja čiji će se atributi pridodati uređivanom sloju. Nužno je postaviti polje spoja u sloju s atributima i ciljno polje u sloju s geometrijom, kao ključ po kojem će se podaci spojiti. Ovdje su za ključ odabrana 26

27 imena županija, pa su tako i za polje spoja u tekstualnom sloju i za ciljno polje u vektorskom sloju odabrani stupci s imenima županija (slika 8). Nakon odabire tipke OK, podaci su spojeni. Slika 8. Prikaz atributa tekstualnog sloja (lijevo) atributa vektorskog sloja (desno) prije spajanja Slika 9. Pregled atributne tablice vektorskog sloja nakon što su mu dodani atributi tekstualnog sloja Nakon uspješnog spajanja podataka za županije (slika 9), sličan postupak ponovljen je za općine i gradove. Pomoću Excel-a otvorena je 21 datoteka s podacima za županije i gradove preuzeta s web stranice DZS-a te su svi podaci spojeni u jedan dokument. Prilikom objedinjavanja ovih podataka uočeno je kako su sva imena gradova i općina u cijelosti napisana velikim slovima (slika 10), što kod 27

28 podataka za županije nije bio slučaj. Novonastali dokument pohranjen je u *.csv format, nakon čega je otvoren ponovo u programu Notepad++ kako bi se napravile korekcije na imenima gradova i općina. Naredbom Edit > Convert Case to > lowercase unutar programa Notepad++, sva velika slova pretvorena su u mala (slika 11). Zatim su ručno ispravljana prva slova u imenima, kako bi imena bila pravopisno ispravno napisana (slika 12). Datoteka je učitana u QGIS. Slika 10. Originalan izgled podataka Slika 11. Izgled podataka nakon izvršavanja naredbe Edit > Convert Case to > lowercase Slika 12. Izgled podataka nakon svih izvršenih korekcija Učitani su također i geometrijski podaci, originalnog imena HRV_adm2.shp, te su u atributnoj tablici izbrisani svi atributi osim imena županija i imena gradova i općina. Imena gradova i općina detaljno su pregledani i sve uočene pogreške su ispravljene. Radi spajanja sa statističkim podacima, ponovno je važno da sva imena budu ispravno napisana kako bi se mogla koristiti kao ključ po kojem će se podaci spojiti. Pomoću Sloj > Osobine > Spoji > + (znak na dnu prozora) otvara prozor unutar kojeg je moguće namjestiti spajanje atributa uređivanog geometrijskog sloja i atributa tekstualnog sloja. Ponovno su za polje spoja u tekstualnom sloju i ciljno polje u vektorskom sloju odabrani stupci s imenima općina i gradova. Odabirom tipke OK, podaci su spojeni. Oba geometrijska sloja, HRV_adm1 i HRV_adm2, koja nakon spajanja s tekstualnim slojevima u svojim atributnim tablicama sadrže i podatke popisa stanovništva, potrebno je pohraniti u nove ESRI Shapefile slojeve kako bi statistički podaci trajno ostali u njihovim atributnim tablicama. U suprotnome, ti podaci neće biti dostupni za uređivanje te će nestati u slučaju da se tekstualni sloj iz kojeg potječu ukloni ili izbriše. Novi slojevi nazvani su HRV_zupanije.shp i HRV_gradovi_opcine.shp. 28

29 Određivanje gustoće stanovništva teritorijalnih jedinica Gustoća stanovništva broj je stanovnika na jednom kvadratnom kilometru površine. Matematički se ona dobije dijeljenjem ukupnog broja stanovnika na nekom području s površinom tog područja. Dakle, za određivanje gustoće na teritoriju županija, gradova i općina koji će se prikazati u ovom radu, potrebno je poznavati površinu ovih teritorijalnih jedinica te broj stanovnika koji stanuje na njihovu teritoriju. Broj stanovnika preuzet je od DZS-a i već je u QGIS-u pridodan vektorskim slojevima HRV_zupanije i HRV_gradovi_opcine. Površinu je moguće jednostavno odrediti pomoću alata ugrađenih u QGIS. Otvorena je prvo atributna tablica sloja HRV_zupanije te je pokrenuto uređivanje sloja (Toogle Editing Mode). Unutar atributne tablice postoji opcija kalkulatora polja (Open field calculator). Kalkulator polja je alat koji omogućuje kreiranje novog stupca i određivanje vrijednosti njegovih polja pomoću raznih ugrađenih funkcija. Prvo je određen naziv novog stupca te kao tip podatka odabran Decimalni broj (realni), dužine 7 znamenaka, s preciznošću od dvije znamenke. Izraz za određivanje vrijednosti definiran je s $area. Unutar QGIS-a osnovna mjerna jedinica dužine je metar, pa tako ova funkcija površinu daje u kvadratnim metrima. Kako bi se pretvorila u kvadratne kilometre, vrijednost je podijeljena s Odabirom tipke OK, stvorene su vrijednosti površine za sve županije unutar sloja. Na isti način dobivene su vrijednosti površina gradova i općina u sloju HRV_gradovi_opcine. Pomoću kalkulatora polja definirani su i stupci s vrijednostima gustoće stanovništva. Za svaku godinu popisivanja stanovništva napravljen je izračun gustoće, pa je tako kreirano ukupno 16 novih stupaca za gustoće stanovništva tijekom godina u sloju HRV_zupanije i 15 novih stupaca za gustoće stanovništva tijekom godina u sloju HRV_gradovi_opcine. Naime, kao što je već spomenuto, podaci popisa godine za gradove i općine još nisu dostupni, dok za županije jesu. Unutar kalkulatora polja određeno je ime novog stupca te je kao tip podatka ponovno odabran Decimalni broj (realni), dužine 7 znamenaka, s preciznošću od dvije znamenke. Izraz za određivanje vrijednosti novog stupca definiran je omjerom vrijednosti stupca s brojem stanovnika određene godine i vrijednosti površine. Do imena stupaca koji se žele koristiti pri izračunu moguće je doći pod Field and Values. Nakon što oba sloja sadrže podatke o gustoćama stanovništva za sve godine popisivanja stanovništva, slojevi su spremni za unos u bazu podataka. U bazu se unose u ESRI Shape formatu. 29

30 5.3. Postavljanje PostgreSQL baze podataka i unos podataka PostgreSQL bazu podataka potrebno je instalirati i na web poslužitelju i lokalno na računalu. Lokalno računalo na kojem je rad izrađen koristi Window 7 operativni sustav, dok poslužitelj koristi Linux operativni sustav, odnosno njegovu verziju Ubuntu Kao poslužitelj koristi se Virtual Private Server (VPS), usluga Sveučilišnog računskog centra (Srca) koja ustanovama iz sustava znanosti i visokog obrazovanja omogućava upotrebu virtualnih poslužitelja. Poslužitelju, udaljenom Linux računalu, pristupano je pomoću PuTTY programa. Na službenim stranicama PostGIS-a ( postavljen je link s uputama za instaliranje PostGIS baze podataka na Linux operativnom sustavu. Link vodi na stranice OSGeo organizacije. Praćenjem uputa instalirani su PostgreSQL 9.5, PostGIS 2.2, i PGAdmin. Za početak je repozitorij dodan u sources.list: sudo sh -c 'echo "deb trusty-pgdg main" >> /etc/apt/sources.list' Unutar Linuxa, ova datoteka nalazi se u mapi apt, odnosno etc unutar root direktorija. Skraćenica etc dolazi od Et-Cetera, a sadrži sve konfiguracijske datoteke operacijskog sustava. Apt dolazi od Advanced Package Tool. Ova mapa zapravo je set temeljnih alata unutar Ubuntu-a te je ključna pri instalaciji i deinstalaciji aplikacija, kao i pri njihovom ažuriranju. U sklopu svog djelovanja, apt koristi datoteku s popisom izvora (engl. sources) iz kojih se mogu dobiti paketi. Ova datoteka upravo je /etc/apt/sources.list. Dodan je ključ za instalaciju te je pokrenuto preuzimanje paketa iz datoteke source.list pomoću naredbi: wget --quiet -O - sudo apt-key add - sudo apt-get update Instalacija svih potrebnih alata izvedena je istovremeno jednom naredbom: sudo apt-get install postgresql-9.5-postgis-2.2 pgadmin3 postgresql-contrib-9.5 Baza podataka u koju će se pripremljeni podaci pohraniti, naziva stanovnistvo, kreirana je također naredbama unutar PuTTY-a, pri čemu su korištene administratorske ovlasti (Adminpack): 30

31 sudo -u postgres psql CREATE EXTENSION adminpack; CREATE DATABASE stanovnistvo; CREATE EXTENSION postgis; SELECT postgis_full_version(); \connect stanovnistvo; Čim je baza podataka stanovnistvo kreirana, dodano joj je odmah i proširenje za prostorne podatke PostGIS. Korisnik postgres kreiran je pri instalaciji PostgreSQL-a. Nove korisnike moguće se naknadno definirati s: sudo su - postgres createuser -d -E -i -l -P -r -s imenovogkorisnika Time je instalacija PostgreSQL-a na web poslužitelju završena te se moglo pristupiti instalaciji na lokalnom računalu. S lokalnog računala moguće je spojiti se preko IP adrese poslužitelja domaćina (engl. Host) na bazu podataka stanovnistvo i u nju unijeti podatke. Kao što je već spomenuto, lokalno računalo na kojem je rad pripreman koristi kao operativni sustav Microsoft Windows 7 u 64-bit verziji. Instalater (engl. installer) za ovaj operativni sustav preuzet je sa službene web stranice PostgreSQL-a ( Odabrana verzija PostgreSQL-a je Version Daljnja instalacija potom je vrlo jednostavna. Nakon preuzimanja aplikacije, dvostrukim klikom pokrenut je čarobnjak za instalaciju PostgreSQL-a. Dvostrukim klikom na tipku Next, za direktorij instalacije i direktorij podataka prihvaćene su mape koje čarobnjak predlaže. Odabran su vrata (engl. port) 5432 te kao lokacija odabrana Hrvatska. Instalacija je tako mogla započeti. Po završetku instalacije otvoren je pgadminiii te je odabrana opcija dodavanja veze na poslužitelj (engl. Add a connection to a server). Podešene su potrebne postavke kao na slici 13: 31

32 Slika 13. Spajanje na bazu podataka na web poslužitelju Pomoću dodatka Shapefile GUI Loader pripremljeni slojevi HRV_zupanije i HRV_gradovi_opcine učitani su u bazu podataka stanovnistvo. Baza podataka također je povezana i s QGIS softverom, kako bi u slučaju potrebe za naknadnom korekcijom podataka, to bilo što lakše izvedivo. Povezivanje je napravljeno unutar QGIS-a naredbom Sloj > Dodaj sloj > Dodaj PostGIS slojeve te odabirom Nova veza. Potrebni podaci za uspostavu veze su uneseni i pohranjeni te je nova veza na bazu spremljena (slika 14). Slika 14. Povezivanje QGIS-a i baze podataka 32

33 5.4. Postavljanje GeoServera i unos podataka GeoServer je među popularnijim kartografskim poslužiteljima, prvenstveno zbog jednostavnog rukovanja njime. Upakiran je kao samostalan servlet za uporabu s postojećim aplikacijskim poslužiteljima, kao što su Tomcat ili Jetty. Korištene verzije alata su GeoServer i Apache Tomcat 7. Iako je Tomcat i GeoServer moguće instalirati na lokalnom računalu (localhost), za izradu ovog rada potrebne su bile samo instalacije na web poslužitelju. Prvo je izvršena instalacija Tomcata. Datoteka potrebna za instalaciju preuzeta je sa službene web stranice ( Preuzimanje datoteke i instalacija izvršeni su putem PuTTY-a: wget Preuzimanje je izvršeno Linuxovom naredbom wget, koja služi za ne-interaktivno preuzimanje podataka s web stranica. Preuzeta datoteka je formata.tar.gz te je potrebno raspakirati : tar xvzf apache-tomcat tar.gz Raspakirana mapa premještena je u /opt/tomcat direktori. Opt direktorij rezerviran je za sve softvere i dodatke koji nisu dio standardne instalacije. sudo mv apache-tomcat /opt/tomcat Prije uporabe Tomcata, nužno je instalirati Java Development Kit (JDK), što se lako izvrši slijedećom naredbom: apt-get install default-jdk Nakon instalacije JDK-a, pristupa se konfiguraciji *.bashrc datoteke. Potrebno je podesiti varijable okoline: vim ~/.bashrc Na dno datoteke dodaje se: export JAVA_HOME=/usr/lib/jvm/default-java export CATALINA_HOME=/opt/tomcat Promjene na datoteci se nakon uređivanja pohranjuju te je potom moguće vratiti se daljnjem upisivanju naredbi. Preostalo je još samo osvježiti promjene u datoteci te pokrenuti Tomcat :. ~/.bashrc $CATALINA_HOME/bin/startup.sh 33

34 Time je završeno instaliranje Tomcata i Jave te se moglo pristupiti instalaciji GeoServera. Datoteka za instalaciju preuzeta je sa službene stranice GeoServera ( ). Preuzeta je Web Archive verzija paketa, koja se odmah po preuzimanju raspakirava iz *.zip formata: wget unzip geoserver war.zip Alat se pokreće kopiranjem geoserver.war datoteke iz raspakirane *.zip datoteke u webapps mapu aplikacijskog poslužitelja, što je u ovom slučaju Tomcat: cp geoserver.war /opt/tomcat/webapps Za kraj, Tomcat je ugašen te ponovno upaljen kako bi se provedene promjene primijenile: sh /opt/tomcat/bin/shutdown.sh sh /opt/tomcat/bin/startup.sh GeoServer je tada instaliran, a Web sučelju (slika 15) pristupa se na adresi Slika 15. Web-sučelje GeoServer-a Otvaranjem web sučelja, korisniku se odmah nudi mogućnost logiranja. Za prvi put, korisnik kao korisničko ime treba upisati admin, a kao lozinku geoserver. Nakon prvog ulaska u svoj profil, poželjno je da korisnik promjeni lozinku i tako zaštiti svoj račun. Korisničko se ime ne mijenja. 34

35 Unos podataka u GeoServer Prvi korak pri radu s GeoServerom je kreiranje vlastitog radnog prostora. U izborniku s lijeve strane korisničkog sučelja, pod Data, nalazi se opcija Workspaces. U prozoru koji se otvara nakon klika na Workspaces, moguće je vidjeti popis svih već kreiranih radnih prostora. Također, nudi se i opcija kreiranja novog radnog prozora (engl. Add new workspace). Za kreiranje novog radnog prostora, potrebno je samo proizvoljno postaviti njegovo ime te dati mu neki jedinstven identifikator, primjerice URL adresu web stranice koja će koristit podatke tog radnog prostora. Kako bi se u radni prostor unijeli podaci, odabire se Data > Stores. Klikom na ovu opciju, otvara se prozor u kojem moguće vidjeti sve skupove podataka koji su već dostupni na GeoServeru. Također, nudi se opcija unosa novih podataka (engl. Add New Store). Moguće je unijeti podatke različitih formata, a u ovom radu korišten je unos podataka povezivanjem na bazu podataka. Na PostgreSQL, odnosno PostGIS, moguće je povezati se odabirom opcije PostGIS pri definiciji novog izvora podataka. U postavkama se potom odabire radni prostor u koji će se podaci pohraniti, proizvoljno se daje ime izvoru podataka te se potom postavljaju parametri veze na bazu. Time je stvorena veza između radnog prostora na GeoServeru i baze podataka u kojoj su podaci pohranjeni. Slojevi podataka kreiraju se odabirom Data > Layers. Prozor koji se otvara klikom na ovu opciju, nakon odabira radnog prostora i izvora podataka, nudi mogućnost objavljivanja (engl. Publish) slojeva generiranih na temelju tablica podataka u bazi. Također, korisnik je u mogućnosti i sam kreirati slojeve na temelju SQL upita koji će se izvršavati nad podacima dostupnima u bazi (engl. Configure new SQL view). Koristeći ovu opciju kreirani su slojevi za potrebe ovog diplomskog rada. Pomoću SQL upita kreirana su dva sloja jedan s podacima za županije i jedan s podacima za općine i gradove. SQL upiti prvenstveno omogućuju korisniku da za prikaz koristi samo određeni dio svojih podataka, no s njima je moguće vršiti i parametrizaciju prikaza. Parametrizacija prikaza bazirana je na SQL upitu koji sadrži imenovane parametre. Vrijednosti parametara mogu biti dodijeljene dinamički u WMS i WFS zahtjevima koristeći viewparams parametar unutar zahtjeva. Parametrima se mogu dodijeliti vrijednosti koje će imati u slučaju da ne budu zadane u zahtjevu (engl. Default values). SQL upiti za definiciju sloja s podacima o županijama: SELECT name_1 AS "Ime županije", area_km2 AS "Površina", gust_%god% AS gust_2011, geom FROM granice_zupanija Parametar unutar SQL upita označen je sa znakom %. U upitu za prikaz županija, jedini je parametar godina provođenja popisa stanovništva %god%. Za slučaj kada ne bude definiran unutar WMS ili WFS zahtjeva, postavljeno je da mu vrijednost bude

36 SQL upit za definiciju sloja s podacima o općinama: SELECT name_2 AS "Naziv", name_1 AS "Županija", area AS "Površina", gust_%god% AS gust_2001, geom FROM granice_gradovi_i_opcine WHERE id_1='%zup%' Za prikaz podataka o gradovima i općinama postavljena su dva parametra godina provođenja popisa stanovništva (%god%) te županija unutar koje se gradovi i općine nalaze (%zup%).. Ukoliko WMS ili WFS zahtjevom parametri ne budu definirani, postavljeno je da se prikazuje gustoća stanovništva gradova i općina u Zagrebačkoj županiji godine (slika 16). Slika 16. Definiranje SQL upita za prikaz podataka o općinama i gradovima Klikom na Save, parametarski SQL upiti su pohranjeni. Za konačno kreiranje slojeva, potrebno im je potom još proizvoljno dodijeliti ime, podesiti HTRS96/TM (EPSG:3765) kao referentni koordinatni sustav te namjestiti granični okvir (engl. Bounding Box). Ponovnim klikom na Save, slojevi su kreirani. Pod Data > Layer Preview moguće je vidjeti grafički prikaz kreiranih slojeva, pomoću ugrađene JavaScript kartografske biblioteke OpenLayers. Vrijednosti parametara mogu se mijenjati upisivanjem &viewparams=p1:v1;p2:v2;..., pri čemu su p1 i p2 imena parametara, a v1 i v2 vrijednosti koje se parametrima dodjeljuju. 36

37 Stilsko uređivanje slojeva Pod Data > Styles nalazi se popis svih slojeva već dostupnih na GeoServeru, koje je moguće dodjeljivati vlastitim podacima. Također, opcija Add a new style korisniku omogućuje da kreira vlastiti stil. Stil je moguće kreirati generirajući ga unutar GeoServera, uređujući neki od već postojećih slojeva, ručno upisujući kod ili učitavanjem vanjske datoteke u SLD formatu. Za potrebe ovog rada stil je kreiran u QGIS softveru, pohranjen u novu datoteku u *.sld formatu te tako učitan u GeoServer. Kreirana su dva stila, jedan za županije i jedan za općine i gradove. U QGIS-u je kreiranje stila vrlo jednostavno. Kako je QGIS već povezan s bazom podataka na poslužitelju, podacima se vrlo jednostavno pristupa. Naredbama Sloj > Osobine > Stil otvara se dijalog za uređivanje stila sloja. Pri uređivanju stila prvo je potrebno odabrati metodu po kojoj će se sloj stilizirati. Metoda Postupno nudi korisniku da kreira klase po kojima će podaci biti grupirani. Kao atribut po kojem će podaci biti klasificirani odabrana je gustoća stanovništva godine za županije i gustoća stanovništva godine kod gradova i županija. Granice klasa postavljene su ručno, a za boju prikaza odabrana je crvena boja, stupnjevana od izrazito svijetle nijanse za najrjeđe naseljena područja do tamne nijanse za ona najgušća područja (slika 17). Za granice klasa postavljeno je: Županije Gradovi i općine 1. klasa klasa klasa Rijetko naseljena 4. klasa područja 5. klasa klasa klasa klasa klasa Gusto naseljena 10. klasa područja 11. klasa klasa klasa Gusto naseljena 14. klasa područja 15. klasa klasa Izrazito gusto 17. klasa / naseljena područja Nakon postavljanja klasa, na dnu prozora moguće je odabrati Stil > Save Style > SLD File, nakon čega je stil pohranjen u *.sld datoteku. 37

38 Kao što je već spomenuto, stil se u GeoServer unosi odabirom Data > Styles > Add a new style. Na dnu otvorenog prozora nudi se mogućnost učitavanja *.sld datoteke. Ispravnost koda provjerena je sa Validate, nakon čega je stil pohranjen odabirom tipke Submit. Stil je potom potrebno dodijeliti sloju. Odabirom Data > Layer > 'Ime sloja' otvara se prozor za uređivanje sloja. Stil se dodaje na kartici Publishing, pod Default Style. Odabirom tipke Save, promjene su pohranjene. Slika 17. Definiranje sloja unutar QGIS softvera 38

39 5.5.Priprema za pisanje koda Kod aplikacije pisan je u besplatnom softveru Visual Studio Community To je softver namijenjen pisanju ASP.NET web stranica. Pri pisanju koda potrebno je poznavanje HTML-a i CSS-a, a kao programski jezik kod ASP.NET web stranice korišten je C#. Kako je Visual Studio softver koji je razvio Microsoft, moguće ga je instalirati samo na računalima s operativnim sustavom Microsoft Windows. Ipak, softverska platforma Mono Project omogućuje da se gotova ASP.NET web aplikacija može otvarati i na drugim operativnim sustavima, poput Linuxa. Platformu sponzorira Microsoft, no ona je otvorenog koda. Za pokretanje web stranice na web poslužitelju, čiji je operativni sustav Linux, nužna je instalacija ove platforme. Datoteke potrebne za instalaciju moguće je preuzeti sa službene web stranice ( Ipak, za potrebe ovog rada Mono Project instaliran je koristeći skriptu objavljenu na korisničkom profilu GitHub-a ( Prije samog pisanja koda potrebno je otvoriti Visual Studio. Visual Studio nudi korisničko sučelje slično ostalim alatima razvijenim u Microsoftu, poput Word-a ili Excel-a iz Microsoft Office Paketa. Odabirom File > New > Web Site otvara se prozor koji nudi predloške za kreiranje web stranice. Razlikuju se predlošci namijenjeni pisanju u C# programskom jeziku i predlošci za jezik Visual Basic. U radu je korišten C#, a od predložaka je odabran ASP.NET Empty Web Site. Stranici je proizvoljno dodijeljeno ime te je tipkom OK prazna web stranica kreirana. Visual Studio automatski je kreirao projekt istog imena, a unutar projekta, osim prazne web stranice, nalazi se i Web.config datoteka, također automatski generirana (slika 18). Slika 18. Korisničko sučelje Visual Studia nakon kreirana prazne web stranice 39

40 5.6. Pisanje koda webgis aplikacije Kreiranje web aplikacija složen je postupak, koji se u ovom slučaju sastojao od više koraka. Prvo je kreirana osnovna stranica (engl. Master Page). U njoj su postavljeni naziv web stranice te izbornik koji će korisniku nuditi opciju prikaza podataka po županijama i opciju prikaza podataka po gradovima i općinama. Kako bi se budućim korisnicima ukratko opisao projekt, u izborniku je dodana i opcija O projektu. Sljedeći korak bio je kreiranje stranice koja će prikazivati podatke o županijama. Ona se sastoji od dva dijela, prikaza podataka na karti i prikaza podataka na grafovima. Grafovi su kreirani pomoću Chart.js i jquery min.js biblioteka. Karta je kreirana koristeći OpenLayers biblioteku. Sličan postupak ponovljen je i kod kreiranja stranice za prikaz podataka o gradovima i općinama. I ona se sastoji od dva dijela, karte i grafa, kreirana istim principom kao kod županija. Za kraj, stvorena je posebna stranica, čija je svrha opis osnovnih podataka o projektu Kreiranje osnovne stranice web aplikacije Web aplikacija sastoji se od više elemenata, koji se u Visual Studiu dodaju pojedinačno. Dodavanje novih elemenata postiže se s Website > Add New Item. Kao prvi dio stranice koji će se kreirati, odabrano je zaglavlje web stranice, odnosno osnovna stranica, odabirom Master Page. Time je nastala nova datoteka formata *.master. Odmah po otvaranju nove datoteke, u osnovnoj stranici se već nalazi osnovna html struktura pri kreiranju stranice: <%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %> (HTML) <!DOCTYPE html> <html xmlns=" <head runat="server"> <title></title> <asp:contentplaceholder id="head" runat="server"> </asp:contentplaceholder> </head> <body> <form id="form1" runat="server"> <div> <asp:contentplaceholder id="body" runat="server"> </asp:contentplaceholder> </div> </form> </body> </html> 40

41 Iznad osnovne html strukture, nalazi se dodatni redak koda koji.net automatski dodaje za svoje uređaje. Osnovna stranica u kodu sadrži dva ContentPlaceHolder elementa koji rezerviraju prostor za sadržaj svih stranica koje će biti povezane na osnovnu stranicu. Ideja osnovne stranice je centralizirati zajedničke funkcionalnosti stranica koje čine web aplikaciju, kako se one ne bi morale unositi na svaku stranicu pojedinačno. Ukratko, osnovna stranica sadrži elemente koji su zajednički svim stranicama unutar web aplikacije. Pomoću ContentPlaceHolder elementa osnovna stranica povezuje se s ostalim stranicama te preuzima njihove elemente i prikazuje ih. Unutar ove stranice definirani su naslovnica web aplikacije te izbornik u kojem će se birati želi li se prikaz gustoće stanovništva po županijama ili prikaz po općinama. To je postignuto dodavanjem sljedećih linija koda unutar body elementa osnovne stranice: <div class="menu-wrapper"> <div class="menu"> <ul> <li><a class="active" href="#">pregled po županijama</a></li> <li><a href="#">pregled po općinama</a></li> <li><a href="#">o projektu</a></li> </ul> </div> </div> (HTML) <div class="header-wrapper"> <div class="logo"> <h1><span>gustoća stanovništva Hrvatske</span></h1> <h1>tijekom godina</h1> </div> <div class="right-panel university"> <h2>geodetski fakultet <br \ />Sveučilište u Zagrebu</h2> </div> </div> (HTML) Elementi su postavljeni u klase, kako bi ih se kasnije moglo stilizirati. Poveznice (engl. link) unutar izbornika za početak postavljene su kao slijepe poveznice, pošto još nisu kreirane stranice na koje bi trebale voditi. Također, na dno web stranice postavljena je obavijest budućim posjetiteljima, kako Geodetski fakultet zadržava autorska prava: (HTML) <div class="bottom"> <div class="content"> <p>copyright@<a href=" fakultet</a></p> </div> </div> 41

42 Kreiranje stranice za prikaz gustoće stanovništva po županijama Dodavanje nove stranice ovaj put vrši se pomoću Website > Add New Item > Web Form. Web forms su stranice za koje korisnici šalju zahtjeve unutar svojih web preglednika. Datoteci je potrebno dodijeliti ime te označiti Select Master Page kako bi se datoteku spojilo s osnovnom stranicom. Time nastaje nova datoteka formata *.aspx. Unutar nje, odmah po otvaranju, nalaze se elementi koji sadržaj stranice povezuju s osnovnom stranicom: <%@ Page Title="" Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> (HTML) <asp:content ID="Content1" ContentPlaceHolderID="head" Runat="Server"> </asp:content> <asp:content ID="Content2" ContentPlaceHolderID="body" Runat="Server"> </asp:content> Stranicu s podacima o županijama čine dva osnovna elementa, prikaz podataka na grafovima i prikaz podataka na karti. Njihov raspored na stranici postignut je pomoću Bootstrap radnog okvira (engl. framework) za HTML, CSS i JavaScript. Da bi se mogao koristiti, potrebno je ili preuzeti Bootstrap datoteku sa službene stranice ( ili unutar web koda stranice postaviti linkove na datoteke koje se nalaze na Internetu. Linkovi su postavljeni u head element osnovne stranice aplikacije sljedećim linijama koda: <!--Bootstrap--> (HTML) <link rel="stylesheet" href=" integrity="sha384-bvyiisifek1dgmjrakycuhahrg32omucww7on3rydg4va+pmstsz/k68vbdejh4u" crossorigin="anonymous"> <script src=" integrity="sha384-tc5iqib027qvyjsmfhjomalkfuwvxzxupncja7l2mcwnipg9mgcd8wgnicpd7txa" crossorigin="anonymous"></script> Tada je kreiran razmještaj elemenata na stranici: <asp:content ID="Content2" ContentPlaceHolderID="body" Runat="Server"> <div class="container-fluid"> <div class="row"> <div class="col-md-4 row-eq-height"> <div class="row"> <canvas id="grafgustocazazupaniju"> </canvas> </div> <div class="row"> <canvas id="grafgustocazagodinu"> </canvas> </div> </div> <div class="col-md-7 row-eq-height" style="float: right";> <div id="map"></div> </div> (HTML) 42

43 </div> </div> </asp:content> Grafovi su kreirani pomoću JavaScript biblioteke Chart.js, uz koju se koristi i jquery min.js biblioteka za postizanje dinamike grafa. Za kartografski prikaz podataka koristi OpenLayers biblioteka, također napisana jezikom JavaScript. Stiliziranje elemenata definirano je *.css datotekama. Svi navedeni elementi također su dodani kao vanjske datoteke unutar head elementa osnovne stranice. <! Grafovi--> <script src=" integrity="sha256- C6CB9UYIS9UJeqinPHWTHVqh/E1uhG5Twh+Y5qFQmYg=" crossorigin="anonymous"></script> <script src=" type="text/javascript"></script> (HTML) <!--OpenLayers--> <script rel =" <link rel="stylesheet" href=" /> Prikaz podataka na grafovima 1) SQL upiti Za prikaz podataka korištena su dva grafa. Prvi graf prikazuje kako se gustoća stanovništva pojedine županije mijenjala od prvog do zadnjeg popisa stanovništva. Drugi graf pak uspoređuje gustoće stanovništva svih županija istovremeno, no samo za pojedinu godinu. Podaci za grafove dobiveni su vršenjem upita nad bazom podataka. Upiti korišteni za kreiranje prvog i drugog grafa definirani su na sljedeći način: "SELECT gust_1857, gust_1869, gust_1880, gust_1890, gust_1900, gust_1910, gust_1921, gust_1931, gust_1948, gust_1953, gust_1961, gust_1971, gust_1981, gust_1991, gust_2001, gust_2011 FROM granice_zupanija WHERE id_1='" + id_zup + "' SELECT name_1, gust_ + godina FROM granice_zupanija ORDER BY name_1 (SQL) (SQL) U prvom upitu pozivaju se podaci gustoće stanovništva županija u svim godinama vršenja popisa, za županiju čiji je identifikacijski broj id_1 jednak vrijednosti parametra id_zup. Drugi upit odabire sve imena županija te gustoću za godinu vrijednosti parametra, nakon čega se imena županija redaju abecednim redom. 43

44 2) HTML - dodavanje izbornika iznad platna na kojima će se grafovi nalaziti Unutar HTML koda potom je potrebno postaviti izbornike u kojima će se birati parametri za postavljene SQL upite. Uz izbornik, u oba slučaja postavljen je i gumb (engl. button), čijim će pritiskom pokrenuti jquery AJAX poziv. Također, kako bi se grafovi mogli prikazati na sučelju stranice, potrebno je u HTML kodu postaviti i oznaku za platno (engl. canvas) po kojem će se grafovi crtati: <div class="row"> <select id="ddl_zupanije"> <option value="">županija:</option> <option selected="selected" value="1">zagebačka županija</option> <option value="2">krapinsko-zagorska županija</option> <option value="3">sisačko-moslavačka županija</option> <option value="4">karlovačka županija</option> <option value="5">varaždinska županija</option> <option value="6">koprivničko-križevačka županija</option> <option value="7">bjelovarsko-bilogorska županija</option> <option value="8">primorsko-goranska županija</option> <option value="9">ličko-senjska županija</option> <option value="10">virovitičko-podravka županija</option> <option value="11">požeško-slavonska županija</option> <option value="12">brodsko-posavska županija</option> <option value="13">zadarska županija</option> <option value="14">osječko-baranjska županija</option> <option value="15">šibensko-kninska županija</option> <option value="16">vukovarsko-srijemska županija</option> <option value="17">splitsko-dalmatinska županija</option> <option value="18">istarska županija</option> <option value="19">dubrovačko-neretvanska županija</option> <option value="20">međimurska županija</option> <option value="21">grad Zagreb</option> </select> <input id="btngustocazazupaniju" type="button" value="prikaži" /> </div> <div class="row"> <canvas id="grafgustocazazupaniju"> </canvas> </div> (HTML) Za izbornik je odabrana padajuća forma (engl. drop down list). Moguće je izabrati između 20 županija i Grada Zagreba, a vrijednost koja se prosljeđuje SQL upitu je redni broj županije, koji u ovom slučaju ima ulogu identifikacijskog broja. Izbornik za godinu vršenja popisa stanovništva također je padajućeg oblika: <div class="row"> <select id="ddl_godine"> <option value="">godina popisa stanovništva:</option> <option value="1857">1857. godina</option> <option value="1869">1869. godina</option> <option value="1880">1880. godina</option> <option value="1890">1890. godina</option> <option value="1900">1900. godina</option> <option value="1910">1910. godina</option> (HTML) 44

45 <option value="1921">1921. godina</option> <option value="1931">1931. godina</option> <option value="1948">1948. godina</option> <option value="1953">1953. godina</option> <option value="1961">1961. godina</option> <option value="1971">1971. godina</option> <option value="1981">1981. godina</option> <option value="1991">1991. godina</option> <option value="2001">2001. godina</option> <option selected="selected" value="2011">2011. godina</option> </select> <input id="btngustocazagodinu" type="button" value="prikaži"/> </div> <div class="row"> <canvas id="grafgustocazagodinu"> </canvas> </div> 3) Kod na strani klijenta Pozivanje jquery Ajax metode JQuery pruža funkcije za slanje HTTP GET i POST zahtjeva te podržava rad s JSON (JavaScript Object Notation) formatom. Ova funkcionalnost omogućuje slanje upita na REST (Representational State Transfer) pozadinu aplikacije. REST je arhitektonski stil, blisko vezan uz HTTP, putem kojeg klijent i poslužitelj mogu slati i primati podatke. Neke od funkcionalnosti koje jquery sadrži su odabir HTML elemenata, manipulacija HTML elementima i dodavanje animacija na web stranice. $("#btngustocazazupaniju").on('click', function () { var red_br = $("#ddl_zupanije").val(); if (!red_br) { alert("niste odabrali županiju.") return; } (JavaScript) var jsondata = JSON.stringify({ id_zup: red_br }); $.ajax({ }); type: "POST", url: "mywebservice.asmx/getgustocazazupaniju", data: jsondata, contenttype: "application/json; charset=utf-8", datatype: "json", success: OnSuccess, error: OnError function OnSuccess(response) { var adata = response.d; var alabels = adata[0]; var adataset = adata[1]; var data = { labels: alabels, 45

46 }; datasets: [{ label: "Gustoća stanovništva tijekom godina", fillcolor: "rgba(151,187,205,0.2)", strokecolor: "rgba(151,187,205,1)", pointcolor: "rgba(151,187,205,1)", pointstrokecolor: "#fff", pointhighlightfill: "#fff", pointhighlightstroke: "rgba(151,187,205,1)", data: adataset }] } var ctx = $("#grafgustocazazupaniju").get(0).getcontext('2d'); ctx.canvas.height = 70; // setting height of canvas ctx.canvas.width = 150; // setting width of canvas var linechart = new Chart(ctx, { type: 'line', data: data }); }); function OnError(response) { alert("veza s bazom podataka nije uspostavljena."); } Znak $ predstavlja jednu od funkcija jquery biblioteke. JQuery raščlanjuje tekst koji je proslijeđen ovoj funkciji te generira određenu seriju JavaScript funkcija kako bi odabrao zahtijevani element. Elemente je moguće odabrati preko njihovih identifikacijskih oznaka, klasa ili nekih njihovih osobina. Klikom na gumb čiji je identifikator jednak btngustocazazupaniju, pokreće se funkcija. Vrijednost odabranog parametra u padajućem izborniku s identifikatorom ddl_zupanije dodjeljuje se varijabli, čija se vrijednost potom pohranjuje u JSON format. Tako pohranjena, odabrana vrijednost prosljeđuje se Ajax pozivom u pozadinski kod. Uloga pozadinskog koda je da primi vrijednost odabranu u padajućem izborniku i ovisno o njoj vrati određene podatke. Ako se poziv uspješno izvrši i vrati te podatke, poziva se funkcija OnSuccess, koja potom iz dobivenih podataka generira graf i prikazuje ga na platnu s identifikatorom grafgustocazazupaniju. U slučaju neuspješnog poziva, odnosno ne vraćanja podataka nakon Ajax poziva, poziva se funkcija OnError, koja javlja kako je došlo do greške pri uspostavi veze s bazom podataka. Nakon izbora unutar drugog padajućeg izbornika, poziva se odvojena funkcija. Princip ove funkcije jednak je kao kod izbora unutar prvog padajućeg izbornika. Odabrana vrijednost se u JSON formatu prosljeđuje Ajax pozivom u pozadinski kod, koji vraća tražene podatke iz baze podataka. U slučaju uspješno izvršenog poziva, generira se graf. Prvi graf je linijskog tipa, dok je drugi graf horizontalni stupčani. 46

47 $("#btngustocazagodinu").on('click', function () { var god = $("#ddl_godine").val(); if (!god) { alert("niste odabrali godinu.") return; } (JavaScript) var jsondata = JSON.stringify({ godina: god }); $.ajax({ type: "POST", url: "mywebservice.asmx/getgustocazagodinu", data: jsondata, contenttype: "application/json; charset=utf-8", datatype: "json", success: OnSuccess, error: OnError }); function OnSuccess(response) { var adata = response.d; var alabels = adata[0]; var adataset = adata[1]; var data = { labels: alabels, datasets: [{ label: "Gustoća stanovništva po županijama", fillcolor: "rgba(151,187,205,0.2)", strokecolor: "rgba(151,187,205,1)", pointcolor: "rgba(151,187,205,1)", pointstrokecolor: "#fff", pointhighlightfill: "#fff", pointhighlightstroke: "rgba(151,187,205,1)", data: adataset }] }; var ctx = $("#grafgustocazagodinu").get(0).getcontext('2d'); ctx.canvas.height = 120; // setting height of canvas ctx.canvas.width = 150; // setting width of canvas var barchart = new Chart(ctx, { type: 'horizontalbar', data: data }); } }); function OnError(response) { alert("veza s bazom podataka nije uspostavljena."); } 4) Pozadinski kod Kreiranje Web Metode koja vraća potrebne podatke u JSON formatu Unutar Visual Studia kreira se nova datoteka za ovaj kod: Website > Add New Item > Web Service. Web servisi su komponente na web poslužitelju, koje klijentska aplikacija može pozivati slanjem HTTP zahtjeva preko Web-a. Uz dodjeljivanje imena nove datoteke, potrebno je također i označiti 47

48 Place code in a separate file. Tako istovremeno nastaju dvije nove datoteke jednakog imena, ali različitih ekstenzija jedna formata *.asmx i jedna formata *.cs. Unutar *.cs datoteke postavljen je sljedeći kod pisan u C# programskom jeziku: [WebMethod] public List<object> GetGustocaZaZupaniju(string id_zup) { List<object> result = new List<object>(); (C#) string querygustocazazupaniju = "SELECT gust_1857, gust_1869, gust_1880, gust_1890, gust_1900, gust_1910, gust_1921, gust_1931, gust_1948, gust_1953, gust_1961, gust_1971, gust_1981, gust_1991, gust_2001, gust_2011"; querygustocazazupaniju += " FROM granice_zupanija "; querygustocazazupaniju += " where id_1='" + id_zup + "' "; using (NpgsqlConnection con = new NpgsqlConnection( WebConfigurationManager.ConnectionStrings["db_stanovnistvo"].ConnectionString)) { con.open(); using (NpgsqlDataAdapter da = new NpgsqlDataAdapter(queryGustocaZaZupaniju, con)) { DataSet ds = new DataSet(); da.fill(ds); } List<string> labels = new List<string>(); foreach (DataColumn label in ds.tables[0].columns) { labels.add(string.format("{0}.", label.columnname.substring(5))); } result.add(labels); foreach (DataRow row in ds.tables[0].rows) { List<double> gustoce = new List<double>(); foreach (var gustoca in row.itemarray) { gustoce.add(convert.todouble(gustoca.tostring())); } result.add(gustoce); } } } return result; Kod u pozadini čini Web metoda, odnosno funkcija imena GetGustocaZaZupaniju. Ovo je funkcija koja se poziva s strane korisnika, pri čemu joj se prosljeđuje vrijednost odabrana u padajućem izborniku. Na temelju te vrijednosti, u pozadini se kreira upit, koji se potom vrši nad podacima u bazi podataka. Dobiveni rezultat upita vraća se kao odgovor natrag u kod na korisničkoj strani. 48

49 Na istom principu kreira se i druga Web metoda, odnosno funkcija GetGustocaZaGodinu: [WebMethod] public List<object> GetGustocaZaGodinu(string godina) { List<object> result = new List<object>(); (C#) string querygustocazagodinu = "SELECT name_1, gust_" + godina; querygustocazagodinu += " FROM granice_zupanija"; querygustocazagodinu += " ORDER BY name_1"; using (NpgsqlConnection con = new NpgsqlConnection( WebConfigurationManager.ConnectionStrings["db_stanovnistvo"].ConnectionString)) { con.open(); using (NpgsqlDataAdapter da = new NpgsqlDataAdapter(queryGustocaZaGodinu, con)) { DataSet ds = new DataSet(); da.fill(ds); List<string> labels = new List<string>(); List<double> gustoce = new List<double>(); } foreach (DataRow row in ds.tables[0].rows) { labels.add(row[0].tostring()); gustoce.add(convert.todouble(row[1].tostring())); } result.add(labels); result.add(gustoce); } } return result; } Prikaz podataka na karti Prikaz na karti kreiran je u cjelovitosti u JavaScript jeziku, koristeći OpenLayers biblioteku. Ideja karte je da prikaže površine županija obojane nijansama crvene boje, od najsvjetlije do izrazito tamne nijanse, ovisno o njihovoj gustoći rjeđe naseljene županije u svjetlijim nijansama, a gušće naseljene u tamnijim. Kartu čini više slojeva podataka, pri čemu svaki sloj predstavlja prikaz podataka za jednu godinu prikupljanja podataka o stanovništvu. Kako je na području Hrvatske popis stanovništva izvršen ukupno 16 puta, kartu čini jednako toliko slojeva. Izbornik, na kojoj korisnik može mijenjati godinu popisa stanovništva, smješten je na karti. Ova mogućnost mijenjanja slojeva ostvarena je koristeći skriptu ol3-layerswitcher.js preuzetu s web stranice GitHub ( Autor skripte je Matt Walker. Uz skriptu je preuzeta i datoteka za stiliziranje ol3-layerswitcher.css. 49

50 Obje datoteke postavljene su u head element osnovne stranice, zajedno s ostalim vanjskim izvorima: <! LayerSwitcher--> <script src="src/ol3-layerswitcher.js"></script> <link rel="stylesheet" href="src/ol3-layerswitcher.css" /> (HTML) Slojevi koje je moguće mijenjati pozivaju se putem WMS servisa s GeoServera. Svih 16 slojeva kreirano je pozivanjem istog sloja na GeoServeru. Kako je sloj na GeoServeru definiran SQL upitom koji u sebi sadrži parametar za godinu popisa stanovništva, svih 16 slojeva karte oslanja se na samo jedan sloj na GeoServeru, no s drugačijim parametrima. Unutar GeoServera sloju je već dodijeljen stil, kojim se podaci gustoće stanovništva klasiraju u 16 klasa. Osnovna forma kojom se definira nova karta osnovnih funkcionalnosti vidljiva je u sljedećem kodu: (function () { var map = new ol.map({ target: 'map', layers: [ new ol.layer.image({ type: 'base', source: new ol.source.imagewms({ url:' stanovnistvo/wms', params: { LAYERS: 'stanovnistvo:zupanijesql', VIEWPARAMS: 'god:1857' } }) }) ], view: new ol.view({ center: ol.proj.transform([16.5, 44.5], 'EPSG:4326', 'EPSG:3857'), zoom: 7 }) }); (JavaScript) Svaka oznaka ol ukazuje na korištenje OpenLayers funkcije. Konstruktor ol.map omogućuje kreiranje nove karte. Pri kreiranju karte, nužno je dodijeliti joj minimalno jedan sloj koji će biti prikazan (engl. layers) te definirati način prikaza karte (engl. view). Da bi se karta povezala s html kodovima, potrebno je definirati njezino ciljano mjesto (engl. target). Ako je unutar html koda napisano <div id= map ></div>, tada su karta, definirana JavaScript jezikom, i html div element povezani. Sloj je moguće kreirati na više načina. Konkretno u ovom primjeru korištena je funkcija ol.layer.image. Pri definiciji sloja, nužno je postaviti njegov izvor (engl. source). Izvoru se također može pristupati na različite načine. U ovom projektu uvijek je korišteno povezivanje putem URL adrese i određenih parametara. Pri prikazu teritorija Države s podjelom na županije, postoji samo jedan parametar godina koje je popis izvršen. 50

51 Na isti način kao što je u primjeru kreiran sloj s podacima za godinu, kreirano je još 15 slojeva, za 15 preostalih cenzusa. Kao što je već spomenuto, izmjena slojeva omogućena je odvojenom skriptom ol3-layerswitcher.js. Ipak, ovu kontrolu karte potrebno je još odvojeno dodati karti. Dovoljno je napisati sljedeće: var layerswitcher = new ol.control.layerswitcher({ tiplabel: 'Légende' // Optional label for button }); map.addcontrol(layerswitcher); (JavaScript) Također, da bi se slojevi mogli izmjenjivati, moraju svi biti okupljeni unutar iste grupe te moraju biti tipa base, što onemogućuje preklapanje podataka. Isječak iz koda gdje je definirana grupa slojeva prikazana je u nastavku: var map = new ol.map({ target: 'map', layers: [ new ol.layer.image({ title: '1857. godina', type: 'base', visible: false, source: new ol.source.imagewms({ url: ' stanovnistvo/wms', params: { LAYERS: 'stanovnistvo:zupanijesql', VIEWPARAMS: 'god:1857' } }) }),... new ol.layer.image({ title: '2011. godina', type: 'base', visible: true, source: new ol.source.imagewms({ url: ' stanovnistvo/wms', params: { LAYERS: 'stanovnistvo:zupanijesql', VIEWPARAMS: 'god:2011' } }) }) ] (JavaScript) }) ], view: new ol.view({ center: ol.proj.transform([16.5, 44.5], 'EPSG:4326', 'EPSG:3857'), zoom: 7 }) }); 51

52 Kreiranje stranice za prikaz gustoće stanovništva po gradovima i općinama Stranica s prikazom podataka za gradove i općine pripremljena je na gotovo isti način kao prethodno opisana stranica s podacima o županijama. Nova stranica dodana je pomoću Website > Add New Item > Web Form. Datoteci je potrebno dodijeliti ime te označiti Select Master Page kako bi se datoteku povezalo s osnovnom stranicom. Time nastaje nova datoteka formata *.aspx. Tek kreirana stranica odmah u sebi sadrži elementi koji sadržaj ove stranice povezuju s osnovnom stranicom: (HTML) <%@ Page Title="" Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" CodeFile="Gradovi_opcine.aspx.cs" Inherits="Gradovi_opcine" %> <asp:content ID="Content1" ContentPlaceHolderID="title" runat="server"> </asp:content> <asp:content ID="Content2" ContentPlaceHolderID="body" Runat="Server"> </asp:content> Koncept ove stranice ostvaren je slično kao kod prethodno opisane stranice o županijama. Čine ju dva dijela prikaz podataka na karti i prikaz podataka pomoću grafa. U ovom slučaju korišten je samo jedan graf, koji se generira ovisno o dva padajuća izbornika. Unutar jednog izbornika bira se županija za koju korisnik želi prikaz svih njezinih gradova i općina, dok se drugim izbornikom bira godina popisivanja stanovništva za koju će se podaci gustoće stanovništva gradova i općina prikazati. Prikaz podataka na karti također ovisi o odabiru županije unutar prvog izbornika. Naime, nakon odabira županije, na karti se prikazuju gradovi i općine samo unutar te županije. Karta ne ovisi o izborniku za godinu popisa stanovništva, nego sadrži vlastiti izbornik slojeva, pri čemu svaki sloj predstavlja podatke za jednu godinu popisivanja stanovništva. Osnovna forma stranice predstavljena je sljedećim kodom: <asp:content ID="Content2" ContentPlaceHolderID="body" Runat="Server"> <div class="container-fluid"> <div class="row"> <div class="col-md-4 row-eq-height"> <canvas id="grafgustocazagradove"> </canvas> </div> <div class="col-md-7 row-eq-height" style="float: right";> <div id="map"></div> </div> </div> </div> </asp:content> (HTML) 52

53 Prikaz podataka na grafovima 1) SQL upiti Podaci gustoće stanovništva za gradove i općine prikazuju se samo na jednom grafu, pa je stoga potreban samo jedan SQL upit. Ipak, ovaj upit sadrži dva parametra identifikacijski broj županije i godinu popisivanja stanovništva: SELECT name_2, gust_ + godina FROM granice_gradovi_i_opcine WHERE id_1='" + id_zup + "'" ORDER BY name_2" (SQL) 2) HTML - dodavanje izbornika iznad platna na kojima će se grafovi nalaziti Parametrima unutar SQL upita prosljeđuju se vrijednosti odabrane u padajućim izbornicima. Kako postoje dva parametra, kreirana su i dva padajuća izbornika. Unutar prvog izbornika odabire se županija čiji su gradovi i općine predmet interesa korisnika. Upitu se prosljeđuje identifikacijski broj županije, odnosno njezin redni broj po službenoj dokumentaciji Republike Hrvatske koji u ovoj projektu ima ulogu identifikacijske oznake županija. Drugim izbornikom određuje se godina za koju korisnik želi prikaz podataka. Odmah uz izbornike postavljeno je i platno za crtanje grafa: (HTML) <asp:content ID="Content3" ContentPlaceHolderID="contentBody" Runat="Server"> <div class="container-fluid wrapper"> <div class="clearing"></div> <div class="row panel-wrapper"> <div class="col-md-4 row-eq-height" style="float: left; margin-left: 3px;"> <div class="row"> <select id="ddl_zupanije"> <option value="">odaberite županiju:</option> <option selected="selected" value="1">zagebačka županija</option> <option value="2">krapinsko-zagorska županija</option> <option value="3">sisačko-moslavačka županija</option> <option value="4">karlovačka županija</option> <option value="5">varaždinska županija</option> <option value="6">koprivničko-križevačka županija</option> <option value="7">bjelovarsko-bilogorska županija</option> <option value="8">primorsko-goranska županija</option> <option value="9">ličko-senjska županija</option> <option value="10">virovitičko-podravka županija</option> <option value="11">požeško-slavonska županija</option> <option value="12">brodsko-posavska županija</option> <option value="13">zadarska županija</option> <option value="14">osječko-baranjska županija</option> <option value="15">šibensko-kninska županija</option> <option value="16">vukovarsko-srijemska županija</option> <option value="17">splitsko-dalmatinska županija</option> <option value="18">istarska županija</option> <option value="19">dubrovačko-neretvanska županija</option> <option value="20">međimurska županija</option> 53

54 <option value="21">grad Zagreb</option> </select> <select id="ddl_godine"> <option value="">odaberite godinu:</option> <option value="1857">1857. godina</option> <option value="1869">1869. godina</option> <option value="1880">1880. godina</option> <option value="1890">1890. godina</option> <option value="1900">1900. godina</option> <option value="1910">1910. godina</option> <option value="1921">1921. godina</option> <option value="1931">1931. godina</option> <option value="1948">1948. godina</option> <option value="1953">1953. godina</option> <option value="1961">1961. godina</option> <option value="1971">1971. godina</option> <option value="1981">1981. godina</option> <option value="1991">1991. godina</option> <option selected="selected" value="2001">2001. godina</option> </select> <input id="btngustocazagradove" type="button" value="prikaži" /> </div> <div class="row"> <canvas id="grafgustocazagradove"> </canvas> </div> </div> <div class="col-md-7 row-eq-height" style="float: right";> <div id="map"> <script src=" </div> </div> </div> </div> </asp:content> 3) Kod na strani klijenta Pozivanje jquery Ajax metode Prijenos vrijednosti od izbornika do SQL upita, koji će se vršiti nad bazom podataka, ostvaren je ponovno pomoću jquery.js biblioteke, odnosno njezine Ajax metode: $("#btngustocazagradove").on('click', function () { var red_br = $("#ddl_zupanije").val(); if (!red_br) { alert("niste odabrali županiju.") return; } var god = $("#ddl_godine").val(); if (!god) { alert("niste odabrali godinu.") return; } (JavaScript) var jsondata = JSON.stringify({ zupanija:red_br, godina: god }); 54

55 $.ajax({ type: "POST", url: "MyWebService2.asmx/GetGustocaZaGradove", data: jsondata, contenttype: "application/json; charset=utf-8", datatype: "json", success: OnSuccess, error: OnError }); function OnSuccess(response) { var adata = response.d; var alabels = adata[0]; var adataset = adata[1]; var data = { labels: alabels, datasets: [{ label: "Broj stanovnika po kvadratnom kilometru", fillcolor: "rgba(151,187,205,0.2)", strokecolor: "rgba(151,187,205,1)", pointcolor: "rgba(151,187,205,1)", pointstrokecolor: "#fff", pointhighlightfill: "#fff", pointhighlightstroke: "rgba(151,187,205,1)", data: adataset }] }; var ctx = $("#grafgustocazagradove").get(0).getcontext('2d'); ctx.canvas.height = 220; ctx.canvas.width = 150; var barchart = new Chart(ctx, { type: 'horizontalbar', data: data }); } function OnError(response) { alert("veza s bazom podataka nije uspostavljena."); } $("#map").empty(); var script = document.createelement('script'); script.src = " + ".js"; $("#map").append(script); }); }); Pritiskom tipke s identifikatorom btngustocazagradove pokreće se funkcija. Vrijednosti odabrane u izbornicima tada se pohranjuju u JSON format. Ajax metodom se vrijednost u JSON formatu prosljeđuju web metodi GetGustocaZaGradove definiranoj u pozadinskom kodu, koja vraća rezultat SQL upita nad bazom podataka. Ako je Ajax poziv uspješno izvršen, započinje kreiranje grafa. Za tip grafa postavljen je horizontalni stupčani prikaz. 55

56 4) Pozadinski kod Kreiranje Web Metode koja vraća potrebne podatke u JSON formatu Kod u pozadini ponovno je napisan C# programskim jezikom, u novoj datoteci: Website > Add New Item > Web Service, pri čemu je označena opcija Place code in a separate file. Uspostavljena je veza s bazom podataka te je izvršen SQL upit. Ova metoda korištena je za dobavljanje i podataka o gustoći stanovništva i imena gradova i općina, kojima te gustoće pripadaju. [WebMethod] public List<object> GetGustocaZaGradove(string zupanija, string godina) { List<object> result = new List<object>(); (C#) string querygustocazagradove = "SELECT name_2, gust_" + godina; querygustocazagradove += " FROM granice_gradovi_i_opcine"; querygustocazagradove += " WHERE id_1='" + zupanija + "'"; querygustocazagradove += " ORDER BY name_2"; using (NpgsqlConnection con = new NpgsqlConnection( WebConfigurationManager.ConnectionStrings["db_stanovnistvo"].ConnectionString)) { con.open(); using (NpgsqlDataAdapter da = new NpgsqlDataAdapter(queryGustocaZaGradove, con)) { DataSet ds = new DataSet(); da.fill(ds); List<object> labels = new List<object>(); List<object> gustoce = new List<object>(); foreach (DataRow row in ds.tables[0].rows) { labels.add(row[0].tostring()); gustoce.add(convert.todouble(row[1].tostring())); } } result.add(labels); result.add(gustoce); } } return result; Za uspostavu veze s PostgreSQL bazom podataka korištena je Npgsql.dll biblioteka za dinamičko povezivanje (engl. Dynamic-link library). Podaci o adresi poslužitelja, vratima (engl. Port), korisničkom imenu i lozinki potrebnima za pristup bazi te ime baze kojoj se pristupa uneseni su u Web.config datoteku. Ova datoteka stvorena je automatski pri prvom otvaranju novoj projekta. (XML) <connectionstrings> <add name="db_stanovnistvo" connectionstring="server= ;port=5432;user Id='name'; Password=XXXX;Database=stanovnistvo;" /> </connectionstrings> 56

57 Prikaz podataka na karti Ovisno o odabiru županije u izborniku postavljenom uz graf, stranica prikazuje drugačiju kartu. Za svaku županiju, karta je kreirana u posebnoj skripti. Ukupno, dakle, za ovu stranicu postoji 21 kreirana skripta, tj. 21 karta. Sve skripte i sve karte kreirane su na isti način, jedina je razlika između njih što su njihovi slojevi pozivani drugačijim parametrima i što je centar pregleda karte definiran koordinatama drugačijih točaka. Sličnost definicije slojeva vidljiva je u sljedećim kodovima: Zagrebačka županija (id=1) new ol.layer.image({ title: '2001. godina', type: 'base', visible: true, source: new ol.source.imagewms({ url: ' geoserver/stanovnistvo/wms', params: { LAYERS: 'stanovnistvo:gradovisql', VIEWPARAMS: 'god:2001;zup:1' } }) }) Dubrovačko-neretvanska županija (id=2) new ol.layer.image({ title: '2001. godina', type: 'base', visible: true, source: new ol.source.imagewms({ url: ' geoserver/stanovnistvo/wms', params: { LAYERS: 'stanovnistvo:gradovisql', VIEWPARAMS: 'god:2001;zup:19' } }) }) Svi slojevi svih kreiranih karata definirani su dvama parametrima. Prvi parametar je jednak kao kod prikaza karte za županije godina popisa stanovništva. Drugi parametar je identifikacijski broj županije, odnosno njezin redni broj prema službenoj državnoj dokumentaciji. Unutar jedne skripte, koja definira kartu gradova i općina unutar jedne određene županije, definirano je 15 slojeva. Ponovno svaki sloj prikazuje podatke za jednu godinu popisivanja stanovništva. Svi ti slojevi unutar jedne karte imaju jednaku vrijednost za parametar identifikatora županije, dok je vrijednost parametra za godinu popisa drugačija za svaki sloj. Slojevi unutar karte mijenjaju se ponovno izbornikom, koji je sastavni dio karte, te je kreiran koristeći skriptu ol3-layerswitcher.js. Centar prikaza karte definiran je u otprilike u centroidima županija, stoga svaka karta ima drugačije koordinate centra. Službeni koordinatni sustav OpenLayers biblioteke je WGS84 (EPSG=4326), pa se stoga koordinate upisuju u stupnjevima. No kako su podaci prikaza definirani u HTRS96 (EPSG=3857) koordinatnom sustavu, OpenLayers metodom potrebno je koordinate transformirati u ovaj koordinatni sustav. Gdje je potrebno, i mjerilo je prilagođeno obliku županije, kako bi sve općine i gradovi bili vidljivi na karti. Zagrebačka županija: view: new ol.view({ center: ol.proj.transform([16.063, ], 'EPSG:4326', 'EPSG:3857'), zoom: 9 }) 57

58 Dubrovačko neretvanska županija: view: new ol.view({ center: ol.proj.transform([17.600,42.859], 'EPSG:4326', 'EPSG:3857'), zoom: 8.5 }) Izmjena karata postignuta je pomoću metoda jquery biblioteke. Naime, sve skripte u kojima su kreirane karte nazvane su maps_'njihovid'.js. Zahvaljujući tome, pri pozivanju izvora skripte, moguće je koristiti parametar kako bi se uvijek prikazivala samo jedna karta, za županiju koja je odabrana u izborniku: (JavaScript) $("#map").empty(); var script = document.createelement('script'); script.src = " + red_br + ".js"; $("#map").append(script); Kreiranje stranice s opisom projekta Za kraj, na web stranici postavljene su i osnovne informacije o tome kako je stranica nastala i u koje svrhe. Naveden je autor i mentori pri izradi ovog diplomskog rada te je postavljen tekst rada u *.pdf formatu za one željne više detalja. Također, navedeni su i izvori podataka korištenih pri izradi projekta: (HTML) <asp:content ID="Content2" ContentPlaceHolderID="contentBody" Runat="Server"> <div class="container-fluid wrapper"> <div class="row special-wrapper"> <h4>ova web aplikacija izrađena je kao dio diplomskog rada <span>"webgis gustoće stanovništva Hrvatske"</span></h4> <h4>izradila: Lovorka Bošković</h4> <h4>mentor: Doc. dr. sc. Dubravko Gajski</h4> <h4>drugi mentor: Dr.sc. Mateo Gašparović</h4> <h4>voditelj: Dr.sc. Mateo Gašparović</h4> <h4><span>geodetski fakultet</span></h4> <h4><span>sveučilište u Zagrebu</span></h4> <h4>akademska godina: 2015./2016.</h4> <h4>diplomski rad u cijelosti moguće je pročitati <a href="tekst.pdf">ovdje</a></h4> <h4>izvori korištenih podataka:</h4> <h4>podaci o stanovništvu: <a href=" zavod za statistiku</a></h4> <h4>geometrijski podaci: <a href=" Administrative Areas</a></h4> <h4>pri izradi ove web aplikacije korišteni su isključivo besplatni alati otvorenog koda.</h4> </div> </div> </asp:content> 58

59 5.7. Prikaz konačnog rezultata Uz dodatno stiliziranje pozadine web aplikacije, postignut je konačan cilj projekta. Aplikacija je postavljena na web te joj svi mogu pristupit ( U nastavku je moguće vidjeti konačan izgled grafova (slika 19) i karte (slika 20) pri prikazu podataka po županijama. Slika 19. Prikaz grafova kreirane web aplikacije (prikaz po županijama) 59

60 Slika 20. Prikaz karte kreirane web aplikacije (pikaz po županijama) Izgled web aplikacije, odnosno njezine stranice za prikaz po županijama, moguće je u cijelosti vidjeti na slici 21. Slika 21. Prikaz cjelovite stranice s pregledom podataka po županijama 60

61 Na stranici s prikazom podataka po gradovima i općinama, dizajn elemenata je vrlo sličan. Na slici 22 i slici 23 moguće je vidjeti kako graf i karta izgledaju na stranici otvorenoj unutar web preglednika. Cjeloviti izgled stranice moguće je vidjeti na slici 24. Slika 22. Prikaz grafova kreirane web aplikacije (prikaz po gradovima i općinama) 61

62 Slika 23. Prikaz karte Zagrebačke županije na web aplikaciji (pikaz po općinama) Slika 24. Prikaz cjelovite stranice s pregledom podataka po gradovima i općinama 62