This article is Part in a series of how to use latitude and longitude (geolocation) in xAPI. If you have not yet viewed the introduction, please head on over to Capture Latitude and Longitude with xAPI (GeoLocation) and save to Learning Record Store.
Part 2 – Building the Framework
Part 3 – Building and sending xAPI Statement
Getting started
First thing we need to do is setup a basic HTML page. We really only need one HTML page for this project. Go ahead and create the page using the HTML below and call it index.html
<!doctype html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>xAPI GeoLocation</title> </head> <body> </body> </html>
We’re going to need jQuery and also the link to Google Maps. You will need your Google Maps API Key here as well. Let’s add these in the HEAD tag.
<!doctype html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>xAPI GeoLocation</title> <script src="https://code.jquery.com/jquery-3.5.1.min.js" type="text/javascript"></script> <script defer src="https://maps.googleapis.com/maps/api/js?key=Your-API-Key"></script> </head> <body> </body> </html>
Google Maps needs to know where to place the map. We’ll create a div that will contain the map. Add this in the BODY tag.
<!doctype html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>xAPI GeoLocation</title> <script src="https://code.jquery.com/jquery-3.5.1.min.js" type="text/javascript"></script> <script defer src="https://maps.googleapis.com/maps/api/js?key=Your-API-Key"></script> </head> <body> <div id="map"></div> </body> </html>
Style it
The div we just created needs to include some CSS to tell it how big to display. For simplicity, we will add some CSS to the STYLE tags.
<!doctype html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>xAPI GeoLocation</title>
<style>
/* Set the size of the div element that contains the map */
#map {
min-height: 800px;
width: 98.5%;
margin-left: 15px;
}
</style>
<script src="https://code.jquery.com/jquery-3.5.1.min.js" type="text/javascript"></script>
<script defer src="https://maps.googleapis.com/maps/api/js?key=Your-API-Key"></script>
</head>
<body>
<div id="map"></div>
</body>
</html>
Get the location
In order to kick off the plotting of your location, we need to initiate the Google Maps. We’re going to use the promise function of JavaScript. Promise allows you to associate handlers with an asynchronous action’s eventual success value or failure reason.
This can be done in one of two ways. We can add an external JS file and include this in the HEAD section of the HTML file, or we can include a SCRIPT tag. We will add a new file and keep all the JS seperate. Go ahead and create a new file called app.js and then include it in the HEAD of the HTML file.
<!doctype html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>xAPI GeoLocation</title>
<style>
/* Set the size of the div element that contains the map */
#map {
min-height: 800px;
width: 98.5%;
margin-left: 15px;
}
</style>
<script src="https://code.jquery.com/jquery-3.5.1.min.js" type="text/javascript"></script>
<script defer src="https://maps.googleapis.com/maps/api/js?key=Your-API-Key"></script>
<script src="app.js"></script>
</head>
<body>
<div id="map"></div>
</body>
</html>
In the JS file, add the following code:
var currentLocation;
var geolocation = {};
$(document).ready(function(){
var locationPromise = getLocation();
locationPromise
.then(function(loc) {
// Initialize and add the map
currentLocation = {lat: geolocation["lat"], lng: geolocation["long"]};
map = new google.maps.Map(
document.getElementById('map'), {zoom: 13, center: currentLocation});
new google.maps.Marker({position: currentLocation,map,title: "This is where I am!"});
})
.catch(function(err) { console.log("No location"); });
})
function getLocation(callback) {
var promise = new Promise(function(resolve, reject) {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(
function(position){
resolve("@" + position.coords.latitude + "," + position.coords.longitude)
geolocation["lat"] = position.coords.latitude;
geolocation["long"] = position.coords.longitude;
return true;
}
);
} else {
reject("Unknown");
return false;
}
});
return promise;
}
There’s quite a bit in there, so let’s break it down into some simple terms
We kick off with checking the document has loaded using jQuery.
The the Promise is called on the getLocation() function. This is the function that will get the current location (showing the warning in the browser). We add the coordinates to an array called geolocation. This is so we can get the value later.
Once we have the location, we load the Google Map and set the centre to the our current location. We then add a generic marker so we can see where we are on the map.
Go ahead and save all the files and try and run the index.html file in your browser. Below is what you should have. This is in Microsoft Edge, but should work in any other modern browser.
Now that we have the basics setup, let’s add some xAPI.
Part 1 – Introduction Part 3 – Building and sending xAPI Statement
8 Responses