From 17e773b903e675b7a6cbdd5182d26fd359f3025f Mon Sep 17 00:00:00 2001
From: Jussi Surma-Aho <L4929@student.jamk.fi>
Date: Mon, 17 Jun 2019 15:35:37 +0300
Subject: [PATCH] GeoJSON data is now saved into one array. Also added min and
max zoom, and removed zoom control from top left corner
---
src/components/DrawTools.js | 22 +++++++++++++++++++---
src/components/UserMap.js | 8 +++++++-
2 files changed, 26 insertions(+), 4 deletions(-)
diff --git a/src/components/DrawTools.js b/src/components/DrawTools.js
index 791233b..0fbf85c 100644
--- a/src/components/DrawTools.js
+++ b/src/components/DrawTools.js
@@ -5,11 +5,27 @@ import {
} from 'react-leaflet'
class DrawTools extends Component {
+ 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;
- let geoJSON = layer.toGeoJSON();
- console.log(JSON.stringify(geoJSON, null, 4)); // makes the output readable in the console
+ 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() {
diff --git a/src/components/UserMap.js b/src/components/UserMap.js
index 1ec4c48..877cca2 100644
--- a/src/components/UserMap.js
+++ b/src/components/UserMap.js
@@ -79,7 +79,13 @@ class UserMap extends Component {
render() {
return (
- <Map className='map' center={this.props.position} zoom={this.props.zoom}>
+ <Map
+ className='map'
+ center={this.props.position}
+ zoom={this.props.zoom}
+ minZoom='7'
+ maxZoom='17'
+ zoomControl={false}>
<TileLayer
attribution='© <a href="https://www.maanmittauslaitos.fi/">Maanmittauslaitos</a>'
url={this.props.mapUrl}
--
GitLab