Import af kortmashup til Google Wave anden del

I forrige blogindlæg af import af kort til Google Wave så jeg kun på kortmashups til Google Earth plugin. Her i anden del af import af kortmashups til Google Wave, har jeg taget nogle andre korttjenester. Det første eksempel er Københavnermusik med en KML fil lagt indover et OpenStreetMap (Wave Gadget XML fil)

Københavnermusik

Der er ingen problemer med at afspille YouTube videoerne. Denne Wave virker både i FireFox 3.5 og i Google Chrome browseren.

Andet eksempel er et ganske almindeligt Google Maps, der ved brug af Mapstraction JavaScript biblioteket laver en import af et GeoRSS feed fra USGS (U.S. Geological Survey). Output viser så det seneste døgns jordskælv over 2,5 på Richterskalaen fra hele verden. Google Wave kan afprøves direkte her (Wave Gadget XML fil kan ses her)

Jordskælv

Denne Wave virker også både i FireFox 3.5 og i Google Chrome browseren. Det ser ud at lave Google Wave Gadgets med kort er en smal sag.

Men hvornår er det så relevant at gøre dette? Det eneste eksempel jeg lige kan komme i tanke om er fx at man kan lave et preview for en lukket kreds, hvor de så giver konstruktiv kritik og feedback på kortmashup, før et kortmashup går live til offentligheden. Men det kan man jo gøre på så mange andre måder end lige i en Google Wave. Har du noget andet bud på hvornår det kan være relevant?

Flet KML sammen med OpenStreetMap

Den letteste metode til at få vist en KML fil henover OpenStreetMap på dit eget webdomæne er, at benytte Mapstraction API Sandbox. Mapstraction er et JavaScript bibliotek, der gør det let at vælge forskellige typer af korttjenester, samt at få flette det sammen med GeoRSS, KML, JSON, billedelag, CSV osv. Som case kan vi tage min Københavnermusik KML fil og sætte indover OpenStreetMap.

I højre felt på Mapstraction API Sandbox indsætter jeg nogle få parametre, URL til KML, valg af korttype, bredde- og længdegrad for centrum af kortet. Går ned i felt “Run Code” og ser om det ser fint nok ud mit kort.

Mapstraction API Sandbox

Dernæst går jeg op i “Edit HTML”, og her kopieres hele HTML koden og indsætte på mit eget webdomæne (selvfølgelig tilpasset layoutmæssigt med egen CSS). Og her er så det færdige resultat med 43 Københavnermusik numre på et OpenStreetMap. Alt i alt 5 min. arbejde, når KML filen i forvejen findes.

OpenStreetMap

Mapstraction et Meta API

Simon Willison beskrev i december, hvordan man kunne opmærke adresser med microformattet hCard, og via JavaScript bibliotekerne jQuery og Mapstraction blev disse adresser plottet ind på et Google Maps. Nu er Mapstraction ikke kun beregnet til brug med Google Maps. Mapstraction fungerer som et Meta API, der kan bruges til at kalde korttjenesterne Openstreetmap, Microsoft Virtual Earth, Yahoo Maps, Map24, MapQuest, OpenLayers og som nævnt Google Maps. Mapstraction indsætter så det indhold/infopunkter på det(de) kort, du ønsker at benytter til dit projekt.

Jeg har opmærket 5 københavnske biografer på en liste (ul elementet) og benyttet hCard for deres respektive adresser. Et hCard for en af biograferne ser således ud

  1. <li class="vcard">
  2. <h3><a title="besøg biografens hjemmeside" class="fn org url" href="http://www.grandteatret.dk/">Grand Teatret</a></h3>
  3. <div class="adr">
  4. <p class="street-address">Mikkel Bryggers Gade 8</p>
  5. <p><span class="postal-code">1460</span> <span class="locality">København K</span></p>
  6. </div>
  7. <p>Telefon: <span class="tel">33 15 08 82</span></p>
  8. <p class="geo"><span class="latitude">55.67651969417516</span>, <span class="longitude">12.570902109146118</span></p>
  9. </li>

Med jQuery og Mapstraction har jeg så lavet 3 kort med h.h.v

Google Maps med Mapstraction

Hvis du går ind i ovennævnte 3 korteksempler og under Vis >Sidens kildekilde. Her vil du se, hvordan linking til de forskellige JavaScript biblioteker ser ud. De små JavaScript konfigurationsfiler, der styrer hvad jQuery (parser hCard’ene fra mit XHTML dokument) og Mapstraction skal udføre er hhv.

Jeg har skrevet danske kommentarer til, hvad det er der sker i ovenstående JavaScript konfigurationsfiler.

Mere introduktion til Mapstraction se Andrew Turner (2007) – Get To Grips with Slippy Maps og Mapstraction Documentation

Mit næste indlæg om Mapstraction vil handle om hvordan du mixer en GeoRSS ind på forskellige kort nemt og hurtigt. Dette vil gøres uden brug af jQuery og microformats.

Dagens kalenderlåge hedder microformats

Simon Willison har skrevet dagens kalenderlåge (12. december) hos “24 ways to impress your friends”. Webdesigntippet i dag handler om hvordan man kan automatisk kan danne et Google Maps fra en adresseliste. Adresserne er selvfølgelig opmærket i microformattet hCard. Disse data fra hCard bliver med hjælp af JavaScript bibliotekerne jQuery og Mapstraction automatisk plottet ind på et Google Maps.

Det er 3. år i træk, at julekalenderen fra “24 ways to impress your friends

” med webdesigntips bliver afholdt. Vil du have resten af december måneds tips med, så er RSS her.