import React from "react";
import {
Map,
TileLayer,
Marker,
Popup,
ZoomControl,
ScaleControl,
Polyline,
// Tooltip,
FeatureGroup
} from "react-leaflet";
//import L from "leaflet";
import {EditControl} from "react-leaflet-draw";
import "react-leaflet-fullscreen/dist/styles.css";
import FullscreenControl from "react-leaflet-fullscreen";
import "./../css/maps.css";
import {calcDistance} from "./../helpers/distance";
import {longitude, latitude, mapWidth, mapHeight} from "./../config/variables";
import {Button} from "reactstrap";
import PathButtons from "./../PathButtons";
import {CustomInput, Input, Label, Row, Col, Container} from "reactstrap";
import mapboxToken from "./../config/mapboxToken.js";
import EvaluationTable from "./../EvaluationTable";
const mapStyles = {
"bright": "bright-v9",
"satellite": "satellite-streets-v9",
"light": "light-v9",
"dark": "dark-v9",
"basic": "basic-v9",
"outdoor": "outdoors-v10"
}
//const customIcon = new L.Icon({
// iconUrl: require("../images/marker_icon.png"),
// iconSize: [24, 40],
// iconAnchor: [12, 40],
//});
export default class Leaflet extends React.Component{
constructor(props){
super(props);
this.state = {
latitude: latitude,
longitude: longitude,
zoom: 15,
path: [],
distance: 0,
drawMode: false,
mapStyle: "bright-v9",
shapeOptions: {
color: "#000",
opacity: 1,
fillColor: "#000",
fillOpacity: 0.2,
weight: 2,
smoothFactor: 20
}
}
}
updateState = (key, value) => {
this.setState({[key]: value})
this.getDistance()
}
addMarker = event => {
if(!this.state.drawMode){
console.log("addmarker")
const { lat, lng } = event.latlng
let pathCopy = this.state.path.slice();
pathCopy.push([lat, lng]);
this.setState({path: pathCopy})
this.getDistance()
}
}
updateMarker = (idx, event) => {
let {lat, lng} = event.target.getLatLng();
let pathCopy = this.state.path.slice();
pathCopy[idx] = [lat, lng]
this.setState({path: pathCopy})
this.getDistance()
}
getDistance = () => {
let dst = calcDistance(this.state.path)
this.setState({distance: dst})
}
clearPath = () => {
this.setState({path: [], distance: 0})
}
_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);
}
switchDrawMode = () => {
this.setState({drawMode: !this.state.drawMode})
}
updateShapeOptions = (event, option) => {
let value = event.target.value
this.setState(prevState => ({
shapeOptions: {
...prevState.shapeOptions,
[option]: value
}
}))
}
selectMapStyle = (event) => {
this.setState({mapStyle: mapStyles[event.target.value]})
}
render() {
const position = [this.state.latitude, this.state.longitude]
let testMarkers = this.props.markers
let markers = <>>
if (testMarkers){
markers = this.props.markers.map((pos, idx) =>
Distanz: {Math.round(this.state.distance*100)/100} km