jku-ba-react/src/MapGL.js

import React from "react";
import ReactMapGL from "react-map-gl";
import {
  Marker,
  NavigationControl, 
  FullscreenControl,
  ScaleControl,
  GeolocateControl
} from "react-map-gl";
import "./css/maps.css";
import mapboxToken from './config/mapboxToken.js';
import {calcDistance} from './helpers/distance';

const ICON = `M20.2,15.7L20.2,15.7c1.1-1.6,1.8-3.6,1.8-5.7c0-5.6-4.5-10-10-10S2,4.5,2,10c0,2,0.6,3.9,1.6,5.4c0,0.1,0.1,0.2,0.2,0.3
  c0,0,0.1,0.1,0.1,0.2c0.2,0.3,0.4,0.6,0.7,0.9c2.6,3.1,7.4,7.6,7.4,7.6s4.8-4.5,7.4-7.5c0.2-0.3,0.5-0.6,0.7-0.9
  C20.1,15.8,20.2,15.8,20.2,15.7z`;
const LONGITUDE = 14.320570
const LATITUDE = 48.336950
  
export default class MapGL extends React.Component{
  state = {
    viewport: {
      width: 600,
      height: 400,
      latitude: LATITUDE,
      longitude: LONGITUDE,
      zoom: 15,
      bearing: 0,
      pitch: 0
    },
    path: []
  };
  
  addMarker = event => {
    const lng = event.lngLat[0]
    const lat = event.lngLat[1]
    console.log("Clicked at", lat, "/", lng)
    let pathCopy = this.state.path.slice();
    pathCopy.push([lat, lng]);
    this.setState({path: pathCopy})
    this.getDistance()
  }

  updateMarker = (idx, event) => {
    const lng = event.lngLat[0]
    const lat = event.lngLat[1]
    console.log(lat, lng, idx)
    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})
  }

  render() {
    return (
      <div>
        <ReactMapGL
          {...this.state.viewport}
          onViewportChange={(viewport) => this.setState({viewport})}
          mapboxApiAccessToken={mapboxToken}
          mapStyle="mapbox://styles/mapbox/streets-v11"
          onClick={this.addMarker}
        >
        
        {this.state.path.map((pos, idx) =>
          <Marker
            longitude={pos[1]}
            latitude={pos[0]}
            captureClick={false}
            draggable={true}
            offsetTop={-20}
            offsetLeft={-8}
            key={idx}
            onDragEnd={(e) => this.updateMarker(idx, e)}
          >
            <svg height={20} viewBox="0 0 24 24" style={{fill: "#343a40", stroke: "none"}}>
              <path d={ICON} />
            </svg>
          </Marker>
        )}

          <Marker
            longitude={LONGITUDE}
            latitude={LATITUDE}
            captureClick={false}
            draggable={false}
            offsetTop={-20}
            offsetLeft={-8}
          >
            <svg height={20} viewBox="0 0 24 24" style={{fill: "#343a40", stroke: "none"}}>
              <path d={ICON} />
            </svg>
          </Marker>

          <div className="controllers">
            <GeolocateControl />
            <FullscreenControl />
            <NavigationControl />
            <ScaleControl />
            <small> {'\u00A9'} Mapbox {'\u00A9'} OpenStreetMap </small>
          </div>
        </ReactMapGL>

        <div>
          <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>
    );
  }
}