Save tracked GPS Data with Java Script

Question

I have written some code that tracks the GPS-Data of a user: index.html:

<!DOCTYPE html>
<html lang="en">
  <head>
      <meta charset="UTF-8">
      <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
      <title>Document</title>
      <script type="text/javascript" src="tracking.js"></script> 
  </head>
  <body>

    <button class="btn btn-success m-5" onclick="getLocation()">start tracking</button>

    <button class="btn btn-danger m-5" onclick="endTrack()">end tracking</button>

  </body>
</html>

tracking.js:

var id;
var data = [];
var startTime;

function getLocation() {
    startTime = Date.now();

    if (navigator.geolocation) {
        id = navigator.geolocation.watchPosition(showPosition);
    } else {
        x.innerHTML = "Geolocation is not supported by this browser.";
    }
}

function showPosition(position) {
    var pos = {
        lat: position.coords.latitude,
        long: position.coords.longitude,
        time: Date.now() - startTime
    }

    data.push(pos);

    console.log("Latitude: " + position.coords.latitude +
    " Longitude: " + position.coords.longitude);
}

function endTrack() {
    console.log("tracking ended");
    navigator.geolocation.clearWatch(id);
}

function getData() {
    return data;
}

The tracking works fine but I also need to save the data. Best for me would be if the data was saved in a file, e.g. a text file but since I am using Java Script I think this is not possible because it's client side. I know that you can create files and write in files with php but I don't know how to combine php and js in my case to get the data stored in data[] in a file when clicking the end tracking button. How would I do that?

EDIT: I am now sending my data via ajax:

function getData() {
    var send = JSON.stringify(data);
    console.log(send)
    jQuery.post('save.php', {'data': send}, function(data, status) {
        alert("Data: " + data + "\nStatus: " + status);
    })
}

and receive it like that:

$data = $_POST['data'];
timestamp = date('Y-m-d_H-i-s');
$datei = fopen($timestamp.".txt","x");
fwrite($datei, $data, 100);
fclose($datei);

The problem is if I send a string that looks like that: [{"lat":80.08359300000001,"long":8.4771352,"time":2},{"lat":80.08359300000001,"long":8.4771352,"time":2001}] only 100 characters are printed in the text-file, the console.log(send) shows all characters and also alert("Data: " + data + "\nStatus: " + status); shows all data, only the text-file gives a shortened version. I use XAMPP. I also tried to increase post_max_size and upload_max_size in the php.ini but it doesn't help as well. Why aren't all characters shown? Is there a limit for post (I looked around in other posts and they all said there isn't) or is something wrong with the php or what is it? Btw: I get no error, maybe there is one in the php code but this is not shown to me because it is in another file.

You can use the html5 localstorage to save data client-side. this data Will be accessible and clearable by the client, but it is the best way to save data client-side. The ideal way would be to save it server, in a db or something. — Nicolas
– Nicolas, Commented Feb 10, 2020 at 14:26
Alternatively, you can use AJAX to send the data to the server, and then a PHP script can be used to save it to disk (or a database) on the server. — ADyson
– ADyson, Commented Feb 10, 2020 at 14:46
Hmm.. sounds complicated, I actually only wanted to create a little script that I can use on my mobile to track a path and use the coordinates I get in other code.... — UnknownInnocent
– UnknownInnocent, Commented Feb 10, 2020 at 15:13
localstorage really isn't complicated at all. You can easily find simple usage examples online. The only drawback is the data isn't then available if you log in from any other browser or device. AJAX is a little more complicated...but not really, just to send a little piece of data like you're asking for - almost every website going uses it these days. Try some tutorials and you'll soon get the idea. It's just a different way of sending info to the server (instead of posting a form, or clicking a link), without needing to refresh the page — ADyson
– ADyson, Commented Feb 10, 2020 at 15:49
I now have this code: ` function getData() { var send = JSON.stringify(data); console.log(send) jQuery.post('save.php', {'data': send}, function(data) { alert("test"); }) } ` I also get the data but the problem is, that only 100 characters arrive in my php file, why? — UnknownInnocent
– UnknownInnocent, Commented Feb 10, 2020 at 17:40

Mateo Randwolf · Accepted Answer · 2020-02-10 14:32:50Z

1

Use the HTML5 local storage to save data through the client if your application is small and you dont mind it to be editable and clearable from the client.

However, if you need it to only be used by a certain user or you want something more complex you could try to do the backend with node.js which like PHP is for writing the server side code but it uses javascript which might be more useful to you.

Hope this helped. Let me know if you need anything else. :D

answered Feb 10, 2020 at 14:32

Mateo Randwolf

2,9021 gold badge8 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

UnknownInnocent Over a year ago

I now have this code: ` function getData() { var send = JSON.stringify(data); console.log(send) jQuery.post('save.php', {'data': send}, function(data) { alert("test"); }) } ` I also get the data but the problem is, that only 100 characters arrive in my php file, why?

Mateo Randwolf Over a year ago

What does the consola log say? Just the 100 characters? What is your data object? Do you get any error? PS: your code looks fine to me :)

UnknownInnocent Over a year ago

If I have the following string to be saved for example: [{"lat":50.08359300000001,"long":8.4771352,"time":2},{"lat":50.08359300000001,"long":8.4771352,"time":2001}] the console.log prints exactly this string but the string that is created in the file with this code: ` $data = $_POST['data']; $timestamp = date('Y-m-d_H-i-s'); $datei = fopen($timestamp.".txt","x"); fwrite($datei, $data, 100); fclose($datei);` it is only[{"lat":50.08359300000001,"long":8.4771352,"time":2},{"lat":50.08359300000001,"long":8.4771352,"time There is no error shown

UnknownInnocent Over a year ago

I also tried to increase post_max_size and upload_max_size in the php.ini but it doesn't help as well (I am using XAMPP)

UnknownInnocent · Accepted Answer · 2020-02-16 16:50:00Z

0

I found the problem: In the php-file was a limit for the amount of characters:

fwrite($datei, $data, 100);

I just needed to change the "100"

answered Feb 16, 2020 at 16:50

UnknownInnocent

10912 bronze badges

Collectives™ on Stack Overflow

Save tracked GPS Data with Java Script

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related