diff --git a/package-lock.json b/package-lock.json index 08704e44b68210ab79e5c9017c5a6414e7495024..3ff0ebd163c596887a34d9dd893b06b2912fe8ff 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 7f1245d010b90dbc1da6ea71e6eadce955877590..166c95fb3cdba8eadb53b6d368fbbc397761cfa4 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 036efcac91308ae2aa77d0b3de256e978dc8f36e..2d0b701d98e2ad4997da1de023fe4f39765eff09 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 bd04e5ad915151e44e9b6e55ac2c31c4b42e69b1..fc66dc9b16d7639bf00fb73cb94c16f193d8486b 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> )