Google Maps voor het weergeven van een fotoalbum
Het afgelopen half jaar heb ik mij bezig gehouden met GIS en alles daaromheen. Zo heb ik onder andere een applicatie met Google Maps gemaakt. Wat mij opviel was hoe beperkt de API was, maar dat er toch verrassend veel mee gedaan kan worden.
Om dit te laten zien heb ik er voor gekozen om de ballonvaart die laatst binnen Finalist georganiseerd is op een kaart weer te geven. Een aantal foto’s die ik daarbij genomen heb staan aangegeven op de kaart. (Deze blogbijdrage is een vervolg op het artikel Een beetje GIS voor iedereen van Felix Ogg).
Een demo is hier te zien.
Het leuke van het weergeven van foto’s op een kaart is dat er een duidelijk beeld onstaat waar bepaalde foto’s gemaakt zijn. Ideaal dus voor reizen/vakanties waarbij je veel onderweg bent geweest.
Het opzoeken van de route
Een van de eerste dingen die hiervoor nodig zijn is het opzoeken van de route die afgelegd is. Deze route kan opgezocht worden met Google Maps. Met de volgende tool kan de route uitgestippeld worden:
Wanneer de route compleet is ingevuld staat er onderaan de pagina in het veld “Encoded polyline� en “Encoded levels� wat tekst. Sla die tijdelijke ergens op, deze worden later gebruikt om de route op de kaart weer te geven.
Als je een GPS apparaat hebt dat ook aan te sluiten is op de computer dan is de kans groot dat de route uitgelezen en ingeladen kan worden in Google Maps. Hierover is veel informatie te vinden op internet.
Het uitkiezen van de locatie voor de foto
Dit kan gedaan worden met dezelfde utility. Wanneer de punt op de kaart geplaatst is staat er rechts naast de kaart ‘Latitude’ en ‘Longtitude’. Kopieer deze waarden tijdelijk ergens naartoe en zet erbij welke foto er bij hoort. Dit wordt later gebruikt om een foto op een specifieke plek neer te zetten.
Tip: Soms is het handig om de satelliet view aan te zetten. Dit maakt het makkelijker om de plek waar een foto genomen is terug te vinden.
Het geheel weergeven
Om het geheel weer te geven moet het “over� het kaartje van Google Maps heen gezet worden.
Hiervoor worden de volgende bestanden gebruikt:
Een HTML bestand (webpagina) met daarin de Google Maps applicatie genaamd “index.html�
Een Javascript bestand (script) met daarin de code voor de fotokaart genaamd “photoMap.js�
De bestanden die hieronder staan kunnen gebruikt worden als voorbeeld. Er staat in aangegeven wat er aangepast moet worden om het om te bouwen naar de eigen kaart.
Beide bestanden moeten in dezelfde map (directory) staan.
index.html
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<!-- Vervang deze key door je eigen key wanneer je de applicatie wil draaien op een andere locatie als je eigen computer (hosten op localhost) Dit zul je zoiezo moeten dan als je het aan anderen aan wilt bieden op het web-->
<script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAzr2EBOXUKnm_jVnk0OJI7xSosDVG8KKPE1-m51RBrvYughuyMxQ-i1QfUnH94QxWIa6N4U6MouMmBA" type="text/javascript"></script>
<script src="photoMap.js" type="text/javascript"></script>Om de pagina te kunnen weergeven op een webpagina zodat anderen hem kunnen bekijken moet er een key aanvraagd worden. Deze key wordt vervolgens in het “key� gedeelte bij het Google Maps script geplakt.
photoMap.js (In het commentaar staat waar je wat moet invoegen)
//Globale variable voor de Google Map kaart var map; //Maak het foto icoontje var photoIcon = new GIcon(G_DEFAULT_ICON); //Het plaatje voor het icoontje photoIcon.image = "http://www.google.com/intl/en_ALL/mapfiles/cb/camera.png"; photoIcon.iconSize = new GSize(25, 20); //Het plaatje wordt verankerd op het coordinaat zelf (anders hing het plaatje er boven) photoIcon.iconAnchor = new GPoint(16, 16); //Geen schaduw photoIcon.shadowSize = new GSize(0, 0); markerOptions = { icon : photoIcon }; //initialiseerd Google Maps function initialize() { if (GBrowserIsCompatible()) { //Maakt een nieuwe Google Map instantie aan die weergegven wordt op de div map_canvas map = new GMap2(document.getElementById("map_canvas")); //Voegt de controls toe aan de kaart map.addControl(new GSmallMapControl()); map.addControl(new GMapTypeControl()); //Stelt het beginpunt in van de kaart (in lengtegraad, breedtegraad) //Deze waardes kun je zelf veranderen (coordinaten kun je opzoeken met het tooltje) map.setCenter(new GLatLng(52.00168322631823, 5.234096013131895), 11); //Sattelietkaart weergeven map.setMapType(G_HYBRID_TYPE); //Voegt de route toe aan de kaart voegRouteToe(); //Voegt de foto's toe voegFotosToe(); } } //Voegt de routelijn toe aan de kaart function voegRouteToe() { //Vul in de onderste variable je eigen route in (Encoded polyline) var routePoints = "qay|Hgrc^v{Yymr@"; //Hetzelfde voor levels (Encoded levels) var routeLevels = "BB"; var encodedRoute = new GPolyline.fromEncoded( { //De kleur van de routelijn color : "#ff0000", //De dikte van de lijn weight : 10, points : routePoints, levels : routeLevels, zoomFactor : 32, numLevels : 4 } ); map.addOverlay(encodedRoute); } //Voegt alle foto's toe aan de kaart function voegFotosToe() { //Hier voeg je je eigen foto's toe //Bijvoorbeeld: voegFotoToe(52.07111000000000, 5.102780000000000, "DSC02815.JPG", "thumbs/DSC02815.JPG"); voegFotoToe(51.93268204669113, 5.365003072778414, "DSC02971.JPG", "thumbs/DSC02971.JPG"); voegFotoToe(52.03614110823083, 5.164874644755586, "DSC02869.JPG", "thumbs/DSC02869.JPG"); voegFotoToe(51.99133185457264, 5.256194850804767, "DSC02934.JPG", "thumbs/DSC02934.JPG"); voegFotoToe(52.05933874397426, 5.123439924263044, "DSC02834.JPG", "thumbs/DSC02834.JPG"); voegFotoToe(51.99376129356568, 5.242014144243909, "DSC02919.JPG", "thumbs/DSC02919.JPG"); voegFotoToe(52.02071389136849, 5.191854551276362, "DSC02884.JPG", "thumbs/DSC02884.JPG"); voegFotoToe(52.02756172978174, 5.176970897706106, "DSC02878.JPG", "thumbs/DSC02878.JPG"); voegFotoToe(52.00295962499568, 5.221910784849850, "DSC02911.JPG", "thumbs/DSC02911.JPG"); voegFotoToe(52.04566706191142, 5.148109981706405, "DSC02860.JPG", "thumbs/DSC02860.JPG"); voegFotoToe(52.06947389808716, 5.115268961884986, "DSC02829.JPG", "thumbs/DSC02829.JPG"); voegFotoToe(52.06302910421798, 5.119498041728534, "DSC02837.JPG", "thumbs/DSC02837.JPG"); voegFotoToe(52.05316137177421, 5.135495511411209, "DSC02850.JPG", "thumbs/DSC02850.JPG"); voegFotoToe(52.05617448262564, 5.129379522547739, "DSC02843.JPG", "thumbs/DSC02843.JPG"); voegFotoToe(52.07011598686351, 5.105347261884005, "DSC02822.JPG", "thumbs/DSC02822.JPG"); voegFotoToe(51.93268204669113, 5.365003072778414, "DSC02988.JPG", "thumbs/DSC02988.JPG"); voegFotoToe(51.93475333529715, 5.361285836513470, "DSC02986.JPG", "thumbs/DSC02986.JPG"); voegFotoToe(51.96287398442176, 5.309844963987824, "DSC02970.JPG", "thumbs/DSC02970.JPG"); voegFotoToe(51.94251208390852, 5.340620787697671, "DSC02981.JPG", "thumbs/DSC02981.JPG"); voegFotoToe(51.96734916629863, 5.302925329493826, "DSC02960.JPG", "thumbs/DSC02960.JPG"); voegFotoToe(51.97293223128634, 5.307779896135597, "DSC02951.JPG", "thumbs/DSC02951.JPG"); } //Voegt een foto toe aan de kaart //lat de lattitude (breedtegraad) van de foto //lng de longtitude (lengtegraad) van de foto //photoURL de URL naar de foto waarnaar gelinkt wordt //thumbURL een thumbnail van de foto function voegFotoToe(lat, lng, photoURL, thumbURL) { var coords = new GLatLng(lat, lng, true); var marker = new GMarker(coords, markerOptions); GEvent.addListener(marker, "click", function() { marker.openInfoWindowHtml("<a href="http://blog.finalist.nl/wp-admin/%22%20+%20photoURL%20+%20%22" target="_blank"><img src="http://blog.finalist.nl/wp-admin/%22%20+%20thumbURL%20+%20%22" height="200" width="200" /></a>"); } ); map.addOverlay(marker); }
Het bekijken van de kaart
Wanneer het geheel opgeslagen is kun je het gewoon lokaal met een browser bekijken. Wanneer je het ergens op het web wil plaatsen zul je een Google Maps API key aan moeten vragen.
Verdere mogelijkheden
De bovenstaande code zou ook zo aangepast kunnen worden dat er gelinkt wordt naar een fotoalbum in plaats van Ă©Ă©n enkele foto (handig op een plek waar veel foto’s genomen zijn). Zo zou bijvoorbeeld op een wereldkaart al de plekken kunnen weergeven waar je ooit op vakantie bent geweest, met daarachter het fotoalbum van die vakantie.
Een andere mogelijkheid is doorlinken naar een andere Google Map, met daarop in detail de route met foto’s van die vakantie.
Meer informatie
Voor meer informatie en voorbeelden over Google Maps zijn de volgende sites handig:
Concept
Voorbeelden
Mapki (wiki over Google Maps)
Conclusie
Google Maps biedt een laagdrempelige manier om zelf aan de slag te gaan met kaarten. In vergelijking tot andere GIS applicaties waarmee ik gewerkt heb is Google Maps de handigste. Wanneer ik zoiets zou moeten maken met een andere GIS applicatie zou ik veel meer tijd kwijt zijn en veel meer moeten leren van GIS in het algemeen. Verder zou het moeilijk(er) zijn om aan bijvoorbeeld sattelietbeelden en benodigde software te komen.
Het nadeel van Google Maps is echter wel dat je afhankelijk bent van Google. Zij kunnen zomaar de licentie ervan veranderen zodat er bijvoorbeeld altijd reclameboodschappen in zitten. Ook mag je Google Maps niet op een beveiligde pagina gebruiken (iedereen moet er bij kunnen). Om hier van af te komen zal er een licentie gekocht moeten worden bij Google.
Ik denk echter niet dat de bovenstaande nadelen een groot probleem zullen zijn voor de meeste mensen. Daarom wens ik ook iedereen veel plezier met het maken van je eigen foto kaart!
Beste Aran,
Laat me mij even voorstellen. Ik ben 41 en ben amateur op gebied van software (ik ben namelijk in het dagelijks leven financieel directeur en heb dus beperkt met ICT te maken). Ik heb wel via HTML een eigen site gemaakt als hobby (www.detukkies.nl). Mijn volgende “zondagavonddoel” is een plattegrond op het internet (dat lukt wel) met bullets waar je op kunt klikken en dan krijg je oude ansichtkaarten. Dat laatste wil nog niet lukken. Zojuist lees ik jouw verhaal en heb ik voor het eerste een handreiking. Het moet nu gaan lukken. Thanks.
Oh ja, dat vind ik dus zo mooi, dat mensen kennis willen delen, en net zoals Bill Gates, daar de hoofdprijs voor willen hebben. Dan die google jongens. Die willen wel verdienen, maar niet aan de gewone man, maar aan het grote geld van adverteerders, en dat vind ik dan weer wel mooi.
Johan
Johan Tuk April 13, 2008 17:57
Great work.
Coye October 29, 2008 3:59