GetCurrentPosition interval changed to WatchPosition so the device does not...

GetCurrentPosition interval changed to WatchPosition so the device does not ask permission every time the location is asked.

src/components/UserMap.js

@@ -8,7 +8,6 @@ import {
 } from 'react-leaflet'
 import DrawTools from './DrawTools.js'
 
-
 class UserMap extends Component {
   constructor(props){
     super(props);
@@ -17,30 +16,21 @@ class UserMap extends Component {
       ownLng: null,
     }
 
-    this.DeviceLocationUpdater = null;
-    this.updateDeviceLocation = this.updateDeviceLocation.bind(this);
+    this.watchPositionId = null;
   }
 
   componentDidMount(){
-    this.startDeviceLocationUpdater();
+    this.getCurrentPosition((position) => {
+      this.setCurrentPosition(position);
+    });
   }
 
   componentWillUnmount(){
-    if(this.DeviceLocationUpdater != null){
-      clearInterval(this.DeviceLocationUpdater);
+    if(this.watchPositionId != null){
+      navigator.geolocation.clearWatch(this.watchPositionId);
     }
   }
 
-  startDeviceLocationUpdater(){
-    this.DeviceLocationUpdater = setInterval(this.updateDeviceLocation, 1000);
-  }
-
-  updateDeviceLocation(){
-    this.getCurrentPosition((position) => {
-      this.setCurrentPosition(position);
-    });
-  }
-
   setCurrentPosition(position){
     this.setState({
       ownLat: position.coords.latitude,
@@ -60,7 +50,9 @@ class UserMap extends Component {
         maximumAge: 0
       }
 
-      navigator.geolocation.getCurrentPosition((position) =>{
+      if(this.watchPositionId != null){navigator.geolocation.clearWatch(this.watchPositionId);}
+      
+      this.watchPositionId = navigator.geolocation.watchPosition((position) =>{
         //success
         if(position != null){
           callback(position);