jku-ba-react/src/Mapbox.js

import React from "react";
import ReactMapboxGl, {
    Layer,
    Feature,
    ZoomControl,
    ScaleControl,
    RotationControl,
} from 'react-mapbox-gl';
import mapboxToken from './config/mapboxToken.js';
import {calcDistance} from './helpers/distance';
import {longitude, latitude, mapWidth, mapHeight} from "./config/variables";
import {Button} from "reactstrap";

const Map = ReactMapboxGl({ accessToken: mapboxToken });

export default class Mapbox extends React.Component{
  state = {
    latitude: latitude,
    longitude: longitude,
    zoom: [15],
    path: [[longitude, latitude]],
    distance: 0,
    center: [longitude, latitude]
    }

  addMarker = (event, click) => {
    const lng = click.lngLat.lng
    const lat = click.lngLat.lat
    console.log("Clicked at", lat, "/", lng)
    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
    console.log(lat, lng, idx)
    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() {
    const position = [this.state.longitude, this.state.latitude]
    return (
      <div>
        <div className="map">
          <Map
            style="mapbox://styles/mapbox/bright-v9"
            containerStyle={{
              height: mapHeight,
              width: mapWidth
            }}
            center={this.state.center}
            zoom={this.state.zoom}
            onClick={(e, c) => this.addMarker(e, c)}
          >
            <Layer type="symbol" id="marker" layout={{"icon-image": "marker-15" }}>
              {this.state.path.map((pos, idx) =>
                <Feature
                  coordinates={pos}
                  key={idx} draggable={true}
                  onDragEnd={(e) => this.updateMarker(idx, e)}
                />
              )}
            </Layer>
            <ZoomControl position={"top-right"}/>
            <ScaleControl position={"bottom-right"}/>
            <RotationControl position={"top-right"}/>
          </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>
        </div>
      </div>
    );
  }
}