Tilbage til oversigten

Interaktivt dykkerkort

Mål: et tresproget dykkerkort over Fyn, der fungerer som praktisk reference for både lokale og turister.

Dette var en af mine første opgaver, efter jeg startede hos Diving 2000. Min chef skulle til den årlige BOOT messe i Tyskland, for at promovere dansk dykning, og i særdeleshed vragdykning i det sydfynske øhav. Efter at jeg havde lavet et grafisk kort til den folder han ville medbringe, fik jeg idéen til at supplere folderen med en interaktiv online oplevelse – og dette kort er resultatet.

Jeg har stået for både programmeringen og indholdet på alle tre sprog.

Hvordan jeg lavede kortet

SVG er svaret. Scalable Vector Graphics er en form for kodet grafik, man kan benytte til webbrug. Kortet selv består af flere udsnit af Geodata-kort, der er sat sammen i Illustrator, og de grafiske elementer er SVG elementer, lavet i Illustrator og eksporteret som kode. Bagefter optimerede jeg koden i hånden, for at sikre hurtigt mulig load, og lettest mulig implementation af funktionaliteten derefter.

Hover og klik-effekterne er lavet med en blanding af jQuery og Greensock Animation Platform. Touch understøttelsen er indført med Hammer.js, lightbox galleriet der åbner billeder op i fuld størrelse, er lavet med Fancybox, og muligheden for at zoome ind og ud samt flytte på kortet, er takket være svg-pan-zoom.

Interaktioner med kortet

Denne del var sværere end jeg havde ventet – både at implementere forventet kort-funktionalitet som folk kender fra andre kort apps, og at få kortet til at virke ved touch.

Touch understøttelse fik jeg implementeret med Hammer.js, men zoom og flytning af kortet med svg-pan-zoom var svær, da der ikke i udgangspunktet var noget der forhindrede at man kunne flytte sig selv udenfor kortet, og pludselig se en tom side. Særligt fordi et hurtigt swipe kunne få kortet til at flyve ud af billedet.

Jeg måtte kode min egen løsning fra bunden af, eftersom forslagene fra svg-pan-zoom’s udvikler ikke fungerede i dette tilfælde. Nu kan man trække i kortet, men kun til kanten af det, og zoome ind på det område er er i centeret af skærmen til enhver tid.

Derudover tilføjede jeg mine egne kontrolknapper til zoom og reset, eftersom dem der fulgte med pluginnet, var placeret i nederste højre hjørne, og ikke kunne ses på alle skærmstørrelser.

Filtrering af indhold

En senere tilføjelse var muligheden for at filtrere dykkersteder efter emne – vragdykning, scenisk, uv-jagt etc. – dette blev implementeret med ekstra data-tags på elementerne, og en opdatering af URL’en ved tryk på knapperne, der tilføjer et hastag matchende data på elementerne – og så klarer JavaScript vat vise og skjule de matchende elementer.

Visning af dykkersteder og overnatning

Ved at holde musen hen over de cirkler og firkanter der markerer dykkersteder og overnatning på kortet, kommer en infoboks frem med placering, navn og enkelte ikoner der viser f.eks. dybde, sværhedsgrad og lignende. Ved klik kommer en stor boks frem, med infotekst om stedet, samt eventuelle billeder og videoer.

I menuen kan man skifte sprog, så man får det, man er mest komfortabel med at læse.

Dive Map Funen

Skriv et svar

Er du interesseret i et samarbejde?