API geolocation Ying-Hing Lam Tjebbe Marchand DP31T 1
Inhoudsopgave Achtergrondinformatie blz. 4 Uitleg werking blz. 5 Extra functies blz. 6 Verschillende concepten Ons concept Brondvermelding Feedback 2 3
Achtergrondinformatie Geolocation is het bepalen van de positie van een apparaat via GPS of IP-addres en dat visualiseren of opslaan. Omdat geolocation je privacy schendt moet je eerst toestemming geven om het te gebruiken. Door middel van een JavaScript kan je met geolocation de latitude, longtitude, altitude en accuracy bepalen, dit zijn echter ruwe getallen en vertellen een doorsnee gebruiker niet veel. Door extra functies toe te voegen zoals een map waar je de locatie ziet kan ervoor zorgen dat een doorsnee gebruiker ook iets heeft aan de applicatie. Niet alle browsers ondersteunen geolocation, de lijst hieronder laat zien welke browsers geolocation ondersteunen. Op smartphones is je locatie nog veel nauwkeuriger, omdat de meeste een ingebouwde chip hebben genaamd GPS. GPS staat voor global positioning system die niet alleen van omliggende WiFi antennes je locatie opvragen maar ook van telefoontorens en satellieten Als locatie gebruikt in een webbrowser of een applicatie op je telefoon, dan gebruikt het standaard de GPS chip om je locatie te bepalen. Je moet dit van te voren natuurlijk wel goedkeuren voordat je het kunt gebruiken. Uitleg werking Je kunt het zo maken dat wanneer de pagina geladen is, de body tag van HTML een JavaScript functie uitvoert die ervoor zorgt dat je huidige locatie bepaalt wordt. Ondanks dat computers geen GPS hebben, kunnen ze toch door middel van omliggende WiFi antennes globaal je locatie bepalen. De functie van JavaScript werkt als volgt. Als eerste ga je kijken of de geolocation object beschikbaar is. Deze is wel of niet beschikbaar aan de hand van de browser die je gebruikt. En dat je toestemming geeft in de browser. Als de if statement waar is dan stuurt JavaScript de coordinatien door een functie die in dit geval success heet. Daar zetten ze elke locatie in aparte variable om die laten te kunnen gebruiken. Onderaan heb je nog een object met verschillende opties erin die aangeven wat JavaScript met de opties moet doen. Voorbeeld function mylocation() if(navigator.geolocation) navigator.geolocation.getcurrentposition(success, error, geo_options); else alert( Geolocation services are not supported by your web browser. ); function success(position) var latitude = position.coords.latitude; var longitude = position.coords.longitude; var altitude = position.coords.altitude; var accuracy = position.coords.accuracy; //do something with above position thing e.g. below alert( I am here! lat: + latitude + and long : +longitude ); function error(error) alert( Unable to retrieve your location due to +error.code + : + error.message); ; var geo_options = enablehighaccuracy: true, maximumage : 30000, timeout : 27000 ; 4 5
Extra functies Kaart Als je de functie die hierboven staat uitvoert dan heb je alleen nog maar coördinaten. Je kunt bijvoorbeeld een Google Maps kaartje erbij laten zien met een punt van je locatie, dit is gebruiksvriendelijk om het zo te laten zien. Wat je moet doen als je ook een kaartje wilt toevoegen is allereerst een lege div container toevoegen aan je HTML body. Als tweede moet je script link erin zetten die contact maakt met de Google Servers. En daarna moet je nog een paar extra regels code toevoegen aan je script. <div id= mapholder ></div> <script src= http://maps.google.com/maps/api/js?sensor=false ></script> function success(position) var latitude = position.coords.latitude; var longitude = position.coords.longitude; var altitude = position.coords.altitude; var accuracy = position.coords.accuracy; latlon = new google.maps.latlng(latitude, longitude) mapholder = document.getelementbyid( mapholder ) mapholder.style.height = 250px ; mapholder.style.width = 500px ; var myoptions = center:latlon,zoom:14, maptypeid:google.maps.maptypeid.roadmap, maptypecontrol:false, navigationcontroloptions:style:google.maps.navigationcontrolstyle.small Locatie verversen Wanneer je jouw huidige locatie hebt opgevraagd is dat eenmalig. Dat betekent wanneer je je eigen verplaatst de locatie niet wordt geüpdatet. Je kunt het maken dat JavaScript dat wel gaat doen door middel van een functie. Deze functie heet watchposition(). Na verloop van tijd voert JavaScript de functie om je huidige locatie op te vragen opnieuw uit. function startwatch() if (navigator.geolocation) var optn = enablehighaccuracy : true, timeout : Infinity, maximumage : 0 ; watchid = navigator.geolocation.watchposition(showposition, showerror, optn); else alert( Geolocation is not supported in your browser ); function stopwatch(). if (watchid) navigator.geolocation.clearwatch(watchid); watchid = null; var map = new google.maps.map(document.getelementbyid( mapholder ), myoptions); var marker = new google.maps.marker(position:latlon,map:map,title: You are here! ); Alle code die verschilt met de huidige zijn gemarkeerd in een andere kleur. 6 7
Afstand afgelegd Als je een begin en eind positie hebt kun je ook bepalen hoeveel afstand dat je hebt afgelegd. Je moet dan een beginpositie hebben opgeslagen en een nieuwe positie. (De positie waar je op dat moment bent) Daarna kan JavaScript dat voor je uitrekenen. navigator.geolocation.watchposition(function(position) document.getelementbyid( distance ).innerhtml = calculatedistance(startpos.coords.latitude, startpos.coords.longitude, position.coords.latitude, position.coords.longitude); ); Je roept in JavaScript een functie aan waarna je er twee variable in stopt. Je oude longtitude en langtitude. Vervolgens vraag je jouw huidige locatie aan en gaat JavaScript en verschil tussen die 2 locaties uitrekenen. Verschillende concepten Een applicatie waarbij de leraar kan zien waar zijn leerlingen zijn. Een applicatie waarbij je berichten kan posten die andere mensen kunnen zien en daarbij staat er een locatie bij weergegeven. Een applicatie waarbij je het weer kunt zien op je huidige locatie. Een applicatie waarbij je een roadtrip kunt uitstippelen. Een applicatie waarbij je een foto kunt maken als je iets ziet in de stad wat niet klopt en dat je die foto dan kunt versturen samen met je locatie. Ons concept Ons basisconcept is dat je foto s kunt uploaden samen met je locatie. Je krijgt dan alle foto s te zien op een kaart. Later kunnen gaan uitbreiden met dat je commentaar kunt toevoegen aan de foto en dat je je eigen account krijgt waarop je kunt inloggen. Zo kun je dan zien van wie die foto is. We hebben het concept voornamelijk bedacht voor Paasop. Mensen kunnen dan foto s uploaden naar onze service over Paaspop waarna iedereen kan zien waar de foto precies op Paaspop gemaakt is. Paaspop is namelijk erg groot en het is leuk dat je kunt waar de foto gemaakt is. Bronvermelding http://apress.jensimmons.com/v5/pro-html5-programming/ch5.html Feedback De API is nog niet erg diep uitgezocht, dus hier nog wel even aandacht aan besteden. Zowel in woord als ook in code. Er staat voornamelijk het meest voor de hand liggende. Het concept is in principe goed, maar geef aan waarom je dit uitzoek. Kan je dit gebruiken voor je portfolio of de Paaspop app? Wat is de meerwaarde van het concept dat je hebt gemaakt / gaat maken? David: Het zou leuk zijn als je verschillende users kan maken en je eigen foto s kan delen met alleen de mensen die je specifiek aanwijst, zoals familie of vrienden. Als er meerdere fotos zijn op 1 locatie zou het leuk zijn als je op 1 locatie door meerdere fotos kan scrollen. 8 9
10