From 7dad7baea1f70851f9d8346d8ba4236e95ff9b18 Mon Sep 17 00:00:00 2001
From: Jussi Surma-Aho <L4929@student.jamk.fi>
Date: Wed, 5 Jun 2019 10:23:04 +0300
Subject: [PATCH] GeoJSON
---
package-lock.json | 10 --------
src/App.js | 4 ++++
src/components/DrawTools.js | 47 ++++++++++++++++++++++++++++++-------
src/components/UserMap.js | 6 +++--
4 files changed, 46 insertions(+), 21 deletions(-)
diff --git a/package-lock.json b/package-lock.json
index 08704e4..3ff0ebd 100644
--- a/package-lock.json
+++ b/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": {
diff --git a/src/App.js b/src/App.js
index 7f1245d..166c95f 100644
--- a/src/App.js
+++ b/src/App.js
@@ -25,4 +25,8 @@ class App extends Component {
}
}
+function onChange(geojson) {
+ console.log("geojson changed", geojson);
+}
+
export default App;
diff --git a/src/components/DrawTools.js b/src/components/DrawTools.js
index 036efca..2d0b701 100644
--- a/src/components/DrawTools.js
+++ b/src/components/DrawTools.js
@@ -1,25 +1,28 @@
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
diff --git a/src/components/UserMap.js b/src/components/UserMap.js
index bd04e5a..fc66dc9 100644
--- a/src/components/UserMap.js
+++ b/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>
)
--
GitLab