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) => ) }else{ markers = this.state.path.map((pos, idx) => this.updateMarker(idx, e)} // icon={customIcon} > {/*{idx}*/} {idx} ) } return (
{this.setState({drawMode: true})}} draw={{ marker: false, circlemarker: false, polyline: {shapeOptions: this.state.shapeOptions}, polygon: {shapeOptions: this.state.shapeOptions}, circle: {shapeOptions: this.state.shapeOptions}, rectangle: {shapeOptions: this.state.shapeOptions}, }} /> {markers}
{Object.keys(mapStyles).map((key, idx) => ( ))}

Distanz: {Math.round(this.state.distance*100)/100} km


this.updateShapeOptions(e, "weight")} name="weight" id="weight" placeholder="weight" min="1" max="20" value={this.state.shapeOptions.weight}/> this.updateShapeOptions(e, "color")} name="color" id="colorPicker" placeholder="colorPicker"/> this.updateShapeOptions(e, "opacity")} name="opacity" id="opacity" placeholder="opacity" min="0" max="1" step="0.1" value={this.state.shapeOptions.opacity}/> this.updateShapeOptions(e, "fillColor")} name="fillColorPicker" id="fillColorPicker" placeholder="fillColorPicker"/> this.updateShapeOptions(e, "fillOpacity")} name="fillOpacity" id="fillOpacity" placeholder="fillOpacity" min="0" max="1" step="0.1" value={this.state.shapeOptions.fillOpacity}/>
); } }