Cross platform GPS tracking app with Appfurnace

While at the smart city lab organised by Close And Remote Andrew Stuck ‏ (@museumofwalking), Dane Watkins (@eatmydata) and myself had a discussion and little play with the proprietary Appfurnace (which is based on phonegap) android/iphone app development environment and came up with a GPS tracking app in less than an hour. Code below, you just need to setup a map widget and some named text fields using the AppFurnace interface. Dane also hacked together a quick PHP script and MySQL DB so as to save and output the data to a webpage. [scripts coming soon]

App Furnace Code

// Here's where you should write your functions
var sub = 0;
var onoff = 0;
 
function exampleFunction() {
 
    if(onoff===0){
       ui.but.text('Stop Tracking'); 
       onoff = 1;
       af.locationSensor.start();
    }else{
       ui.but.text('Start Tracking');
       onoff = 0;
       af.locationSensor.stop();
    }
    af.locationSensor.setMoved( function(loc) {
        var latlng = af.locationSensor.getLastLocation();
        var lat = latlng.y;
        var lng = latlng.x;
        postCoords(lat,lng);
        ui.lat.text('lat: '+lat);
        ui.lng.text('lng: '+lng);
        sub++;
        ui.sub.text('Submit: '+sub);
    });
}
 
// Post data to server
function postCoords(lat,lng){
  $.ajax({
     url: "SPECIFY-URL-TO-POST-TO", 
     data: { 
        latitude: lat,
        longitude:lng
            },
            type: 'post',
                error: function(XMLHttpRequest, textStatus, errorThrown){                   
                      //popup("Error", 'status:' + XMLHttpRequest.status + ', status text: ' + XMLHttpRequest.statusText);
                },
                success: function(data){
 
                }
            });
}

HTML Output

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Google Maps JavaScript API v3 Example: Simple Icons</title>
    <style>
    html, body {
		  height: 100%;
		  margin: 0;
		  padding: 0;
			}
			#map_canvas {
			  height : 500px;
			  width:320px;
			}
			@media print {
			  html, body {
				height: auto;
			  }
			  #map_canvas {
				height: 650px;
			  }
			}
</style>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
    <script>
		function postCoords(lat,lng){
			$.ajax({
				url: "postComments.php", 
				data: { 
					latitude: lat,
					longitude:lng
					},
				type: 'post',
				error: function(XMLHttpRequest, textStatus, errorThrown){
					alert('status:' + XMLHttpRequest.status + ', status text: ' + XMLHttpRequest.statusText);
				},
				success: function(data){
				//alert("Thanks for submitting your comment!");
				console.log
 
				}
			});
		}
		var beachMarker;
		var map;
 
		window.setInterval(function() {
		 initiate_geolocation2()
		}, 10000);
 
		function initiate_geolocation() {  
            navigator.geolocation.getCurrentPosition(handle_geolocation_query,handle_errors);  
        } 
        function initiate_geolocation2() {  
            navigator.geolocation.getCurrentPosition(handle_geolocation_query2,handle_errors);  
        }   
 
        function handle_errors(error)  
        {  
            switch(error.code)  
            {  
                case error.PERMISSION_DENIED: alert("user did not share geolocation data");  
                break;  
 
                case error.POSITION_UNAVAILABLE: alert("could not detect current position");  
                break;  
 
                case error.TIMEOUT: alert("retrieving position timed out");  
                break;  
 
                default: alert("unknown error");  
                break;  
            }  
        }  
 
        function handle_geolocation_query(position){
			initialize(position.coords.latitude,position.coords.longitude) 
			//initialize(position.coords.latitude,position.coords.longitude) 
			//map.setZoom(12)
        }
        function handle_geolocation_query2(position){
			//postCoords(position.coords.latitude, position.coords.longitude)
			 var latlng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
			beachMarker.setPosition(latlng);
			map.panTo( new google.maps.LatLng(position.coords.latitude, position.coords.longitude) );
			map.setZoom(16)
			}
		function initialize(lat,lng) 
		  {
			var mapOptions = {
			  zoom: 16,
			  center: new google.maps.LatLng(lat,lng),
			  disableDefaultUI: true,
			  draggable: false,
			  mapTypeId: google.maps.MapTypeId.ROADMAP,
 
			}
			map = new google.maps.Map(document.getElementById('map_canvas'),
										  mapOptions);
 
			var image = 'images/beachflag.png';
			var myLatLng = new google.maps.LatLng(lat,lng);
			beachMarker = new google.maps.Marker({
				position: myLatLng,
				map: map
			});
		  }
    </script>
  </head>
  <body onload="initiate_geolocation()">
    <div id="map_canvas"></div>
  </body>
</html>

Comments

can you track in real time?

can you track in real time? with gps

yup

yup

Post new comment

  • You can enable syntax highlighting of source code with the following tags: <code>, <blockcode>. Beside the tag style "<foo>" it is also possible to use "[foo]". PHP source code can also be enclosed in <?php ... ?> or <% ... %>.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Allowed HTML tags: <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd> <h3> <h2> <h4> <img> <div> <table> <tr> <td> <pre>
  • Lines and paragraphs break automatically.
  • Insert image: [img:node_id align=(left|right) size=(|fullLA|fullPreview|fullSQ|halfLA|halfPO|halfSQ|thirdSQ) action=(popup|link|frame) url=url style="margin:10px;" title=text description=text]

More information about formatting options

 
info@theanthillsocial.co.uk XHTML 1.0 Strict CSS2 WAI