Vidreutvikling av Kartverket-GPX-kartklienten (nå med bilder)

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!

12 thoughts on “Vidreutvikling av Kartverket-GPX-kartklienten (nå med bilder)

  1. Pingback: Tweets that mention HC SVNT DRACONES -- Topsy.com

  2. Pingback: HC SVNT DRACONES » GPX med Kartverkets bakgrunnskart

  3. Martin Bekkelund

    Dette blir bare bedre og bedre! Men det er litt rotete med mange bilder oppå hverandre. Ville det ikke vært bedre med en dott for hvert bilde, og en stor dott som representerer mange bilder og som ekspanderer «Google Earth style» når man klikker på dem?

  4. Atle Post author

    Ja, jeg er enig med deg der Martin!

    Jeg har tenkt litt på hvordan dette kan løses, en løsning er jo som du skisserer en slags clustering av bilder ja, en annen er å bare bruke et ikon i kartet, og så ha bildene på sidene, med en to-veis highlighting ved mouseover på hhv bilde og ikon.

    Skal ta en titt på clustering ved neste anledning, tror OpenLayers har noe støtte for dette ogå, så da får vi se!

  5. Pingback: HC SVNT DRACONES » Gps Trip Organizer

  6. Pingback: HC SVNT DRACONES » Mineturer.org – et selv-intervju

  7. Geir A. Granviken

    Hei!

    Nå har jeg prøvd Mintur.org, og det ser jo riktig så bra ut! Tenkte derfor jeg skulle bruke denne tjenesten for mine private tur-logger. De “offentlige”, som også er ment som turtips, ønsker jeg imidlertid å ha på mine egne sider (det er jo ganske morsomt å lage egne sider også!).

    Jeg likte veldig godt løsningen på Mineturer.org med små bilde-ikoner på kartet, i stedet for miniatyrbilder. Går det an å forklare på en enkel måte hvordan man kan få til det samme med “Kartverket-GPX-kartklient ver. 2″ ? I tillegg til at det ser bedre ut, regner jeg med at det vil forenkle koden endel, siden man ikke behøver å bruke resizing-funksjoner, samt at den vil bli raskere attpåtil?

  8. Geir A. Granviken

    Hei,

    En stund siden sist jeg forsøkte å få denne versjon 2 av kartklienten til å fungere. D.v.s. jeg har hatt god nytte av koden her (hadde aldri fått til noe av dette uten din kode!), og fått opp sider som funker med alle funksjoner fra “Kartklient 2″ – så nær som det som dreier seg om bilder på kartet. Her stopper det dessverre opp i imageloader.js. I “utviklerverktøy”-vinduet i Google Chrome (som er utrolig nyttig for å se hva som er feil når noe stopper opp!) får jeg følgende feilmelding for linje 101 i imageloader.js: “Uncaught TypeError: Cannot read property ‘length’ of null ” Kodelinjen ser slik ut:

    for(var i = 0; i<features.length;i++){

    Det pussige er at eksempelet under linken øverst i på denne siden fungerer jo som bare det, og jeg har ikke gjort andre endringer enn å legge inn GPX-filer og bildefiler der de skal være, samt peke til GPX-filene i index.html. Hvis du vil prøve min versjon, så er adressen: http://ggranvik.no/test/map2_sk/. (Bildefilene inneholder geo-tagger.)

    De fungerende kart-sidene mine finnes her: ggranvik.no/tur. Jeg er svært takknemlig for hjelpen jeg har funnet her for å få til det jeg har fått til, men skulle gjerne hatt bilder på kartet i tillegg… (tanken var å prøve få til å vise små ikoner kartet i stedet for thumbnails, men jeg kommer nok ikke videre før utgangspunktet "kartklient 2" fungerer.)

    PS: Da jeg la inn siste versjon av OpenLayers, fant jeg etter mye om og men ut at jeg måtte legge til "” i html-filen, fordi “LoadURL” (i gpxreader.js) ikke støttes i siste OpenLayer-versjon.

  9. Geir A. Granviken

    Ekstralinken til openlayers-biblioteket man må legge til ble visst rensket ut i innlegget over, men man må altså linke til “deprecated.js” i tillegg til OpenLayers.js for å få koden din til å fungere med versjon 2.12 av Openlayers.

  10. Geir A. Granviken

    Må nesten innpå igjen, for nå oppdaget jeg hvorfor “Kartklient 2″ ikke fungerte med egne gpx-filer og bilder: Bildefilene mine hadde navn som inneholdt store bokstaver, og det var nok til at det hele stoppet opp! Men Unix-/Linux-systemer er vel ganske kresne på sånt. Så da gjenstår bare å finne ut hvordan jeg kan få vist ikoner for bildene i stedet for thumbnails.

    PS. Hos Kartverket, på http://opencache.statkart.no/gatekeeper/gk/gk.open?Version=1.0.0&service=wms&request=getcapabilities, ser jeg at man nå har fått flere karttyper å velge mellom. Jeg har irritert meg over eiendomsgrensene på Topo2, som gjør kartet svært “cluttered” i bebygde strøk, men med kartet “matrikkel_bakgrunn “, har man samme flotte kart, uten disse hersens grensene!

  11. Atle Post author

    Geir: Må bare beklage manglende svar fra meg her, men det later til at du har funnet ut av det meste selv? Det er jo den beste måten å lære på! Er ikke fornøyd med denne koden selv mer, så om jeg får ånden over meg kan det være jeg kommer med noe nytt! Hadde vært artig å gjøre det med Leaflet.js .

    Ellers er det nye kartet fra kartverket meget bra til webbruk, topo2 blir meget “overlesset” ja!

  12. Geir A. Granviken

    Hei igjen! Ja, å finne ut selv er så absolutt god læring, og for en stund siden kjøpte jeg meg en bok om web-programmering, med intensjon om å prøve å lære litt om JavaScript, css etc. Utviklingen har jo gjort at det blir litt for tynt å bare kunne gammeldags HTML…. :-)

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>