added longitude, latitude, getLocation with buttons

src/App.js

@@ -14,18 +14,62 @@ class App extends Component {
     };
   };
   
-  change = () => {
+  change = (name) => {
     const newPersons = [...this.state.persons];
-    newPersons.map( person => {person.speed = person.speed + Math.floor((Math.random() * 10) + 1)})
+    newPersons.map( person => {
+      if (name == person.name) {
+        person.speed = person.speed + Math.floor((Math.random() * 10) + 1)
+      }
+      
+    })
+    this.setState({ persons: newPersons });
+  }
+  
+  getLocation = (name) => {
+    const newPersons = [...this.state.persons];
+    
+    if (navigator.geolocation) { //check if geolocation is available
+      navigator.geolocation.getCurrentPosition(function(position){
+        console.log(position);
+        newPersons.map( person => {
+          if (name == person.name) {
+            person.longitude = position.coords.longitude
+            person.latitude = position.coords.latitude
+          }
+        })
+      });   
+    }
     this.setState({ persons: newPersons });
   }
   
   render (){
-    setTimeout(this.change, 5000)
+    setTimeout(this.getLocation, 2000)
 
     return (
       <div id="wrapper">
         <Tables persons={persons}/>
+        <div id="debug"> </div>
+        <button
+            onClick={ () => {
+              this.getLocation("Bernie");
+              }}
+              > Bernie </button>
+        <button
+            onClick={ () => {
+              this.getLocation("Martin");
+              }}
+              > Martin </button>
+        <button
+            onClick={ () => {
+              this.getLocation("Simon");
+              }}
+              > Simon </button>
+        <button
+            onClick={ () => {
+              this.getLocation("Lukas");
+              }}
+              > Lukas </button>
+             
       </div>
   );
   }

src/persons.js

@@ -4,41 +4,53 @@ export default [
     fullName: "Martin Venzl",
     shortName: "VEN",
     speed: 2,
-    color: "#229900"
+    color: "#229900",
+    latitude: 0,
+    longitude: 0
   },
   {
     name: "Simon", 
     fullName: "Simon Ellinger",  
     shortName: "ELL",
     speed: 4,
-    color: "#ffff00"
+    color: "#ffff00",
+    latitude: 0,
+    longitude: 0
   },
   {
     name: "Lukas", 
     fullName: "Lukas Wagner", 
     shortName: "WAG",
     speed: -9,
-    color: "#00ff00"
+    color: "#00ff00",
+    latitude: 0,
+    longitude: 0
   },
   {
     name: "Bernie", 
     fullName: "Bernadette Hammerle", 
     shortName: "HAM",
     speed: 3,
-    color: "#888822"
+    color: "#888822",
+    latitude: 0,
+    longitude: 0
   },
   {
     name: "tester1", 
     fullName: "Testperson 1", 
     shortName: "TE1",
     speed: -30,
-    color: "#0000ff"
+    color: "#0000ff",
+    latitude: 0,
+    longitude: 0
   },
   {
     name: "tester2", 
     fullName: "Testperson 2", 
     shortName: "TE2",
     speed: -20,
-    color: "#ff0000"
+    color: "#ff0000",
+    latitude: 0,
+    longitude: 0
   }
 ];