|
@@ -12,7 +12,7 @@ import "@mapbox/mapbox-gl-draw/dist/mapbox-gl-draw.css";
|
|
|
import mapboxToken from "./../config/mapboxToken.js";
|
|
|
import {calcDistance} from "./../helpers/distance";
|
|
|
import {longitude, latitude, mapWidth, mapHeight, markerIcon} from "./../config/variables";
|
|
|
-import {Button} from "reactstrap";
|
|
|
+import {Button, CustomInput, Label} from "reactstrap";
|
|
|
import {getRoute, mapStyles} from "./../helpers/mapboxHelper";
|
|
|
import PathButtons from "./../PathButtons";
|
|
|
import EvaluationTable from "./../EvaluationTable";
|
|
@@ -28,7 +28,8 @@ export default class Mapbox extends React.Component{
|
|
|
zoom: [14],
|
|
|
path: [],
|
|
|
distance: 0,
|
|
|
- center: [longitude, latitude]
|
|
|
+ center: [longitude, latitude],
|
|
|
+ drawing: false
|
|
|
}
|
|
|
this.getRoute = getRoute.bind(this)
|
|
|
}
|
|
@@ -39,13 +40,15 @@ export default class Mapbox extends React.Component{
|
|
|
}
|
|
|
|
|
|
addMarker = (event, click) => {
|
|
|
- const lng = click.lngLat.lng
|
|
|
- const lat = click.lngLat.lat
|
|
|
- this.getRoute(lng, lat);
|
|
|
-// let pathCopy = this.state.path.slice();
|
|
|
-// pathCopy.push([lng, lat]);
|
|
|
-// this.setState({path: pathCopy})
|
|
|
- this.getDistance()
|
|
|
+ if (!this.state.drawing){
|
|
|
+ const lng = click.lngLat.lng
|
|
|
+ const lat = click.lngLat.lat
|
|
|
+ this.getRoute(lng, lat);
|
|
|
+ // let pathCopy = this.state.path.slice();
|
|
|
+ // pathCopy.push([lng, lat]);
|
|
|
+ // this.setState({path: pathCopy})
|
|
|
+ this.getDistance()
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
updateMarker = (idx, event) => {
|
|
@@ -145,7 +148,7 @@ export default class Mapbox extends React.Component{
|
|
|
<p>
|
|
|
Distanz: {Math.round(this.state.distance*100)/100} km
|
|
|
</p>
|
|
|
- <PathButtons updateState={this.updateState} path={this.state.path} switchLatLng={true}/>
|
|
|
+ <CustomInput type="switch" onChange={() => this.setState({"drawing": !this.state.drawing})} id="drawMode" name="drawMode"/>
|
|
|
</div>
|
|
|
|
|
|
<EvaluationTable mapId="mapbox"/>
|