|
@@ -11,6 +11,7 @@ import {calcDistance} from "./../helpers/distance";
|
|
|
import {longitude, latitude, mapWidth, mapHeight} from "./../config/variables";
|
|
|
import {Button} from "reactstrap";
|
|
|
import {getRoute} from "./../helpers/mapboxHelper";
|
|
|
+import PathButtons from "./../PathButtons";
|
|
|
|
|
|
const Map = ReactMapboxGl({ accessToken: mapboxToken });
|
|
|
|
|
@@ -25,14 +26,22 @@ export default class Mapbox extends React.Component{
|
|
|
distance: 0,
|
|
|
center: [longitude, latitude]
|
|
|
}
|
|
|
-
|
|
|
this.getRoute = getRoute.bind(this)
|
|
|
}
|
|
|
|
|
|
+ updateState = (key, value) => {
|
|
|
+ this.setState({[key]: value})
|
|
|
+ this.getDistance()
|
|
|
+ }
|
|
|
+
|
|
|
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()
|
|
|
}
|
|
|
|
|
|
updateMarker = (idx, event) => {
|
|
@@ -87,6 +96,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}/>
|
|
|
</div>
|
|
|
</div>
|
|
|
);
|