GeoJSON

package-lock.json

@@ -10119,16 +10119,6 @@
         "fast-deep-equal": "^2.0.1",
         "hoist-non-react-statics": "^3.3.0",
         "warning": "^4.0.3"
-      },
-      "dependencies": {
-        "@babel/runtime": {
-          "version": "7.4.5",
-          "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.4.5.tgz",
-          "integrity": "sha512-TuI4qpWZP6lGOGIuGWtp9sPluqYICmbk8T/1vpSysqJxRPkudh/ofFWyqdcMsDf2s7KvDL4/YHgKyvcS3g9CJQ==",
-          "requires": {
-            "regenerator-runtime": "^0.13.2"
-          }
-        }
       }
     },
     "react-leaflet-draw": {

src/App.js

@@ -25,4 +25,8 @@ class App extends Component {
   }
 }
 
+function onChange(geojson) {
+  console.log("geojson changed", geojson);
+}
+
 export default App;

src/components/DrawTools.js

 import React, {Component} from 'react';
 import { EditControl } from "react-leaflet-draw"
+import L from 'leaflet';
 import {
 	FeatureGroup,
 	GeoJSON,
+	Marker
 } from 'react-leaflet'
 
 class DrawTools extends Component {
+	_onCreated = (e) => {
+		let type = e.layerType;
+		let layer = e.layer;		
+		let geoJSON = layer.toGeoJSON();
+		console.log(JSON.stringify(geoJSON, null, 4));
+		this._onChange();
+	}
+	
 	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> 
+			<FeatureGroup ref={ (reactFGref) => {this._onFeatureGroupReady(reactFGref);} }> 
 				<EditControl
 					position='topright'
-					onEdited={this._onEdited}
 					onCreated={this._onCreated}
-					onDeleted={this._onDeleted}
-					onMounted={this._onMounted}
-					onEditStart={this._onEditStart}
-					onEditStop={this._onEditStop}
-					onDeleteStart={this._onDeleteStart}
-					onDeleteStop={this._onDeleteStop}
 					draw={{
 						circle: {
 							repeatMode: true // allows using the tool again after finishing the previous shape
@@ -43,12 +46,38 @@ class DrawTools extends Component {
 						},
 						marker: {
 							repeatMode: true
-						}
+						},
+						circlemarker: false
 					}}
 				/>
 			</FeatureGroup>
 		)
 	}
+	
+	_editableFG = null
+
+	_onFeatureGroupReady = (reactFGref) => {
+		// store the ref for future access to content
+		console.log("reactFGref:");
+		console.log(reactFGref);
+		this._editableFG = reactFGref;
+	}
+	
+	_onChange = () => {
+		// this._editableFG contains the edited geometry, which can be manipulated through the leaflet API
+
+		const { onChange } = this.props;
+		console.log("onChange: ");
+		console.log(onChange);
+		console.log("this.props: ");
+		console.log(this.props);
+		if (!this._editableFG || !onChange) {
+			return;
+		}
+
+		const geojsonData = this._editableFG.leafletElement.toGeoJSON();
+		onChange(geojsonData);
+	}
 }
 
 export default DrawTools;
\ No newline at end of file

src/components/UserMap.js

@@ -2,7 +2,8 @@ import React, {Component} from 'react';
 import {
 	GeoJSON,
 	Map,
-	TileLayer
+	TileLayer,
+	ZoomControl
 } from 'react-leaflet'
 import DrawTools from './DrawTools.js'
 
@@ -18,7 +19,8 @@ class UserMap extends Component {
 				<TileLayer
 					attribution='Maanmittauslaitoksen kartta'
 					url=" https://tiles.kartat.kapsi.fi/taustakartta/{z}/{x}/{y}.jpg"
-				/>
+				/>'
+				<ZoomControl position='topright' />
 				<DrawTools position={this.props.position} />
 			</Map>
 		)