Her er historien om hvordan vi lagde Norges største turbilde.
Vi har laget et kvadratisk bilde med 32768 piksler i hver retning; en oppløsning på én gigapiksel. Det er sammensatt av over 2100 bilder, sendt inn av turglade mennesker, og vi takker alle for en god dugnad.
Norges største turbilde bruker kartvisningsmotor.
Foto: Kjersti Magnussen, Mosaikk: UT.no/Knut-Olav Hoven
Å sette sammen bildet
For å lage bildet brukte vi verktøyet metapixel, et kommandolinjeverktøy som kan lage veldig store mosaikkbilder fra en stor samling bilder raskt og med god kvalitet.
Metapixel krever at alle bildene i samlingen har samme aspekt, og siden vi fikk innsendt både portrettbilder og landskapsbilder så landet vi et sted i mellom med kvadratiske bilder. For å være sikker på å få med alt og alle på bildene bestemte vi oss for at og det var bedre at noen ble litt tykkere eller tynnere enn at noen skulle risikere å bli halshugd ved beskjæring av bildene. Beklager det 🙂
Vise og navigere
Et så stort bilde lar seg ikke vise i normale bildeprogrammer. Ukomprimert ville bildet tatt 3 GB. Derfor var vi nødt til å dele opp bildet i mindre deler. Det finnes flere gigapikselbilder på nettet, men felles for de fleste er at de bruker Flash for presentasjon av bildene, og det var ikke godt nok for oss. Vi ønsket en løsning som kunne fungere på mobile enheter, som telefoner og nettbrett, med og uten Flash-støtte, mulighet til å vise i fullskjerm og støtte for å bokmerke og dele et bildeutsnittet med venner etter man har funnet fram til sitt eget bilde.
Kartmotor ble løsningen
Vi ble inspirert av arbeidet til Chris Petersen til å forsøke å bruke kartmotoren fra Google, Javascript-klienten til Google Maps, til å panorere og zoome i bildet. Vi brukte egenutviklede verktøy for å kutte opp bildet i mindre kvadratiske bildeutsnitt på 256×256 piksler; samme størrelsen som Google selv benytter på bildeutsnitt for sine kart. For å gjøre det mulig å se hele bildet på en normal PC-skjerm uten behov for å panorere i bildet laget vi kopier med forskjellige størrelser på bildet, og for å tilpasse zoomnivåene til kartmotoren halverte vi størrelsen for hver gang man zoomer utover.
Verden er ikke flat
Google Maps brukes for å navigere i en rund verden, men siden bildet vårt er flatt trengte vi å gjøre noen endringer i kartmotoren. Vi laget ny projeksjonslogikk som regner om visningspunkter i nettleseren om til piksler i bildet for det gjeldende zoomnivået. I den runde verden er det mulig å spinne jorda rundt alle veier, men det egner seg dårlig for bilder, så vi gjorde det slik at man ikke kan navigere seg utenfor og vekk fra bildet.
Statistikk og ytelse
Vi lagde og la ut bildet natt til mandag 7. februar, like etter at tusenvis over hele landet beveget seg ut i den norske naturen på «Kom deg ut»-dagen.
Hittil i uka (fredag kl 10:30) har bildet blitt vist 17.000 ganger og serverne våre har levert ut 6 millioner bildeutsnitt på tilsammen 101 GB.
I front av webserverne har vi satt opp Varnish til å mellomlagre bildeutsnittene, som har fungert veldig bra.
På det meste leverte serverne ut 127 bildeutsnitt i sekundet med 17.2 Mbits/sekund. Disse dataene er målt med oppløsning på ett minutt.
Kildekoden
Vi har gitt ut Javascript- og HTML-koden for visning av gigapikselbildet til fri bruk.
Koden kan du finne på Github.com, og prosjektet heter Javascript Gigapix Viewer og gitt ut med en MIT-lisens. Vi tar gjerne imot forbedringer av koden, både her eller på github.
Oppsummering
Vi klarte å engasjere en stor mengde turglade mennesker til å bidrag til Norges største turbilde og vi benyttet en kartmotor til å tegne ut et bilde som kan vises på både store og små skjermer.
Kjenner dere til annen bruk av Google Maps og andre kartmotorer som er noe utenom det vanlige?
Hei
Dere burde også prøve ut programmet Andreamosaic.
andreaplanet.com/andreamosaic/
Tjener samme formål, men har et ok grafisk brukergrensesnitt.
Jeg kikket litt på AndreaMosaic, men jeg trengte noe som kunne scriptes. Vi kjørte flere tester for både å finne beste motiv og fintune parametere for best mulig resultat uten at samme bilde skulle gjentas for ofte.
Av ren nyskjerrighet testet jeg AndreaMosaic på nytt og fant ut at maksimal størrelse var 210 MPix og det brukte mye minne, ca 590 MB RAM, 2.6 GB virtuelt. Til sammenlikning brukte metapixel under 3 MB RAM på samme størrelse.
UCL har laget et kjempebra program i java som tar et stort bilde som input, kutter dette opp, og gir som output en full katalogstruktur med google maps for visning. Håper dere ikke brukte for lang tid med å programmere dette selv.
casa.ucl.ac.uk/software/googlemapimagecutter.asp
GMImageCutter feilet raskt med «OutOfMemoryError: Java heap space».
Den største utfordringen vår var minnebruk. Vi forsøkte oss fram med enda større bilder, men hadde problemer med oppdeling til tiles, da vi ikke fant noen verktøy som klarte å skalere og kutte så store bilder.
Vi brukte Netpbm og ImageMagick for å dele opp i tiles.
Kom over prosjektet maplib.net i letingen etter noe tilsvarende som det her.
Stusser litt på en ting: hvorfor Google Maps APIet? Og ikke OpenLayers (www.openlayers.org), som er åpen kildekode? Jeg er ganske sikker på at det samme er mulig der, og du slipper Google-bindingene helt og fullt
Tja, si det… Jeg har litt vondt merker jeg, for at jeg ikke gikk for OpenLayers med en gang. Grunnen var at jeg har brukt GMaps tidligere og var mest kjent med det.
Skal jeg gjøre et liknende prosjekt igjen håper jeg det kan bli med OpenLayers 🙂
Godt å høre at du kjenner til og tenker på å bruke åpne alternativer også!
Kult prosjekt er det uansett, glemte jo helt å nevne det!
Takk for det! 🙂
Auto Rederect!
Jeg blir automatisk videresent til twitter dersom jeg ikke stopper lastingen av siden!
Hei, Andre!
Kan du gje meg litt info om kva for ein nettlesar du nyttar, samt kva slags operativsystem du er på? Dette hjelp med feilsøkjinga av problemet, då eg ikkje klarte å reprodusere hendinga i verken Firefox, Safari eller Chrome (OS X).
Hei, fikk samme feil i dag tidlig, men bare en gang. Etter dette var NRKBeta veldig treig, noe jeg tror skyldes Observerapp.com, som jeg tror er nede akkurat nå. Jeg har Firefox 3.6.13 og Mac.