Update the markers position on map when the geolocation changes

src/components/UserMap.js

@@ -3,45 +3,44 @@ import {
 	Map,
 	TileLayer,
   Marker,
-  Popup
+  Popup,
+  LayersControl,
+  GeoJSON
 } from 'react-leaflet'
 import DrawTools from './DrawTools'
 
 class UserMap extends Component {
   constructor(props){
     super(props);
+
     this.state = {
       ownLat: null,
       ownLng: null,
       mapUrl: 'https://tiles.kartat.kapsi.fi/taustakartta/{z}/{x}/{y}.jpg',
-      marker: {
-        type: "FeatureCollection",
-        latitude: "",
-        longitude: "",
-        timestamp: "",
-        features: [{
-          type: "Feature",
-          properties: {},
-          geometry: {
-            type: "Point",
-            coordinates: [
-              62.2416479,
-              25.7597186
-            ]
+      geojsonLayer: {
+        "type": "FeatureCollection",
+        "latitude": "",
+        "longitude": "",
+        "timestamp": "",
+        "features": [{
+          "type": "Feature",
+          "properties": {},
+          "geometry": {
+            "type": "Point",
+            "coordinates":  [ 25.7597186, 62.20416479 ]
           }
         }]
       }
     }
 
+    
     this.watchPositionId = null;
   }
 
   componentDidMount(){
-    console.log(JSON.stringify(this.state.marker))
     this.getCurrentPosition((position) => {
       this.setCurrentPosition(position);
     });
-    console.log(JSON.stringify(this.state.marker))
     //sendGeoJSON()
   }
   // Sends the players marker to the backend
@@ -53,7 +52,7 @@ class UserMap extends Component {
         Accept: 'application/json',
         'Content-Type': 'application/json'
       },
-      body: JSON.stringify(this.state.marker)
+      body: JSON.stringify(this.state.geojsonLayer)
     })
       .then(res => res.json())
       .then(result => console.log(result))
@@ -65,26 +64,27 @@ class UserMap extends Component {
       navigator.geolocation.clearWatch(this.watchPositionId);
     }
   }
-
+  // Sets the state for the changed position
   setCurrentPosition(position){
     this.setState({
       ownLat: position.coords.latitude,
       ownLng: position.coords.longitude,
-      marker: {
-        features: [
-            {
-              geometry: {
-                type: "Point",
-                coordinates: [
-                  position.coords.latitude,
-                  position.coords.longitude
-                ]
-              }
-            }
-          ]
+      geojsonLayer: {
+        "type": "FeatureCollection",
+        "latitude": "",
+        "longitude": "",
+        "timestamp": "",
+        "features": [{
+          "type": "Feature",
+          "properties": {},
+          "geometry": {
+            "type": "Point",
+            "coordinates":  [ position.coords.latitude, position.coords.longitude ]
+          }
+        }]
       }
     });
-    console.log(this.state.marker)
+    console.log(this.state.geojsonLayer.coordinates)
   }
 
   getCurrentPosition(callback){
@@ -104,7 +104,7 @@ class UserMap extends Component {
       this.watchPositionId = navigator.geolocation.watchPosition((position) =>{
         //success
         if(position != null){
-          callback(position);
+          callback(position);          
         }
       }, (error) =>{
         console.log(error);
@@ -112,57 +112,22 @@ class UserMap extends Component {
     }
   }
 
-  positionToGeoJSON(position){
-    let geoJSON = {
-      type: "Feature",
-      properties: {},
-      geometry: {
-        type: "Point",
-        coordinates: [position.coords.longitude, position.coords.latitude]
-      }
-    }
-
-    return JSON.stringify(geoJSON);
-  }
-
-  mockGeoJSON(){
-    return (JSON.stringify({
-      type: "FeatureCollection",
-      latitude: "",
-      longitude: "",
-      timestamp: "",
-      features: [{
-        type: "Feature",
-        properties: {},
-        geometry: {
-          type: "Point",
-          coordinates: [
-            62.2416479,
-            25.7597186
-          ]
-        }
-      }]
-    }))
-  }
-
   render() {
     return (
-      <Map className='map' center={this.props.position} zoom={this.props.zoom}>
-        <TileLayer
-          attribution='&copy; <a href="https://www.maanmittauslaitos.fi/">Maanmittauslaitos</a>'
-          url={this.props.mapUrl}
-        />
-		    <DrawTools position={this.props.position} />
-        <Marker position={this.props.position}>
-          <Popup maxWidth="600px">
-           <img src="wimma.png" alt="Wimma Lab" width="600px"/>
-          </Popup>
-        </Marker>
-        {this.state.ownLat !== null && <Marker position={[this.state.ownLat, this.state.ownLng]}>
-        <Popup>
-            User's real position.<br />
-          </Popup>
-        </Marker>}
+      <Map className='map' center={this.props.position} zoom={this.props.zoom}>           
+          <TileLayer
+            attribution='&copy; <a href="https://www.maanmittauslaitos.fi/">Maanmittauslaitos</a>'
+            url={this.props.mapUrl}
+          />
+          <DrawTools position={this.props.position} />
+          <Marker position={this.props.position}>
+            <Popup maxWidth="600px">
+            <img src="wimma.png" alt="Wimma Lab" width="600px"/>
+            </Popup>
+          </Marker>
+          {this.state.ownLat !== null && <Marker position={[this.state.ownLat, this.state.ownLng]}>
+          </Marker>}
+          <GeoJSON key={JSON.stringify(this.state.geojsonLayer)} data={this.state.geojsonLayer} /> 
       </Map>
     );
   }