GEO2311. Obligatorisk Innlevering 1

Størrelse: px

Begynne med side:

Download "GEO2311. Obligatorisk Innlevering 1"

Rebecca Christiansen
8 år siden
Visninger:

1 GEO2311 Obligatorisk Innlevering 1 STUDENTER: Kia Simonsen Morten Kappelslåen Gjøvik, Side 1 av 11

2 Innholdsfortegnelse Introduksjon... 3 Del 2 - HTML delen... 4 Del 2 - CSS delen... 9 Del 3 - API Del 3 - Analyse Side 2 av 11

3 Introduksjon Hele obligen er tilgjengelig på våre respektive nettsider: Morten: og Kia: Der finner du linker til samtlige deler av obligen. Men for å sikre at vi ikke kan endre filer etter innlevering, leveres samtlige filer i Fronter. Dette dokumentet inneholder detaljert beskrivelse og forklaring på HTML, CSS, Java, og API. I tillegg er en utredelse av analysen av turdataene gjort i Excel for Del 3. Side 3 av 11

Men for å sikre at vi ikke kan endre filer etter innlevering, leveres samtlige filer i Fronter.

4 Del 2 - HTML delen HTML Forklaring <!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="styles.css"> <title>oblig 1, Geografiske informasjonsbehandling</title> <meta name="viewport" content="initial-scale=1.0"> <meta charset="utf-8"> </head> <body> <h1>del 1 - To webkart på én side</h1> Startkode til et html dokument Her stater HTML en Head er den bestemmende del til HTML koden. Her ligges alle regler til ting og link til andre filer inn. Dette er linken til CSS filen som står for sidens designe og oppsett Tittel er et navn vi gir prosjektet, dette påkrevet i alle HTML dokumenter. Tittel tag et et definerer tittelen på dokumentet og bruges bl.a. i browser verktøyet Denne meta tag gjør nettsiden tilpasningsdyktig til forskjellige skjerm størrelser (for eksempel mobil internett) UTF-8 er den html versjon som kan forstå norske æ ø å bokstaver Slutt på head Korpen på HTML en starter. Her ligger alle koderne og selve innholdet i HTML filen. <h1/> er forkortelsen for heading 1, som er en overskrift. Der er 4 i alt med hver deres størrelser. Størrelsen er underordnet da vi definere den i CSS-filen. Side 4 av 11

0"> <meta charset="utf-8"> </head> <body> <h1>del 1 - To webkart på én side</h1> Startkode til et html dokument Her stater HTML en Head er den bestemmende del til HTML koden.

5 <h2>lillehammer</h2> <p><strong> Lillehammer er en kommune sør for Gudbrandsdalen i Oppland, ved nordenden av Mjøsa. </strong><br> Den grenser i nord mot Øyer, i sørøst mot Ringsaker, i sør mot Gjøvik, i sørvest mot Nordre Land, og i vest mot Gausdal. Sentrum, Nordre/Søre Ål, Røyslimoen og Vårsetergrenda ligger på østsiden der Lågen renner ut i Mjøsa. Jørstadmoen, Fåberg og Rudsbygd ligger nord for Sentrum, og Vingnes på vestsiden av Mjøsa. Lillehammer blir også kalt «dølabyen» ut fra sin sin beliggenhet ved inngangsporten til Gudbrandsdalen.<br> Kilde: <a href=" Overskrift h2 <p> er en paragraf/en teks sekvens. <strong> funksjonen gjør innholdets tekst Fet. Br er linjeskift, så der er mellomrom mellom tekstens over og under del. <a> er et link til en hjemmeside, i dette tilfelle til wikipedia. Linket ligger som en attributt inne i elementet. Navnet på linket er element innholdet. <br> </p> <h3>plassering i landet</h3> <div id="googlemap"> <script> var lhmr = lat: , lng: ; var map; function initmap() Slutt på teks sekvens Linjeskift Overskrift 3 Inne i div defineres vår googlemap s id Her starter java script et Var lhmr = setter en variabel. Variabelen inneholder koordinatene latitude og longitude for hvor kortet skal starte. Katet tegnes ut fra nederst venstre hjørne. Variabelen map settes Map inneholder en funksjon som vi gir navnet initmap, og den har ingen parameter inne i paratesen. indikerer at funksjonens innhold starter her Side 5 av 11

Sentrum, Nordre/Søre Ål, Røyslimoen og Vårsetergrenda ligger på østsiden der Lågen renner ut i Mjøsa. Jørstadmoen, Fåberg og Rudsbygd ligger nord for Sentrum, og Vingnes på vestsiden av Mjøsa.

6 map = new google.maps.map(document.getelementbyid('googlemap'), center: lhmr, zoom: 6, //maptypeid: google.maps.maptypeid.satellite, maptypeid: google.maps.maptypeid.terrain ); //Legger til rektangel var rectangle = new google.maps.rectangle( strokecolor: '#FF0000', strokeopacity: 0.8, strokeweight: 3, fillcolor: '#FF0000', fillopacity: 0.00, map: map, bounds: Map som vi tidligere har definert, henter kartet i google maps lhmr som vi tidligere definert, bruger vi til at fortelle hvad som skal vises på kartet. Zoom nivået skal være 6 Karttypen indikeres her, som enten satellitt bilde Eller terreng Her legges et rektangel til kartet En variabel defineres til rectangle som er lig med en rektangel funktion fra google map. Omriss Fargen Omriss gjennomsiktigheten Omriss tykkelsen Fyll fargen Fyll gjennomsiktigheten Vi bruker variabelen map (vår google map) til bakgrund til rektaglen Utbredelse på rektanglet (størrelsen) //Mindre rektangel /* north: , south: , En lille rektangel. Satt inn som note for at den ikke skal leses Side 6 av 11

00, map: map, bounds: Map som vi tidligere har definert, henter kartet i google maps lhmr som vi tidligere definert, bruger vi til at fortelle hvad som skal vises på kartet.

7 east: , west: */ //Større rektangel north: , south: , east: , west: ); </script> </div> En større rektangel (den vi bruker) Javaskript slut Div slut <script src=" FTbVbbv7Kracd8vs62Vhn09b81U&callback=initMap" async defer> Javaskript start Key = er API nøkkelen som er vår tillatelse til at bruke google map Denne del av javaskripen siger at kartet skal lastet til sist. Dette gjør nettsiden mindre tung at laste. <br> <br> <br> </script> <h3>kommunekart</h3> <div id="wms_lhmr"> Javaskript slut Linjeskift Linjeskift Linjeskift En ny overskrift Inne i div defineres vår WMS karts id Side 7 av 11

key=aizasydcvvo- FTbVbbv7Kracd8vs62Vhn09b81U&callback=initMap" async defer> Javaskript start Key = er API nøkkelen som er vår tillatelse til at bruke google map Denne del av

8 <img src=" &REQUEST=GetMap &CRS=EPSG:32633 &BBOX= , , , &WIDTH=600 &HEIGHT=400 &LAYERS=topo2_WMS &FORMAT=image/png "/> </div> Vi bruker bilde taget til å vise WMS-kart Her er linket WMS kartet kommer fra (statens kartverk) Versjonen Kommandoen til at hente overnevnte kart Bestemmelse av hvilket koordinatsystem som vi vil bruke. Koordinatene til kartes venstre- og høgre nedre hjørne. Kartets brede i pixel Kartets høgde i pixel WMS laget er et topografisk lag Og formatet er et bilde (.png) Slutt på bilde tagen Slutt på div en <br> Linjeskift <a href="javascript:javascript:history.go(-1)">tilbake til hovedmeny</a> </body> </html> Vi bruker her et link tag til å sette inn en javaskrit som gjør det mulig at gå en web Page tilbake. Navnet på tagen bliver sa tind som element innholdet Slutt på html kroppen Slutt på html filen Side 8 av 11

hente overnevnte kart Bestemmelse av hvilket koordinatsystem som vi vil bruke. Koordinatene til kartes venstre- og høgre nedre hjørne.

9 Del 2 - CSS delen /* Base styles */ CSS Kommentar til os selv Forklaring html, body margin: 15px; padding: 0; color: #333; background-color: #eee; Hele html kroppen får definert en felles «style» her margin på 15 pixel mellomrum fra rammen til 0 (da der ikke er en ramme) fargen til svart bakgrunds farge til lysegrå font: 16px "Helvetica Neue", Helvetica, Arial, Geneva, sansserif; Skrift størrelse 16 pixel, Skriftformat Helvetica Neue. I tilfælde af en netlæser ikke understøtter skriftformatet er der nevnt 4 andre formater. h1,h2,h3,h4,h5,h6 margin: 0 0.5em; font-weight: 500; line-height: 1.1; Alle overskriftene «styles» her Margin på em (som er et universal pixel størrels) Tykkelsen på teksten Linje avstand h1 font-size: 2.25em; /* 36px */ h2 font-size: 1.75em; /* 28px */ h3 font-size: 1.375em; /* 22px */ h4 font-size: 1.125em; /* 18px */ h5 font-size: 1em; /* 16px */ Her defineres de forskjellige overskrifters størrelse i universal pixel størrelse. Det de svare til i normal pixel er skrevet som kommentar. Side 9 av 11

Helvetica, Arial, Geneva, sansserif; Skrift størrelse 16 pixel, Skriftformat Helvetica Neue. I tilfælde af en netlæser ikke understøtter skriftformatet er der nevnt 4 andre formater.

10 h6 font-size:.875em; /* 14px */ p margin: em; line-height: 1.5; All normal tekst får en magin her og halvanden linje afstand #googlemap #WMS_lhmr /*float: left;*/ width: 600px; height: 400px; padding: 0px; border: 5px solid black; margin: 0px; /*float: left;*/ width: 600px; height: 400px; padding: 0px; border: 5px solid black; margin: 0px; Google maps størrelse, gjennomsiktighet, margin, og ramme defineres her (vi fikk ikke float funksjonen til at fungerer, derfor er den i kommentar) WMS karter «style» defineres her Igjen er float i kommentarfelt da vi ikke fikk denne funksjon til at virke Bredde Høgde Gjennomsiktighet Ramme Og margin Side 10 av 11

black; margin: 0px; /*float: left;*/ width: 600px; height: 400px; padding: 0px; border: 5px solid black; margin: 0px; Google maps størrelse, gjennomsiktighet,

11 Del 3 - API API står for Application Programming Interface. Det er et grensesnitt av et programvare, i vår tilfelle googlemaps. Via denne API for vi tilgang til spesifikke dele av programvaren som vi så kan kjører inne i vår internettside. Et annet eksempel for bruk av Google Maps API (mtp. kart) er Totenbadets hjemmeside. Link: Del 3 - Analyse Vi analyserte først dataene i ArcMAP, men oppdager raskt at det eneste vi kunne få herfra var høydemeter. Da arbeidet vi videre i Excel, men dataene måtte behandles for å kunne analyseres. Vi konverterte GPX-filen til en.csv fil. Dette gjorde at vi kunne importere filen til Excel. Deretter måtte vi splitte noen celler for å få ut den delen av dataene vi kunne jobbe med. Videre kunne vi beregne avstand, hastighet, høydemeter og finne middel-, bunn- og toppunkter vedr. hastighet. Vi måtte benytte flere av Excels innebygde matematiske funksjoner. Merk: Vi oppdaget en grove feil i dataene. Dette var spesielt synlig i høyder. Vi fjernet en del tydelige feil (~ høydemeter på under 10 sekunder). Fra tidligere GNSS-lære, vet vi at tett skog er en dårlig forutsetning for gode signaler, og det er spesielt høydene som er det svake punktet til denne teknologien. Dette er kommentert på siden hvor dataene presenteres. Side 11 av 11

Link: www.totenbadet.no/kontakt.html. Del 3 - Analyse Vi analyserte først dataene i ArcMAP, men oppdager raskt at det eneste vi kunne få herfra var høydemeter.

Like dokumenter

Oblig 1 Erlend Hannestad

Oblig 1 Erlend Hannestad Oppgave 1 Nettsiden er ustrukturert og uryddig når det kommer til layout og design, det er vanskelig å holde oversikt over alt som vises på siden, det er rett og slett for mye