Search code examples
javascriptphpfilegps

Save tracked GPS Data with Java Script


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.


Solution

  • 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"