Marker

package-lock.json

@@ -10536,11 +10536,24 @@
       "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.3.tgz",
       "integrity": "sha512-bOUvMWFQVk5oz8Ded9Xb7WVdEi3QGLC8tH7HmYP0Fdp4Bn3qw0tRFmr5TW6mvahzvmrK4a6bqWGfCevBflP+Xw=="
     },
+    "react-geolocated": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/react-geolocated/-/react-geolocated-3.0.1.tgz",
+      "integrity": "sha512-vgHEL9JY4TZ5ZCKdSPLm2qUHQ+2I1Nemc94QVZqfu4lDorRu6JjWHzvnRiGuv1PdEkPgqAEZDxjZ1zcxzFoSqA==",
+      "requires": {
+        "prop-types": "^15.5.8"
+      }
+    },
     "react-is": {
       "version": "16.11.0",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.11.0.tgz",
       "integrity": "sha512-gbBVYR2p8mnriqAwWx9LbuUrShnAuSCNnuPGyc7GJrMVQtPDAh8iLpv7FRuMPFb56KkaVZIYSz1PrjI9q0QPCw=="
     },
+    "react-native-get-location": {
+      "version": "1.4.2",
+      "resolved": "https://registry.npmjs.org/react-native-get-location/-/react-native-get-location-1.4.2.tgz",
+      "integrity": "sha512-WtuVgZ2f7cZ/hiuTECnEr5D5yBJCaKnBkRQyaKiGoe2sNHesQhBF9g9L815Z9w0HY5dUDzQIz0NUMNRJ+QxDkA=="
+    },
     "react-scripts": {
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-3.2.0.tgz",

package.json

@@ -10,6 +10,8 @@
     "pigeon-overlay": "^0.2.3",
     "react": "^16.11.0",
     "react-dom": "^16.11.0",
+    "react-geolocated": "^3.0.1",
+    "react-native-get-location": "^1.4.2",
     "react-scripts": "3.2.0",
     "react-transition-group": "^4.3.0"
   },

src/App.js

@@ -3,6 +3,7 @@ import React, { Component } from 'react'
 import './App.css'
 import Map from 'pigeon-maps'
 import Marker from 'pigeon-marker'
+import { geolocated } from "react-geolocated"
 
 
 import Tables from './Tables';
@@ -35,16 +36,17 @@ const providers = {
 }
 
 const markers = {
-  Bernie: [[50.879, 4.6997], 13],
-  Martin: [[48.1542144, 13.9952128], 13],
-  Simon: [[50.85050, 4.35149], 11],
-  Lukas: [[51.0514, 3.7103], 12],
+  Bernie: [[48.1542150, 13.9952130], 13],
+  Martin: [[48.1642150, 13.9952130], 12],
+  Simon: [[48.1642160, 13.9852140], 11],
+  Lukas: [[48.1542134, 14.0052118], 10],
 }
 
 const lng2tile = (lon, zoom) => (lon + 180) / 360 * Math.pow(2, zoom)
 const lat2tile = (lat, zoom) => (1 - Math.log(Math.tan(lat * Math.PI / 180) + 1 / Math.cos(lat * Math.PI / 180)) / Math.PI) / 2 * Math.pow(2, zoom)
 
 
+
 function isMapBox (provider) {
   return provider === 'streets' || provider === 'satellite' || provider === 'outdoors' || provider === 'light' || provider === 'dark'
 }
@@ -90,6 +92,7 @@ export default class App extends Component {
       minZoom: 1,
       maxZoom: 18,
       dragAnchor: [48.1665, 14.0223]
+	  
     };
 	this.componentDidMount = this.componentDidMount.bind(this)
   }
@@ -119,6 +122,7 @@ export default class App extends Component {
 
   handleMarkerClick = ({ event, payload, anchor }) => {
     console.log(`Marker #${payload} clicked at: `, anchor)
+	
   }
 
   handleAnimationStart = () => {
@@ -141,6 +145,7 @@ export default class App extends Component {
       .then(data =>{
          console.log(data["users"]);
          this.setState({ persons: data["users"] })
+		 
       }).catch(error => {
         console.log(error);
     });
@@ -149,8 +154,9 @@ export default class App extends Component {
   receivedPosition = (position) => {
     const axios = require('axios');
     axios.put(this.apiUrl + "/report-location", {
-      "longitude": position.coords.longitude + Math.random()*10,
+      "longitude": position.coords.longitude,
       "latitude": position.coords.latitude,
+	 
       "timestamp": position.timestamp/1000, // in seconds
       "name": this.name
     }).then(this.reloadLocations)
@@ -164,6 +170,8 @@ export default class App extends Component {
       navigator.geolocation.getCurrentPosition(this.receivedPosition);
     }
   }
+  
+
 
 
 
@@ -230,18 +238,34 @@ export default class App extends Component {
         <button
             onClick={ () => {
               this.name = "Bernie";
+			  
+			  this.updateLocation();
+			  markers.Bernie=[[this.state.persons[3].latitude,this.state.persons[3].longitude], 13];
+			
             }}> Bernie </button>
         <button
             onClick={ () => {
               this.name = "Martin";
+			  
+			  this.updateLocation();
+			  markers.Martin=[[this.state.persons[0].latitude,this.state.persons[0].longitude], 12];
+			
             }}> Martin </button>
         <button
             onClick={ () => {
               this.name = "Simon";
+			  
+			  this.updateLocation();
+			  markers.Simon=[[this.state.persons[1].latitude,this.state.persons[1].longitude], 11];
+			
             }}> Simon </button>
         <button
             onClick={ () => {
               this.name = "Lukas";
+			  
+			  this.updateLocation();
+			  markers.Lukas=[[this.state.persons[2].latitude,this.state.persons[2].longitude], 10];
+			
             }}> Lukas </button>
       </div>
 	    

src/persons.js

@@ -1,12 +1,12 @@
-export default [
+export default const persons[
   {
     name: "Martin",
     fullName: "Martin Venzl",
     shortName: "VEN",
     speed: 2,
     color: "#229900",
-    latitude: 0,
-    longitude: 0
+    latitude: 48.1942150,
+    longitude: 13.9912130
   },
   {
     name: "Simon", 
@@ -14,8 +14,8 @@ export default [
     shortName: "ELL",
     speed: 4,
     color: "#ffff00",
-    latitude: 0,
-    longitude: 0
+    latitude: 48.1742150,
+    longitude: 13.9752130
   },
   {
     name: "Lukas", 
@@ -23,17 +23,17 @@ export default [
     shortName: "WAG",
     speed: -9,
     color: "#00ff00",
-    latitude: 0,
-    longitude: 0
+   latitude: 48.1742150,
+    longitude: 13.9752130
   },
   {
     name: "Bernie", 
     fullName: "Bernadette Hammerle", 
     shortName: "HAM",
-    speed: 3,
+    speed: 0,
     color: "#888822",
-    latitude: 0,
-    longitude: 0
+    latitude: 48.1742150,
+    longitude: 13.9752130
   },
   {
     name: "tester1", 
@@ -41,8 +41,8 @@ export default [
     shortName: "TE1",
     speed: -30,
     color: "#0000ff",
-    latitude: 0,
-    longitude: 0
+    latitude: 48.1742150,
+    longitude: 13.9752130
   },
   {
     name: "tester2", 
@@ -50,7 +50,7 @@ export default [
     shortName: "TE2",
     speed: -20,
     color: "#ff0000",
-    latitude: 0,
-    longitude: 0
+    latitude: 48.1742150,
+    longitude: 13.9752130
   }
 ];