jku-ba-react/src/helpers/mapboxHelper.js

import mapboxToken from "./../config/mapboxToken.js";

export const mapStyles = {
  "light": "mapbox://styles/mapbox/light-v9",
  "bright": "mapbox://styles/mapbox/bright-v9",
  "dark": "mapbox://styles/mapbox/dark-v9",
  "basic": "mapbox://styles/mapbox/basic-v9",
  "outdoor": "mapbox://styles/mapbox/outdoors-v10"
}

export function 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})
    this.getDistance()
  } else {
    var start = this.state.path[this.state.path.length-1];
    var baseUrl = "https://api.mapbox.com/directions/v5/mapbox/"
    var url = baseUrl + "walking/" + start[0] + "," + start[1] + ";" + end[0] + "," + end[1] + "?alternatives=true&geometries=geojson&steps=true&access_token=" + mapboxToken;

    fetch(url)
      .then(response => response.json())
      .then(data => {
        if("routes" in data){
          let route = data.routes[0].geometry.coordinates
          route.map((pos) => pathCopy.push(pos))
          pathCopy.push(end)
        } else{
          pathCopy.push(end)
        }
        this.setState({path: pathCopy})
        this.getDistance()
      })
      .catch((error) =>{
        console.error(error);
      });
  }
}