WIP drawing layer to the server / back

src/components/DrawTools.js

@@ -10,6 +10,7 @@ class DrawTools extends Component {
 		let layer = e.layer;		
 		let geoJSON = layer.toGeoJSON();
 		console.log(JSON.stringify(geoJSON, null, 4)); // makes the output readable in the console
+		this.props.setCurrentPosition(geoJSON);
 	}
 	
 	render() {

src/components/UserMap.js

@@ -3,8 +3,6 @@ import {
 	Map,
 	TileLayer,
   Marker,
-  Popup,
-  LayersControl,
   GeoJSON
 } from 'react-leaflet'
 import DrawTools from './DrawTools'
@@ -19,27 +17,18 @@ class UserMap extends Component {
       mapUrl: 'https://tiles.kartat.kapsi.fi/taustakartta/{z}/{x}/{y}.jpg',
       geojsonLayer: {
         "type": "FeatureCollection",
-        "latitude": "",
-        "longitude": "",
-        "timestamp": "",
-        "features": [{
-          "type": "Feature",
-          "properties": {},
-          "geometry": {
-            "type": "Point",
-            "coordinates":  [ 25.7597186, 62.20416479 ]
-          }
-        }]
+        "features": []
       }
+      
     }
 
-    
+    this.setCurrentPosition = this.setCurrentPosition.bind(this);
     this.watchPositionId = null;
   }
 
   componentDidMount(){
     this.getCurrentPosition((position) => {
-      this.setCurrentPosition(position);
+      //this.setCurrentPosition(position);
     });
     //sendGeoJSON()
   }
@@ -52,7 +41,7 @@ class UserMap extends Component {
         Accept: 'application/json',
         'Content-Type': 'application/json'
       },
-      body: JSON.stringify(this.state.geojsonLayer)
+      body: this.state.geojsonLayer
     })
       .then(res => res.json())
       .then(result => console.log(result))
@@ -64,27 +53,35 @@ class UserMap extends Component {
       navigator.geolocation.clearWatch(this.watchPositionId);
     }
   }
-  // Sets the state for the changed position
-  setCurrentPosition(position){
+  // // Sets the state for the changed position
+  // setCurrentPosition(position){
+  //   this.setState({
+  //     ownLat: position.coords.latitude,
+  //     ownLng: 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.geojsonLayer.coordinates)
+  // }
+
+  setCurrentPosition(data){
     this.setState({
-      ownLat: position.coords.latitude,
-      ownLng: position.coords.longitude,
-      geojsonLayer: {
-        "type": "FeatureCollection",
-        "latitude": "",
-        "longitude": "",
-        "timestamp": "",
-        "features": [{
-          "type": "Feature",
-          "properties": {},
-          "geometry": {
-            "type": "Point",
-            "coordinates":  [ position.coords.latitude, position.coords.longitude ]
-          }
-        }]
-      }
+      ...this.state,
+      geojsonLayer: data
     });
-    console.log(this.state.geojsonLayer.coordinates)
+    console.log("User mapin statessa oleva geojson: " + JSON.stringify(this.state.geojsonLayer))
   }
 
   getCurrentPosition(callback){
@@ -119,17 +116,12 @@ class UserMap extends Component {
             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>
+          <DrawTools position={this.props.position} setCurrentPosition={this.setCurrentPosition}/>
           {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>
-    );
+    ); // this.state.geojsonLayer
   }
 }