PHP Versions Question posted in
You can find a list of all versions here.

Php versions – 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.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    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"


  2. 0

    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. 😀

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search