Reality Is Important: Geolocation and Mapping

In this episode we're going to add on to our web based geolocation/mapping utility and add in tracking. the tracking format that I am going to build is in GPS eXchange Format or GPX. This will build an XML/ASCII file that is compatible with just about any GPS or mapping utility. The format, however, is not essential. It would just as easy to create JSON or CSV.

For instructional purposes, the JavaScript is verbose. There is most definitely more elegant ways of coding this solution but the intent is for this to be ported and modified as you will.

In order to record a track with our mapping application we have to consider the problems:

What information is available about the positioning?
What information should be retained?
When is the data retained?
How is the data retained?
What should be done with the retained data?

In the introductory application, we are only retaining the latitude and longitude which are basically all that is needed to hold a track. A developer may find it useful to also stamp the time along with the positioning. There is also other information available such as elevation that can be recorded into the track. For our purposes, we will be working with the latitude and longitude only at this point.

The information will be retained just like any other programmer stores data, in a variable or more specifically an array. Keeping things simple, I added in a small global scope array outside of any of the functions.
var locations = [];

To trigger the tracking I added in some buttons to the HTML above the map iFrame. Since this is not a tutorial about event handling in JavaScript, I just added an onclick event to each button.

<button id="start" onclick="startTrack();">Start Track</button>
<button id="stop" onclick="stopTrack()">Stop Track</button>

To accomodate the tracking I added in one more global (last one, I promise).
var recording = false; When a start track event is triggered the recording pseudo-boolean is set to true and an alert notifies the user.

function startTrack() {
 alert("recording started ...");
 recording = true;
}

Now back in our actual function that displays the map, we need to do something with this recording data. For simplicity sake, it's pushed into that locations array.

if (recording)
     locations.push(lat + "," + lon);

That's it then, we're tracking and retaining our data. You should be able to do anything with it at this point, since it's stored up. So now we build the GPX/XML file.


function stopTrack() {
 
   // let the user know something happened.
   alert("recording stopped ...");
   recording = false;

   // generate our XML headers
   document.write("<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n");
   document.write("<gpx xmlns=\"http://www.topografix.com/GPX/1/1\">\n");
   document.write("<trk>\n");
   document.write("\t<name>Recorded Track</name>");
   // you're smart enough to add a time in here
   document.write("\t<desc>Jul 28, 2010  5:46 am</desc>");
   document.write("\t<trkseg>");

   // loop our previously created locations array 
   // placing the lat and lon into the nodes
   for (var i=0;i<locations.length;i++)
   {
      document.write("\t\t<trkpt lat=\"" 
         + locations[i].replace(',' ,' lon=') + "\" />\n");
      // here is where you would want to add in an
      //<ele>vation and definitely a <time>
   }

   // close out the XML
   document.write("\t</trkseg>\n");
   document.write("</trk>\n");
   document.write("</gpx>");
}

Here is the paradox with this application now...this works well on a mobile device but the mobile device does not to know how to handle our file in the mobile browser. Also, is that really a paradox? To address this, in the next tutorial we'll be deprecating pretty much everything here and building JSON to store our locations and push it to a Python webservice that can actually do something with the recorded data. You should at this point be able to modify this as necessary to make something useful out of the stored track.
This application is available for demonstration at http://qrencodr.appspot.com/geolocateWithTracking.html. Since this is all client-side code, the full source is available with a view source at that address as well.

Reality Is Important

15 October 2010

Geolocation and Mapping - Recording a Track

0 comments: