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
<li class="vcard"><h3><a title="besøg biografens hjemmeside" class="fn org url" href="http://www.grandteatret.dk/">Grand Teatret</a></h3><div class="adr"><p class="street-address">Mikkel Bryggers Gade 8</p><p><span class="postal-code">1460</span> <span class="locality">København K</span></p></div><p>Telefon: <span class="tel">33 15 08 82</span></p><p class="geo"><span class="latitude">55.67651969417516</span>, <span class="longitude">12.570902109146118</span></p></li>
Med jQuery og Mapstraction har jeg så lavet 3 kort med h.h.v
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.
- googlemaps.js (for Google Maps)
- openstreet.js (for Openstreetmap)
- microsoft.js (for Microsoft Virtual Earth)
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.
En Trackback
[...] lovede for et stykke tid siden et eksempel med Mapstraction (API til forskellige webkortservices) og en GeoRSS. Her kommer der så det lovede eksempel. Jeg [...]