import React from "react";
import ReactMapboxGl, {
Layer,
Feature,
ZoomControl,
ScaleControl,
RotationControl,
Marker,
} from "react-mapbox-gl";
import DrawControl from "react-mapbox-gl-draw";
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 {getRoute, mapStyles} from "./../helpers/mapboxHelper";
import PathButtons from "./../PathButtons";
import EvaluationTable from "./../EvaluationTable";
const Map = ReactMapboxGl({ accessToken: mapboxToken });
export default class Mapbox extends React.Component{
constructor(props){
super(props);
this.state = {
latitude: latitude,
longitude: longitude,
zoom: [14],
path: [[longitude, latitude], [longitude+0.003, latitude]],
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) => {
const lng = event.lngLat.lng
const lat = event.lngLat.lat
let pathCopy = this.state.path.slice();
pathCopy[idx] = [lng, lat]
this.setState({path: pathCopy})
this.getDistance()
}
getDistance = () => {
let dst = calcDistance(this.state.path)
this.setState({distance: dst})
}
clearPath = () => {
this.setState({path: [], distance: 0})
}
render() {
let testMarkers = this.props.markers
let testMarkerType = this.props.markerType
let markers = <>>
if (testMarkers){
if (testMarkerType === "feature"){
markers = (
Distanz: {Math.round(this.state.distance*100)/100} km