jku-ba-react/src/MapGL.js

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} from "reactstrap";

export default class MapGL extends React.Component{
  state = {
    viewport: {
      width: mapWidth,
      height: mapHeight,
      latitude: latitude,
      longitude: longitude,
      zoom: 15,
      bearing: 0,
      pitch: 0
    },
    path: [[longitude, latitude]],
    distance: 0,
  };

  addMarker = event => {
    const lng = event.lngLat[0]
    const lat = event.lngLat[1]
    console.log("Clicked at", lng, "/", lat);
    this.getRoute(lng, lat);
    this.getDistance()
  }

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

  getRoute = (lng, lat) => {
    let pathCopy = this.state.path.slice();
    var end = [lng, lat];
    if (this.state.path.length < 1){
      pathCopy.push(end)
      this.setState({path: pathCopy})
    } else {
      var start = this.state.path[this.state.path.length-1];
      var baseUrl = "https://api.mapbox.com/directions/v5/mapbox/"
      var url = baseUrl + "driving/" + start[0] + "," + start[1] + ";" + end[0] + "," + end[1] + "?alternatives=true&geometries=geojson&steps=true&access_token=" + mapboxToken;

      var req = new XMLHttpRequest();
      req.open('GET', url, true);
      req.onload = (self) => {
        var json = JSON.parse(req.response);
        var data = json.routes[0];
        var route = data.geometry.coordinates;
        route.map((pos) => pathCopy.push(pos))
        pathCopy.push(end)
        this.setState({path: pathCopy})
      };
      req.send();
    }
  }

//  geojson = {
//    type: 'FeatureCollection',
//    features: [{
//      type: 'Feature',
//      geometry: {
//        type: 'LineString',
//        coordinates: this.state.path
//      }
//    }]
//  }

  render() {
    return (
      <div>
        <div className="map">
          <ReactMapGL
            {...this.state.viewport}
            onViewportChange={(viewport) => this.setState({viewport})}
            mapboxApiAccessToken={mapboxToken}
            mapStyle="mapbox://styles/mapbox/streets-v11"
            onClick={this.addMarker}
          >

          {/*
          <Source id="my-data" type="geojson" data={this.geojson}>
            <Layer
              source="my-data"
              id="point"
              type="line"
              paint={{
                "line-color": "#888",
                "line-width": 8
              }}
              layout= {{
                "line-join": "round",
                "line-cap": "round"
              }}
            />
          </Source>
          */}

          {this.state.path.map((pos, idx) =>
            <Marker
              longitude={pos[0]}
              latitude={pos[1]}
              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={markerIcon} />
              </svg>
            </Marker>
          )}

            <div className="controllers">
              <GeolocateControl />
              <FullscreenControl />
              <NavigationControl />
              <ScaleControl />
              <small> {'\u00A9'} Mapbox {'\u00A9'} OpenStreetMap </small>
            </div>
          </ReactMapGL>
        </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>
    );
  }
}