Forum | Appery.io

Hello all! I'm a new user of Tiggzi, but I really enjoy their product. Anyways, I've started developing my first app, and I would really like to create a page that does something like this:

Create a page that tracks via geolocation, and record that tracking data, i.e. mileage traveled until tracking is terminated. Could this be accomplished and the data be collected and rendered into a graphical depiction that may be shared via social plugin?

The graphics would consist of a screenshot of the route taken over that period on a map, along with a line graph of altitude change over the course of that route. The termination would also produce an "average speed" figure based on time elapsed and distance traveled.

How would I go about finding more information on this? Are there any examples/tutorials/docs I should review? Any general advice? Thanks!

Hi Joe,

Find docs about geolocation here:
http://docs.tiggzi.com/tutorials/buil...
http://docs.tiggzi.com/tutorials/buil...
http://blog.tiggzi.com/2012/04/extend...
https://getsatisfaction.com/tiggzi/to...

You can add social sharing buttons via Panel component with HTML code. Here you can find Like and Send Facebook buttons:
http://developers.facebook.com/docs/r...
https://developers.facebook.com/docs/...

Here you can find some info about Facebook integration:
http://docs.tiggzi.com/tutorials/buil...

Thanks Katya. Some of those docs look familiar, some are new. The sharing part doesn't confuse me as much as the tracking function in javascript, and the rendering of that info after the termination of tracking.

I found this website: http://stackoverflow.com/questions/33...

which also linked to this website:

http://www.w3.org/TR/geolocation-API/...

So I'm assuming you set it to update position at a specific interval, then record that information somewhere temporarily. Could it be stored on the user's device locally, or would it have to be stored in server storage so that it may be accessed and rendered later?

Would you write a similar function for the elevation? Calling for an interval update?

It seems to be way over my head as an amateur.

Could I just simply add some of this code to my existing map javascript in my "javascript1" page?
code
function autoUpdate() {
navigator.geolocation.getCurrentPosition(function(position) {
var newPoint = new google.maps.LatLng(position.coords.latitude,
position.coords.longitude);

 if (marker) { 
   // Marker already created - Move it 
   marker.setPosition(newPoint); 
 } 
 else { 
   // Marker does not exist - Create it 
   marker = new google.maps.Marker({ 
     position: newPoint, 
     map: map 
   }); 
 } 

 // Center the map on the new position 
 map.setCenter(newPoint); 

});

// Call the autoUpdate() function every 5 seconds
setTimeout(autoUpdate, 5000);
}

autoUpdate();
/code

Hello! You can save array to localStorage. Here is an example https://getsatisfaction.com/tiggzi/to...

As for your code -in function map variable is not defined (you would need to define it) and variable marker is not set (most likely var marker; should be set outside of function). Also there is no part of code where you stop process of tracking (just request for coordinates every 5 seconds)

By function map variable, do you mean this code? Or is this different for me?
code
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {

 var point = new google.maps.LatLng(position.coords.latitude,  
                                    position.coords.longitude); 

 // Initialize the Google Maps API v3 
 var map = new google.maps.Map(document.getElementById('directionsMap'), { 
    zoom: 15, 
   center: point, 
   mapTypeId: google.maps.MapTypeId.BICYCLEMAP 
 }); 

 // Place a marker 
 new google.maps.Marker({ 
   position: point, 
   map: map 
 }); 

});
}
else {
alert('W3C Geolocation API is not available');
}
/code

Would I use the WatchPosition() method as is explained here: http://www.w3.org/TR/geolocation-API/...?
And how would I go about using that? I wouldn't really know how to set all of the functions and variables up. Are there any examples of how to do this?

Joe,

In the code above a new Google map is created. To use the map on page paste this code:
codevar map = Tiggzi("mapComponentName").gmap;/code
Don't forget to replace "mapComponentName" with the real component name. After replacing you'll be able to use the map variable for adding marker.

Alright, so I've created a new page, added a new map component, and an button to invoke geolocation, and what I think should begin tracking location.

These are in order from first to execute to last and are all on click of the button:
Event 1: codeif (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {

var point = new google.maps.LatLng(position.coords.latitude,
position.coords.longitude);

// Initialize the Google Maps API v3
var map = new google.maps.Map(document.getElementById('googlemap2'), {
zoom: 15,
center: point,
mapTypeId: google.maps.MapTypeId.BICYCLEMAP
});

// Place a marker
new google.maps.Marker({
position: point,
map: map
});
});
}
else {
alert('W3C Geolocation API is not available');
} /code
Event 2:
code
function autoUpdate() {
navigator.geolocation.getCurrentPosition(function(position) {
var newPoint = new google.maps.LatLng(position.coords.latitude,
position.coords.longitude);

if (marker) {
// Marker already created - Move it
marker.setPosition(newPoint);
}
else {
// Marker does not exist - Create it
marker = new google.maps.Marker({
position: newPoint,
map: map
});
}

// Center the map on the new position
map.setCenter(newPoint);
});

// Call the autoUpdate() function every 5 seconds
setTimeout(autoUpdate, 5000);
}

autoUpdate();/code
Event three:
Invoke geolocation service, with data mapping like this?

Thanks for your help!

Hello! Do you have any problems with Geolocation service? Does it work with mapping shown on your screenshot?

Nothing happens except a brief load screen in the desktop chrome browser, and it perpetually loads in .apk debug on my android device.

Could you clarify what do you mean on "perpetually loads"? Does it mean that load icon appears and the disappears or it doesn't disappear at all?