|
|
@@ -5,8 +5,11 @@ import {
|
|
|
Marker,
|
|
|
Popup,
|
|
|
ZoomControl,
|
|
|
- Polyline
|
|
|
+ Polyline,
|
|
|
+ FeatureGroup
|
|
|
} from "react-leaflet";
|
|
|
+import {EditControl} from "react-leaflet-draw";
|
|
|
+import L from "leaflet";
|
|
|
import "./../css/maps.css";
|
|
|
import {calcDistance} from "./../helpers/distance";
|
|
|
import {longitude, latitude, mapWidth, mapHeight} from "./../config/variables";
|
|
|
@@ -55,6 +58,42 @@ export default class Leaflet extends React.Component{
|
|
|
this.setState({path: [], distance: 0})
|
|
|
}
|
|
|
|
|
|
+
|
|
|
+ _onEdited = (e) => {
|
|
|
+ let numEdited = 0;
|
|
|
+ e.layers.eachLayer( (layer) => {
|
|
|
+ numEdited += 1;
|
|
|
+ });
|
|
|
+ this._onChange();
|
|
|
+ }
|
|
|
+
|
|
|
+ _onCreated = (e) => {
|
|
|
+ let type = e.layerType;
|
|
|
+ let layer = e.layer;
|
|
|
+ // Do whatever else you need to. (save to db; etc)
|
|
|
+ this._onChange();
|
|
|
+ }
|
|
|
+
|
|
|
+ _onDeleted = (e) => {
|
|
|
+ let numDeleted = 0;
|
|
|
+ e.layers.eachLayer( (layer) => {
|
|
|
+ numDeleted += 1;
|
|
|
+ });
|
|
|
+ this._onChange();
|
|
|
+ }
|
|
|
+
|
|
|
+ _editableFG = null
|
|
|
+
|
|
|
+ _onChange = () => {
|
|
|
+ // this._editableFG contains the edited geometry, which can be manipulated through the leaflet API
|
|
|
+ const { onChange } = this.props;
|
|
|
+ if (!this._editableFG || !onChange) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ const geojsonData = this._editableFG.leafletElement.toGeoJSON();
|
|
|
+ onChange(geojsonData);
|
|
|
+ }
|
|
|
+
|
|
|
render() {
|
|
|
const position = [this.state.latitude, this.state.longitude]
|
|
|
let testMarkers = this.props.markers
|
|
|
@@ -92,12 +131,21 @@ export default class Leaflet extends React.Component{
|
|
|
attribution='&copy <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
|
|
|
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
|
|
|
/>
|
|
|
- <ZoomControl position="bottomright" />
|
|
|
|
|
|
- <Polyline color="grey" positions={this.state.path} />
|
|
|
+ <FeatureGroup>
|
|
|
+ <EditControl
|
|
|
+ position='topright'
|
|
|
+ onEdited={this._onEdited}
|
|
|
+ onCreated={this._onCreated}
|
|
|
+ onDeleted={this._onDeleted}
|
|
|
+ draw={{rectangle: false}}
|
|
|
+ />
|
|
|
+ </FeatureGroup>
|
|
|
|
|
|
{markers}
|
|
|
+ <Polyline color="grey" positions={this.state.path} />
|
|
|
|
|
|
+ <ZoomControl position="bottomright" />
|
|
|
</Map>
|
|
|
</div>
|
|
|
|
