Merge branch 'development' into 'new-add-text'

# Conflicts:
#   src/components/DrawTools.js
#   src/components/UserMap.js

src/components/DrawTools.js

@@ -62,6 +62,7 @@ L.DrawToolbar.include({
 });
 
 class DrawTools extends Component {
+<<<<<<< src/components/DrawTools.js
   constructor(props) {
     super(props);
     this.state = {
@@ -173,6 +174,77 @@ class DrawTools extends Component {
       </FeatureGroup>
     );
   }
+=======
+	constructor(props){
+	  super(props);
+	  this.state = {
+		  geoJSONAll: [] // property for all GeoJSON data in the map
+	  }
+  }
+  
+	_onCreated = (e) => {
+		let type = e.layerType; // from the example; isn't used right now, but may be relevant in the future
+		let layer = e.layer;
+    this.makeGeoJSON(e.layer);
+	}
+
+  // turn layer to GeoJSON data and add it to an array of all GeoJSON data of the current map
+	makeGeoJSON = (e) => {
+    let geoJSON = e.toGeoJSON();
+    let newGeoJSONAll = this.state.geoJSONAll;
+    newGeoJSONAll.push(geoJSON);
+    this.setState({geoJSONAll: newGeoJSONAll});
+    console.log(JSON.stringify(geoJSON, null, 4)); // printing GeoJSON data of the previous object create
+    console.log("newGeoJSONAll.length: " + newGeoJSONAll.length);
+	}
+	
+	render() {
+		return (
+			// "It's important to wrap EditControl component into FeatureGroup component from react-leaflet. The elements you draw will be added to this FeatureGroup layer, when you hit edit button only items in this layer will be edited."
+			<FeatureGroup> 
+				<EditControl
+					position='topright'
+					onCreated={this._onCreated}
+					draw={{
+						circle: {
+							repeatMode: true, // allows using the tool again after finishing the previous shape
+							shapeOptions: {
+								color: '#f9f10c',
+								opacity: 100
+							}
+						},
+						rectangle: {
+							repeatMode: true
+						},
+						polygon: {
+							repeatMode: true,
+							allowIntersection: false, // Restricts shapes to simple polygons
+							drawError: {
+								color: '#e1e100', // Color the shape will turn when intersects
+								message: '<strong>Oh snap!<strong> you can\'t draw that!' // Message that will show when intersect
+							},
+							shapeOptions: {
+								color: '#ed2572',
+								opacity: 100
+							}
+						},
+						polyline: {
+							repeatMode: true,
+							shapeOptions: {
+								color: '#ed2572',
+								opacity: 100
+							}
+						},
+						marker: {
+							repeatMode: true
+						},
+						circlemarker: false
+					}}
+				/>
+			</FeatureGroup>
+		)
+	}
+>>>>>>> src/components/DrawTools.js
 }
 
 export default DrawTools;

src/components/UserMap.js

@@ -49,18 +49,20 @@ class UserMap extends Component {
         navigator.geolocation.clearWatch(this.watchPositionId);
       }
 
-      this.watchPositionId = navigator.geolocation.watchPosition(
-        position => {
-          //success
-          if (position != null) {
-            callback(position);
-          }
-        },
-        error => {
-          console.log(error);
-        },
-        options
-      );
+      if(this.watchPositionId != null){navigator.geolocation.clearWatch(this.watchPositionId);}
+      
+      this.watchPositionId = navigator.geolocation.watchPosition((position) =>{
+        //success
+        if(position != null){
+          callback(position);
+        }
+      }, (error) =>{
+        console.log(error);
+        // disable tracking
+        if(this.watchPositionId != null){
+          navigator.geolocation.clearWatch(this.watchPositionId);
+        }
+      }, options);
     }
   }
 
@@ -84,16 +86,12 @@ class UserMap extends Component {
   render() {
     return (
       <Map
-        className="map"
+        className='map'
         center={this.props.position}
         zoom={this.props.zoom}
-        minZoom="7"
-        maxZoom="17"
-        // onzoomend={this.testers} // getting the zoom level
-        zoomControl={
-          false
-        } /* remove the default zoom control button at the top left corner */
-      >
+        minZoom='7'
+        maxZoom='17'
+        zoomControl={false}>
         <TileLayer
           attribution='&copy; <a href="https://www.maanmittauslaitos.fi/">Maanmittauslaitos</a>'
           url={this.props.mapUrl}