import React from "react"; import ReactMapGL from "react-map-gl"; import { Marker, NavigationControl, FullscreenControl, ScaleControl, GeolocateControl, Layer, Source, } from "react-map-gl"; import "./../css/maps.css"; import mapboxToken from "./../config/mapboxToken.js"; import {calcDistance} from "./../helpers/distance"; import {longitude, latitude, mapWidth, mapHeight, markerIcon} from "./../config/variables"; import {Button, Input, Label, CustomInput, Row, Col, Container} from "reactstrap"; import {getRoute} from "./../helpers/mapboxHelper"; import PathButtons from "./../PathButtons"; import { Editor, EditingMode, DrawLineStringMode, DrawPolygonMode, } from "react-map-gl-draw"; import EvaluationTable from "./../EvaluationTable"; const drawModes = [ {id: "drawPolyline", text: "Draw Polyline", handler: DrawLineStringMode}, {id: "drawPolygon", text: "Draw Polygon", handler: DrawPolygonMode}, {id: "editing", text: "Edit Feature", handler: EditingMode}, ]; export default class MapGL extends React.Component{ constructor(props){ super(props); this.state = { viewport: { width: mapWidth, height: mapHeight, latitude: latitude, longitude: longitude, zoom: 14, bearing: 0, pitch: 0 }, path: [[longitude, latitude]], distance: 0, drawModeId: null, drawModeHandler: null, color: "rgb(189,189,189)", strokeDash: "4,2", strokeWidth: 2, fill: "rgb(189,189,189)", fillOpacity: 0.2 } this.getRoute = getRoute.bind(this) } updateState = (key, value) => { this.setState({[key]: value}) this.getDistance() } addMarker = event => { if (this.state.drawModeHandler===null){ const lng = event.lngLat[0] const lat = event.lngLat[1] this.getRoute(lng, lat); } } updateMarker = (idx, event) => { const lng = event.lngLat[0] const lat = event.lngLat[1] 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}) } switchDrawMode = (event) => { const modeId = event.target.value===this.state.drawModeId ? null:event.target.value; const mode = drawModes.find((m) => m.id===modeId); const modeHandler = mode ? new mode.handler() : null; this.setState({"drawModeid": modeId, "drawModeHandler": modeHandler}); }; drawToolbar = () => { return (
Distanz: {Math.round(this.state.distance*100)/100} km