Geolocation

Jeanine Meyer
Mathematics/Computer Science
Senior Seminar
 Geolocation
• Part of HTML5 spec
• Functions to [try to determine] location
– latitude
– longitude
– accuracy
– [altitude]
– [altitude accuracy]
– [heading: direction of travel of device]
– [speed: speed of device]
 How?
• Multiple possibilities
– global position systems (gps)
• uses readings from multiple (generally 4) satellites to
determine 3D position. Satellite sends message including
time sent and receiver (gps devices are only receivers) do
calculation
http://en.wikipedia.org/wiki/Global_Positioning_System
– cell phone towers
– WiFi hot spots (with locations pre-determined,
possibly by Google or other company war driving.
– IP addresses associated with locations
 Maps app
• Use Google Maps API to bring up map at current
location.
• Respond to clicking by placing a marker and
calculating distance.
• Provide way to change to fixed set of locations
or the last marker.
• http://faculty.purchase.edu/jeanine.meyer/html5
workshop/geolocationdistance2.html
– need to give permission to Share Location
• Works in Chrome and Firefox. Does not work in
Safari for Windows.
Opening screen
Brings up ….
After click on map
After choose CUNY
 Mapping
• Google Maps API (and other applications)
defines positions using special latitude/longitude
data object
• Access to Google Map is created for a place in
the HTML document, using specified map
options
• HTML has a specification for doing geolocation.
– navigator.geolocation produces latitude and longitude
values
 How to get positions besides
geolocation?
• Google Maps
– get to a map
• Browser location
javascript:void(prompt('',gApplication.getMap().getCenter()));
OR
• Click on green beaker and enable the drop latlng marker
– right click then normal click

• www.wolframalpha.com
• Get latitude & longitude from maps
 My program(s)
• Tries to use the geolocation
• Gives user option to pick base location
• User can click on map and find distance
from base center.
• Can change base to last clicked on
position.
• General access to Google Maps features.
 Basics
• if (navigator.geolocation) checks if
this object exists. Does NOT cause any errors.

if (navigator.geolocation) {
navigator.geolocation.getCurrentPosit
ion
(handler,problemhandler);
}
• handler when things go okay.
problemhandler when there are errors,
including user deciding not to share location.
 Create/Access
Google Maps
• map = new
google.maps.Map(document.getElementB
yId("place"), myOptions); brings up
Google Maps in the div with id "place" using
the parameters in myOptions.
<div id="place" style="width:600px;
height:400px"></div>
• NOTE: use of % for width and height did not work when <!
DOCTYPE html> used.
 style, external script
<style>
header {font-family:Georgia,"Times
New Roman",serif;
font-size:20px;
display:block;
}
</style>
<script type="text/javascript"
src="http://maps.google.com/maps/api
/js?sensor=false"></script>
<script language="Javascript">
 init() code
function init() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition
(handler,problemhandler);
}
else {
if (document.getElementById("place")) {
document.getElementById("place").innerHTML
= "I'm sorry but geolocation services are
not supported by your browser";

document.getElementById("place").style.color
= "#FF0000";
} } }
function handler(position) {
var mylat =
position.coords.latitude;
var mylong =
position.coords.longitude;
makemap(mylat,mylong);
}
 error handling
function problemhandler(prob) {
switch(prob.code) {
case 1:
document.getElementById("place").innerHTML =
"User declined to share the location
information.";
break;
case 2:
document.getElementById("place").innerHTML =
"Errors in getting base location.";
break;
case 3:
document.getElementById("place").innerHTML =
"Timeout in getting base location."; }
document.getElementById("header").innerHTML =
"Base location needs to be set!"; }
 variables
var listener;
var map;
var markersArray =[];
var blatlng;
var myOptions;
var locations = [
[35.1494444,-90.0488889,
"Memphis, TN"], [41.04796,-
73.70539,"Purchase College/SUNY"],
[41.878928, -87.641926,"IIT"]
];
 create/access map
function makemap(mylat, mylong) {
blatlng = new
google.maps.LatLng(mylat,mylong);
myOptions = {
zoom: 14,
center: blatlng,
mapTypeId:
google.maps.MapTypeId.ROADMAP};
map = new
google.maps.Map(document.getElementById("p
lace"), myOptions);
listener =
google.maps.event.addListener(map,
'click', function(event) {
checkit(event.latLng);}); }
 response to click on map
function checkit(clatlng) {
var distance = dist(clatlng,blatlng);
distance = Math.floor((distance+.005)*100)/100;
var distanceString = String(distance)+" miles";
marker = new google.maps.Marker({ position:
clatlng,
title: distanceString,
map: map });
markersArray.push(marker);
document.getElementById("answer").innerHTML =
"The distance from base to most recent marker
is "+String(distance) +" miles."; }
 distance function
function dist(point1, point2) {
//spherical law of cosines
//var R = 6371; // km
var R = 3959; // miles
var lat1 = point1.lat()*Math.PI/180;
var lat2 = point2.lat()*Math.PI/180 ;
var lon1 = point1.lng()*Math.PI/180;
var lon2 = point2.lng()*Math.PI/180;
var d = Math.acos(Math.sin(lat1)*Math.sin(lat2) +
Math.cos(lat1)*Math.cos(lat2) *
Math.cos(lon2-lon1)) * R;
return d;
}
 change base
using radio buttons
function changebase() {
for(var i=0;i<locations.length;i++) {
if (document.f.loc[i].checked) {
makemap(locations[i]
[0],locations[i][1]);

document.getElementById("header").innerHTM
L = "Base location is "+locations[i][2];
}
}
return false;
}
</script> </head> <body onload="init();">
<header id="header">Base location is your current
geolocation</header>
<div id="place" style="width:600px;
height:400px"></div>
<div id="answer"></div>
Change base location: <br/>
<form name="f" onSubmit=" return changebase();">
<input type="radio" name="loc" /> Memphis<br/>
<input type="radio" name="loc" /> Purchase
College<br/>
<input type="radio" name="loc" /> Illinois
Institute of Technology<br/>
<input type="submit" value="CHANGE">
</form> </body> </html>
 Variation
• Geolocation returns accuracy and, maybe,
other information, including altitude.
• These applications mark the center with a
red x and display other information
– http://faculty.purchase.edu/jeanine.meyer/html
5workshop/geolocation.html
– http://faculty.purchase.edu/jeanine.meyer/html
5workshop/geolocationkm.html
• Note: accuracy is given in meters in both cases
 Critical code
• Uses custom image for marker (the red x)
var xmarker = "x1.png";
…
marker = new google.maps.Marker({
position: blatlng,
title: "center",
icon: xmarker,
map: map });
 getCurrentPosition
• 3rd parameter to getCurrentPosition call
positionopts = {enableHighAccuracy: true} ;
…
navigator.geolocation.getCurrentPosition(handler,
problemhandler, positionopts);
• Add form coutput for output
document.coutput.lat.value = mylat;
document.coutput.lon.value = mylong;
document.coutput.acc.value =
position.coords.accuracy;
document.coutput.alt.value =
position.coords.altitude;
document.coutput.altacc.value =
position.coords.altitudeAccuracy;
document.coutput.heading.value =
position.coords.heading;
document.coutput.speed.value =
position.coords.speed;
 Next variation: persistent storage
• Normal situation: no changes to client computer beyond
downloaded files.
• cookies invented (with a pleasing name) to be files
associated with each browser to be used only by same
server site.
– convenience: IDs and passwords, preferences, etc.
– behavioral marketing!
• Early HTML supported cookies. localStorage is a new
variation.
• CAUTION: Firefox requires the program to run on a
server! Chrome allows running locally.
• http://faculty.purchase.edu/jeanine.meyer/html5
workshop/geolocationdistance4.html
 Opening
(after permission)
New base
 Objective: add to maps app
• 3 buttons: store base, retrieve base
stored, change base to last marker
• localStorage used name-value pairs.
• Do error checking!
– check for ability to do localStorage
– check if there is a stored time.
 Strategy
• Three buttons, invoking store(), retrieve(),
and changebasetomarker()
• Use try { } catch(e) { } . The
code in try will NOT trigger an error, but if
there is one, will go to catch.
• Also use typeof(localStorage) to
test if this is defined.
<button onClick="javascript:store();">Store
base. </button>
<button
onClick="javascript:retrieve();">Restore
last base. </button>
<button
onClick="javascript:changebasetomarker();"
>Change base location to last marker.
</button> <br/>
function store() {
if (typeof(localStorage) == "undefined") {
alert("Browser does not recognize HTML local
storage.");
}
else { try {
localStorage.setItem("baselat",blatlng.lat())
;
localStorage.setItem("baselng",blatlng.lng());
localStorage.setItem("basename",basename);
}
catch(e) {
alert("Error with use of local storage:
"+e);}
}
return false; }
function retrieve() {
if (typeof(localStorage) == "undefined") {
alert("Browser does not recognize HTML local
storage.");
}
else { try {
oldlat= localStorage.getItem("baselat");
oldlng = localStorage.getItem("baselng");
oldname = localStorage.getItem("basename");
if (oldlat==null) {
alert("No base stored");}
else {makemap(Number(oldlat),Number(oldlng));
basename = oldname;
document.getElementById("header").innerHTML =
"Base location is "+basename; } }
catch(e) {
alert("Error with use of local storage: "+e);} }
return false; }
 changes base to marker
function changebasetomarker() {
if (lastmarker!="undefined") {

makemap(lastmarker.lat(),lastma
rker.lng());
basename = "marker";
}
}
 Comments
• Error checking good!
• Many GIS programs with common/similar
features
• Need to determine where information goes
– my locations array kept information in my
JavaScript
 Your job
• Try
http://faculty.purchase.edu/jeanine.meyer/
html5workshop/geolocationkm.html
• Look at red x.
• Locate your position and click on map.
• See how far this is from center.
• See claimed accuracy.
• REPORT!
 Discussion
• Geolocation?
– Good thing: convenience, various
applications. What have you used?
– Bad thing:
• accuracy is mixed depending on many factors
including type of device and general location
• invasion of privacy?
– stalking
– behavioral marketing
• What do you think?