123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155 |
- 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: [],
- 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 = (
- <Layer type="symbol" id="marker" layout={{"icon-image": "marker-15"}}>
- {testMarkers.map((pos, idx) =>
- <Feature
- coordinates={pos}
- key={idx}
- />
- )}
- </Layer>
- )
- } else {
- markers = testMarkers.map((pos, idx) =>
- <Marker
- coordinates={pos}
- key={idx}
- anchor="bottom"
- >
- <svg height={15} viewBox="0 0 24 24" style={{fill: "#343a40"}}>
- <path d={markerIcon} />
- </svg>
- </Marker>
- )}
- } else {
- markers = (
- <Layer type="symbol" id="marker"
- layout={{"icon-image": "marker-15", "icon-anchor": "bottom", "icon-offset": [0,3]}}>
- {this.state.path.map((pos, idx) =>
- <Feature
- coordinates={pos}
- key={idx}
- draggable={true}
- onDragEnd={(e) => this.updateMarker(idx, e)}
- />
- )}
- </Layer>
- )
- }
- return (
- <div>
- <div className="map">
- <Map
- style={mapStyles.bright}
- containerStyle={{
- height: mapHeight,
- width: mapWidth
- }}
- center={this.state.center}
- zoom={this.state.zoom}
- onClick={(e, c) => this.addMarker(e, c)}
- >
- <Layer type="line"
- layout={{"line-join": "round", "line-cap": "round"}}
- paint={{"line-color": "#888", "line-width": 3}}
- >
- <Feature coordinates = {this.state.path}/>
- </Layer>
- {markers}
- <ZoomControl position={"top-right"}/>
- <ScaleControl position={"bottom-right"}/>
- <RotationControl position={"top-right"}/>
- <DrawControl/>
- </Map>
- </div>
- <div className="mapInfo">
- <Button onClick={this.clearPath}>Clear path</Button>
- <Button onClick={this.getDistance}>Calculate Distance</Button>
- <p>
- Distanz: {Math.round(this.state.distance*100)/100} km
- </p>
- <PathButtons updateState={this.updateState} path={this.state.path} switchLatLng={true}/>
- </div>
- <EvaluationTable mapId="mapbox"/>
- </div>
- );
- }
- }
|