From 3eecbc941c98cfa28080fd0d717ede7ac0db7312 Mon Sep 17 00:00:00 2001
From: Jussi Surma-Aho <L4929@student.jamk.fi>
Date: Wed, 26 Jun 2019 16:42:48 +0300
Subject: [PATCH] Moved GeoJSON LayerGroup from back-end under FeatureGroup in
DrawTools.js. Iterating through every layer, adding necessary options and
adding to map.
---
src/components/DrawTools.js | 95 +++++++++++++++++++++++++++++++++++--
src/components/UserMap.js | 19 ++++----
2 files changed, 99 insertions(+), 15 deletions(-)
diff --git a/src/components/DrawTools.js b/src/components/DrawTools.js
index 352d1df..3a10f78 100644
--- a/src/components/DrawTools.js
+++ b/src/components/DrawTools.js
@@ -1,6 +1,13 @@
import React, { Component } from "react";
import { EditControl } from "react-leaflet-draw";
-import { FeatureGroup } from "react-leaflet";
+import {
+ FeatureGroup,
+ GeoJSON,
+ Marker,
+ Polygon,
+ Polyline
+} from "react-leaflet";
+import L from "leaflet";
class DrawTools extends Component {
constructor(props) {
@@ -29,9 +36,34 @@ class DrawTools extends Component {
this.props.addToGeojsonLayer(geoJSON);
};
+ // generate random UUID for React Leaflet component keys
+ generateUUID() {
+ function s4() {
+ return Math.floor((1 + Math.random()) * 0x10000)
+ .toString(16)
+ .substring(1);
+ }
+ return (
+ s4() +
+ s4() +
+ "-" +
+ s4() +
+ "-" +
+ s4() +
+ "-" +
+ s4() +
+ "-" +
+ s4() +
+ s4() +
+ s4()
+ );
+ }
+
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."
+ // "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>
<EditControl
position="topright"
@@ -41,7 +73,7 @@ class DrawTools extends Component {
repeatMode: true, // allows using the tool again after finishing the previous shape
shapeOptions: {
color: "#f9f10c",
- opacity: 100
+ opacity: 1
}
},
rectangle: {
@@ -56,14 +88,14 @@ class DrawTools extends Component {
},
shapeOptions: {
color: "#ed2572",
- opacity: 100
+ opacity: 1
}
},
polyline: {
repeatMode: true,
shapeOptions: {
color: "#ed2572",
- opacity: 100
+ opacity: 1
}
},
marker: {
@@ -71,7 +103,60 @@ class DrawTools extends Component {
},
circlemarker: false
}}
+ edit={{
+ marker: true
+ }}
+ />
+
+ {/* iterate through every element fetched from back-end */}
+ {this.props.geoJSONLayer.features.map((ind, val) => {
+ // first element is empty... for some reason.
+ // should investigate further what is it
+ if (val === 0) {
+ } else if (ind.geometry.type === "Point") {
+ // GeoJSON saves latitude first, not longitude like usual. swapping
+ let position = [
+ ind.geometry.coordinates[1],
+ ind.geometry.coordinates[0]
+ ];
+ // keys are required to be able to edit
+ return <Marker key={this.generateUUID()} position={position} />;
+ } else if (ind.geometry.type === "Polygon") {
+ // polygons have, for some reason, an extra single element array above other arrays. no other objects have this
+ let coords = ind.geometry.coordinates[0];
+ let positions = [];
+ let position = [];
+ for (let i = 0; i < coords.length; i++) {
+ position = [coords[i][1], coords[i][0]];
+ positions.push(position);
+ }
+ return <Polygon key={this.generateUUID()} positions={positions} />;
+ } else if (ind.geometry.type === "LineString") {
+ let coords = ind.geometry.coordinates;
+ let positions = [];
+ for (let i = 0; i < coords.length; i++) {
+ positions.push([coords[i][1], coords[i][0]]);
+ }
+ return <Polyline key={this.generateUUID()} positions={positions} />;
+ }
+ })}
+ {/*
+ <Polygon
+ key={this.generateUUID()}
+ positions={[
+ [62.25111, 25.804654],
+ [62.249894, 25.814211],
+ [62.24805, 25.811937],
+ [62.247963, 25.806458]
+ ]}
/>
+ <Marker key={this.generateUUID()} position={[62.25111, 25.804654]} />
+ */}
+ {/*
+ <GeoJSON
+ key={JSON.stringify(this.props.geoJSONLayer)}
+ data={this.props.geoJSONLayer}
+ />*/}
</FeatureGroup>
);
}
diff --git a/src/components/UserMap.js b/src/components/UserMap.js
index a17894e..44b6b52 100644
--- a/src/components/UserMap.js
+++ b/src/components/UserMap.js
@@ -78,10 +78,8 @@ class UserMap extends Component {
features: [...newFeatures]
}
});
- console.log(
- "Geojsonlayer state fetchin jälkeen: " +
- JSON.stringify(this.state.geoJSONLayer)
- );
+ console.log("Geojsonlayer state fetchin jälkeen: ");
+ console.log(this.state.geoJSONLayer);
});
}
@@ -164,8 +162,8 @@ class UserMap extends Component {
<DrawTools
position={this.props.position}
addToGeojsonLayer={this.addToGeojsonLayer}
+ geoJSONLayer={this.state.geoJSONLayer}
/>
-
{this.state.ownLat !== null && (
<Marker position={[this.state.ownLat, this.state.ownLng]}>
<Popup>
@@ -174,13 +172,14 @@ class UserMap extends Component {
</Popup>
</Marker>
)}
- <GeoJSON
- key={JSON.stringify(this.state.geoJSONLayer)}
- data={this.state.geoJSONLayer}
- />
</Map>
);
}
}
-
+/*
+<GeoJSON
+key={JSON.stringify(this.state.geoJSONLayer)}
+data={this.state.geoJSONLayer}
+/>
+*/
export default UserMap;
--
GitLab