Hvordan håndteres data?
Istedet for at vise de "rå" data vi har modtaget fra Danmarks servicen vil vi gerne præsentere dem på en mere indbydende måde.
Først gør vi klar til vores nye fremvisning ved at ændre på vores HTML og CSS kode.
Vores HTML
Vi har skiftet vores indhold element fra et PRE element til et DIV element, da vi gerne vil vise selvstændige elementer inde i det.
De elementer vi gerne vil vise kommer til at være A elementer - links der hver især peger på den enkelte adresse.
Derudover har vi stadig vores kort element.
Elementet med vores indhold vil vi gerne vise på venstre side, og kortet vil vi placere til højre herfor. Derfor går vi også ind og ændrer i vores CSS.
Vores CSS fil, mitlayout.css
Vi har nu angivet en fast bredde på vores indhold element, 200 pixels, og samtidig angivet at
links i indhold elementet skal vises som block elementer.
Dermed opfører de sig som en selvstændig boks og vil automatisk bryde ned på næste linje.
Derudover har vi lagt en baggrundsfarve på hvert link når man fører musen henover.
Vores kort element har også fået en fast bredde samt højde, og er desuden blevet absolut positioneret. Dette betyder at vi kan flytte rundt på elementet uden at tænke over dens relation til vores andre elementer. I dette tilfælde flytter vi det til højre for vores indhold element.
Vi har sat bredden på vores BODY element til 640 pixels. Både vores indhold og kort element passer dermed ind i hele sidens størrelse.
Håndtering af adresse oplysninger
Det næste vi vil gøre er at få fat i alle adresser på Amalienborg Slotsplads, hvilket kan lade sig gøre med en adressesøgning igennem Danmark servicen.
http://oiorest.dk/danmark/adresser.json?vejnavn=Amalienborg&postnr=1257
Når vi kalder Danmark servicen kan vi nøjes med at angive en del af vejnavnet. For at gøre søgningen hurtigere angiver vi også et postnummer.
Vores script fil, minkode.js
Strukturen er den samme som i det foregående kapitel, og vores kort bliver stadig vist på samme måde med den samme kode.
Vores hentAdresse og visAdresse funktioner er nu skiftet ud med hentAdresser og visAdresser
funktioner.
I hentAdresser funktionen sender vi vores forespørgsel til den eksterne
Danmark service, og angiver at vores data skal behandles af visAdresser funktionen.
Når vi modtager vores data tilføjer vi først noget tekst til vores indhold element der viser antallet af fundne adresser.
Dernæst benytter vi os a jQuery metoden each til at gå igennem hver enkelt adresse, og for hver adresse vi har modtaget tilføjer vi et link i vores indhold element. Dette link består af noget tekst samt en URL der peger på adressens kortvisning hos Kort & Matrikelstyrelsen. Herunder kan du se et eksempel på den HTML struktur der bliver opbygget dynamisk.
Det er muligt for os at linke direkte til Kort & Matrikelstyrens kortvisning på grund af de data vi modtager fra Danmark servicen.
Hvert af de adresse elementer vi modtager har en streng ved navn ref der indeholder et link til yderligere adresseoplysninger,
og ved at skifte endelsen fra .json
til
.kms
har vi et link til adressens egen kortvisning. Udskiftningen af endelsen sker ved
at bruge Javascript metoden replace.
I næste kapitel vil vi se på hvordan vi får vist adressen på vores eget kort.
Du kan se hvordan det komplette eksempel til dette kapitel fungerer i koden.