Monday, 21 December 2009

NKSilverlight - Mashup


NKSilverlight er en mashup som kombinerer Google Maps, Statens kartverkdata, Silverlight og Javascript for å presentere kartdata for Norge med flere lag samtidig i en nettleser.

NKSilverlight står for Norgeskart Silverlight. Mashupen over er dog ikke bare en Silverlight applikasjon, til venstre ser man et tradisjonell HTML Div element som viser Google Maps. Google Maps er her en viewer for Statens Kartverk sine data. Man kunne forsåvidt bruke Microsoft Virtual Earth også for samme effekt. Vha. IsWindowLess satt til true i silverlight og css absolutt posisjonering klarer man å vise HTML og Silverlight side ved side. Kommunikasjonen mellom de to gjøres med standard HTML Bridge i Silverlight, HtmlWindow.Page.Invoke.

Jeg har laget en mashup som baserer seg på data fra Statens Kartverk og har en kort omtale
av tilgjengelige data her: http://www.statkart.no/?module=Articles;action=Article.publicShow;ID=14165module=Articles;action=Article.publicShow;ID=14165
Mashupen bruker Google Maps på web som Viewer og kartdataene fra Statens Kartverk lastes inn i Mashupen som GTileLayerOverlay objekter i GMap2 objektet, mye av koden er i Javascript og kan leses hvis man velger View Source i Mashupen. Jeg anbefaler for teknisk interesserte å lese om GTileLayerOverlay her: http://code.google.com/intl/no/apis/maps/documentation/overlays.html#Tile_Layer_Overlays
I tillegg har Mashupen brukt Silverlight 3 for å gi et interessant GUI som lar en mikse de ulike lagene som Statens Kartverk tilbyr for de ulike Cache-tjenestene sine. Man kan med en Slider kontroll styre opacity, altså gjennomsiktighet fra 0 til 100 prosent for de ulike lagene. Ønsker man å vise f.eks. to lag så kan man slå på 50 prosent på begge. Dermed er det mulig å kombinere
sjøkart og topografiske kart for Norge i Google Maps. Dette er mye bedre kart enn standardkartet til Google Maps som man fort vil synes er nakent i forhold. Statens kartverk dekker kun Norge, med unntak av det siste laget som er et europakartlag. Bruk avkrysningsboksene for kjapt å sette opacity til 0 eller 100 (skru lag av og på). Jeg har zippet hele prosjektet, som jeg har laget i Visual Web Developer Express 2008 som et Silverlight Application 3 prosjekt for de av dere som vil se på koden. Dette er en mashup som kun er et demoprosjekt, det er ikke optimert eller testet ut nøye. Det er morsomt å se at man kan slå sammen kartdata fra Statens Kartverk på en så grei måte, det tok meg kun noen få timers arbeid å lage Mashupen. Jeg vil også gjerne kombinere mashupen med data fra andre leverandører som Yr.no, f.eks. snødybde m.m. Er du interessert i disse temaene som meg er det kjempefint å få litt tilbakemelding, kanskje vi kan samarbeide om mashuper og mulige prosjekter rundt dette?

Til slutt er det kanskje interessant å laste ned prosjektet også som en zippet fil for Visual Studio 2008 Express Silverlight application prosjektet og se en live demo av mashupen.

Nedlasting av NKSilverlight prosjektet [ZIP, 253 kb]:

http://tore.aurstad.net/NKSilverMashup/NKSilverMashup.zip

Instruksjoner: Pakk ut filene, åpne NKSilverMashup.sln Solution filen, høyreklikk på NKSilverMashupTestpage.html filen i NKSilverMashup.web og velg Set as Start Page.
Trykk så på F5 for å snurre film. Du vil få opp NKSilverMashup omtrent som i skjermbildet over, man starter på lokalisering Steinkjer og viser 50% Topografisk Norgeskart 2 WMS og
50% Sjøkart Hoveserien 2 WMS data i Google maps utsnittet man ser.

Har du ønsker om å videreutvikle prosjektet er det fint om du kan kreditere meg i tillegg. Jeg vil også gjerne ha beskjed om dette først. Hvis du ønsker å stille spørsmål om prosjektet, gi gjerne tilbakemelding, gjerne nedenfor eller en e-post til: tore.aurstad@ntebb.no .

En genial ting med denne mashupen er at den består kun av en .HTML fil og en .XAP fil for Silverlight prosjektet, altså kun to filer. Data hentes som sagt av Statens Kartverk og vieweren er Google maps. Dermed er dette prosjektet en mashup, altså benytter seg av eksterne tjenester. Det blir spennende å se om det går an å teste og videreutvikle mashupen til også vise andre ting. Google maps har en spennende og rik API som er interessant å eksperimentere med.

Til slutt og ikke minst, LIVE DEMO! Klikk på lenken nedenfor:
http://tore.aurstad.net/NKSilverMashup/NKSilverMashupTestPage.html


Share this article on LinkedIn.

3 comments:

  1. Litt kort informasjon - til venstre ser man Google maps vieweren, til høyre ser man en silverlight plugin som jeg bruker blant annet for å gi et rikt web gui, mer spesifikt benytte Slideren i Silverlight 3 som er en allmennt tilgjengelig kontroll. NB! Du må ha lastet ned Silverlight 3 runtime for å kjøre denne live demoen selvsagt.

    ReplyDelete
  2. Det kan ta noe tid å laste kartdata. Man laster potensielt flere kartoverlag og viser man topografiske kart og sjøkart vil det være noe venting på at data hentes, jeg anbefaler at du tester løsningen med en rask internett-linje.

    Den beste bruken med denne applikasjonen er å få kombinert data med topografiske kart og sjøkart. Dermed er det mulig å sjekke sjødybder og samtidig ha god kartinformasjon også på land. Juster gjennomsiktigheten mens du zoomer inn og ut for å få riktig miks mellom de to lagene. De øvrige lagene er også interessante å teste ut.

    Igjen, kommentarer eller spørsmål, si i fra!

    ReplyDelete
  3. Merk at Statens Kartverk sin Cache-tjeneste maks gir 10 000 tiles per ip (sluttbruker) per dag...

    Det kan derfor være begrenset hvor mye du kan teste ut løsningen.

    ReplyDelete