I rekken av vidreutviklinger og jobbing med Kartverkets bakgrunnskart (WMS) og OpenLayers biblioteket kommer nå neste episode. Denne gangen med støtte for geotaggede bilder.

Biblioteket som slippes i dag er såklart også lisensiert under en MIT-lisens, og gjør omtrent følgende:

Basert på en katalog med geotaggede bilder på webserveren plasserer den thumbnails av disse på kartet, og åpner en større versjon av dette bildet (via lightbox-aktig funksjonalitet). Dette kan såklart kombineres med GPX-funkjsonaliteten jeg tidligere har vist.

Dermed: en demo på funksjonaliteten finnes på http://kart.atlefren.net/sk_map/ (takk til Magnus Stoveland for bildene her, regner med at det er greit at jeg bruker dem?;)).

Så litt om funksjonaliteten: For å håndtere geotaggede bilder har jeg måttet ta i bruk litt PHP. Kort fortalt er dette en liten modifikasjon på koden fra masteroppgaven min, PHP-scriptet leser ut GPS-informasjon fra bilders EXIF-informasjon og bygger en GeoJSON-streng som så requestes fra OpenLayers scriptet ImageLoader.js. ImageLoader.js tar seg av å transformere koordinatene i GeoJSON stringen til UTM 33N, slik at de kan vises på kartet. I tillegg har jeg implementert LightLightbox.js, en enkel versjon av Lightbox-funksjonaliteten.

For å vise thumbnails av bildene (og store, men ikke fullsize bilder) brukes funksjonaliteten i PHP-klassen Resize_Image, hentet fra http://www.bitrepository.com/resize-an-image-keeping-its-aspect-ratio-using-php-and-gd.html.

Og, kildekoden finner du som en zip-fil på code.atlefren.net/source/sk_map.zip, den skal være å bare pakke ut på egen webserver og ta i bruk. Det eneste kravet er at du har noen GPX filer og/eller geotaggede bilder. Har du GPX-filer, men ikke geotaggede bilder kan du teste f.eks Prune, som jeg ble positivt overrasket over (kjører på alle platformer).

Husk bare et par ting: siden både GPX-filer og bildene er vektorer i kartet kan det bli vel mye for en stakkars JavaScript motor om du kjører på med for mange bilder og/eller GPX-filer (les mer i OpenLayers sin FAQ).

I tillegg er det et par kjente bugs/shortcomings her:

• Når bildelaget er aktivt kan du ikke klikke på GPX-filene for å få en popup
• PHP-classen for å håndtere bilderesizing gjør alt on-the-fly, dette kan føre til ytelsesproblemer ved mye bruk
• LightLightbox.js-koden er, for å si det mildt, elendig utseendemessig.
• Det finnes ingen load-indikatorer på bilder etc

Dog, all den tid jeg har frigjort koden er det bare å ta tak i dette, jeg er ikke noen ekspert på hverken PHP eller CSS, men det burde være greit å endre på slikt. Ellers skal koden være “greit nok” dokumentert, finner du at den ikke er det så si fra!

Og, jeg tar gjerne imot innspill til forbedringer!

Jeg skrev for en stund siden litt om hvordan man kan kombinere GPX-filer med de åpne WMS-servicene til kartverket. Igrunn bare en enkel proof-of-concept, men det virker som folk fant det nyttig.

Dermed har jeg rydda litt i koden, lagt til muligheten for fargekoding, “klikk-for-info” og lengdeberegning. Jeg har også flyttet all koden ut i en separat JS-klasse, og satt en åpen lisens på denne (MIT for den som lurer).

Du finner et eksempel på http://kart.atlefren.net/gpx2/, som forøvrig viser en fin tur i Sylane, anbefales!

Trykk “view source” for å få med deg oppsettet. Det viktigste er dog å huske å inkludere GpxReader.js. OBS: jeg setter pris på om du IKKE hotlinker til denne, men laster ned og legger på egen server.

Ellers er “magien” for å legge til GPX-filer enkel: et array [] med et objekt {} pr GPX-fil, som inneholder følgende:

• file: filsti til GPX-fil (husk Same origin policy)
• color: hex-representasjon for farge
• width: tykkelse på linje i pixler
• title: Tittel på track, dukker opp i popup
• desc: beskrivelse av track, dukker opp i popup

Se ellers hvordan jeg har satt opp ting i eksempelet. Og, spør gjerne om det er noe, og vis meg gjerne hva du bruker koden til, også om du endrer den!

Jeg jobber, som kjent, endel med kartapplikasjoner på nett. I denne situasjonen har du et par valg. Google Maps APIet eller OpenLayers. Vil du ha full kontroll velger du OpenLayers. Kort og godt.

Dog, uansett om du havner på Google Maps eller OpenLayers (ja, det finnes vel også noe fra ESRI) for å lage kartapplikasjoner som skal kjøre i nettleseren trenger du å forholde deg til Javascript. Mye kan sies om Javascript, og mye av det er feil. Likevel: det er et språk som er misbrukt mer enn PHP. Derfor: skal du gjøre noe fornuftig med Javascript anbefaler jeg deg å se Douglas Crockfords videoforelesning “programming in javascript“. Og også eventuelt lese boka hans “JavaScript: the good parts“. Og kanskje også Stoyan Stefanovs bok: “Object-Oriented JavaScript“.

Dog, det var ikke det denne posten skulle handle om. Jeg tenkte å være enda litt mer spesifikk. Jeg tenkte å skrive litt om hvordan Javascript-utvikling kan integreres i utviklingen av en Java webapp.

Det er mange steder og angripe problemet fra, men vi kan starte med Maven, som jeg er fristet til å si at er et must for javautvikling. Det finnes flere plugins for å håndtere Javascript i Maven. Jeg liker godt maven-javascript-plugin. Jeg tror ikke den vedlikeholdes så godt, men det som finnes fungerer og fyller følgende oppgaver:

• Pakke javascript-biblioteker som “dependencies”
• Komprimering og konkatinering av javascript-filer

I tillegg kan det kjøre tester, men der foretrekker jeg et annet bibliotek: nemlig Jasmine. Jasmine er et rammeverk for drive skrive Behaviour Driven Development av Javascript, i teorien betyr det at du kan skrive unit-tester for javascript. Legg til jasmine-maven-plugin og du får støtte for å kjøre testene via Maven. Javascript kan dermed testes like lett som Java-kode.

Når det gjelder AJAX (eller AJAJ som jeg liker å kalle det), synes jeg DWR (Direct Web Remoting) er brilliant. Lag en Java-klasse, eksponer metoder og kall dem direkte fra Javascriptet ditt. Enklere blir det ikke, dropp å tenke på XMLHttpRequest-oppsett og ståk. Når vi først snakker om å gjøre ting på server-siden må jo også GeoTools nevnes. GeoTools er rammeverket GeoServer baserer seg på, og er kort og godt et GIS-rammeverk for Java. Lese shapefiler, koble seg til romlige databaser som PostGIS og Oracle Spatial, gjør GIS-operasjoner som bufferanalyser og transformer koordinater. Litt dårlig dokumentert, men klarer det meste.

Hva så med Javascript-rammeverk? Det finnes jo flust av dem. Prototype, jQuery, ext, etc etc. Vel, så langt har jeg funnet ut at OpenLayers gir meg støtte for mye av det jeg trenger, og har dermed ikke begynnt å se så mye på Javascript-rammeverk enda. Jeg vet det sikkert finnes endel smarte rammeverk som kan gjøre ting enklere her også.

Til slutt tenkte jeg å nevne log4javascript, som virker som et meget ålreit loggeverktøy for javascript, det mest spennende er kanskje å sende logg til serversiden via AJAX. Hvis du ikke trenger dette vil jeg påstå at Firebug gjør jobben den også. Kombinert med “web developer plugin” gjør den FireFox til den eneste fornuftige browseren å utvikle javascript i (så er det en annen sak at det skal fungere i andre nettlesere også).

Håper denne listen med ressurser kan være til hjelp for noen. Ikke nøl med å kommentere om du ønsker utdyping på noen områder, har spørsmål eller kommentarer. Og, har du flere ressurser å dele så tar jeg gjerne imot dem med takk. Jeg har på ingen måte fasiten, så jeg håper at jeg med denne posten når ut til noen som driver med noe av det samme som meg. Jeg tror ikke vi er så veldig mange?