HTML5 is onderweg en brengt nieuwe eigenschappen/kenmerken (features) met zich mee zoals form controls, API’s, multimedia-integratie, nieuwe structuur en semantics.
Een van de nieuwe APIs is de Geolocation API.
Wat is Geolocation?
Geolocation is een techniek om de geografische locatie van een bezoeker te bepalen door middel van het IP-adres en andere middelen.
Wat zouden de mogelijke toepassingen voor de Geolocation API zijn?
Internet is niet meer alleen toegankelijk via de PC, maar ook via de mobiele telefoon. Met Geolocation kan je content en diensten zien/krijgen die gebaseerd zijn op locatie (content location awareness).
Location Aware Application (Applicatie gebaseerd op locatie)
Denk bijvoorbeeld aan een on-line landelijke krant. Die kan nu regionale artikelen aanbieden die gebaseerd zijn op de locatie van haar gebruikers. Een ander voorbeeld: stel dat je wil weten welke restaurants er zijn in de omgeving waar je je op dat moment bevindt maar je weet het adres niet. Via je mobiele telefoon ga je naar een website die dit soort diensten aanbiedt en kun je zonder veel te doen een overzicht krijgen van restaurants in je buurt.
Demo/Voorbeeld
Geolocation is simpel te implementeren. Met deze simpele javascript code kun je je positie achterhalen: navigator.geolocation.getCurrentPosition();
Hierbij een demo (met google maps):
<html>
...
<script type="text/javascript">
function initialize()
{
// Get the current position with W3C Geolocation API
navigator.geolocation.getCurrentPosition(getLocation);
// Pass the latitude and longitude to Google Maps
function getLocation(pos)
{
var position = new GLatLng(pos.coords.latitude,pos.coords.longitude);
var map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(position, 16);
var marker = new GMarker(position);
map.addOverlay(marker);
map.setUIToDefault();
}
}
</script>
…
</html>
Dit is een simpele demo om te laten zien hoe eenvoudig het is de Geolocation API te gebruiken in webpagina’s. Geolocation is niet 100% nauwkeurig zoals GPS als je op straatniveau wil gaan, maar biedt veel opties wat betreft content gebaseerd op locatie als je bijvoorbeeld op stadsniveau gaat.
Bekijk de demo zelf (werkt alleen op iPhone en Firefox 3.5+) :
http://www.hoppinger.com/playground/html5/geolocation/
Wie is Luís?
Ik ben een student van Grafimediatechnologie en ben bezig met afstuderen bij Hoppinger. Als afstudeerproject ga ik onderzoek doen naar platform-onafhankelijke mobiele webapplicaties voor smartphones. Hoe kunnen webbedrijven platform-onafhankelijke mobiele webapplicaties bouwen met behulp van webtechnologie zoals HTML, CSS, Javascript enz.