Route finding with the Directions API and Turf.js

Learn how to build route finding into your navigation app using the Mapbox Directions API, Mapbox GL JS, and Turf.js. See the example: https://docs.mapbox.com//help/tutorials/route-finder-with-turf-mapbox-directions/

by Boyanliuu

HTML

<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v2.4.1/mapbox-gl.js"></script>
<script src="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-directions/v4.0.2/mapbox-gl-directions.js"></script>
<script src="https://npmcdn.com/@turf/turf/turf.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mapbox-polyline/1.1.1/polyline.js"></script>
<link rel="stylesheet" href="https://api.tiles.mapbox.com/mapbox-gl-js/v2.4.1/mapbox-gl.css">
<link rel="stylesheet" href="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-directions/v4.0.2/mapbox-gl-directions.css">

    <div id="map"></div>
    <div class="sidebar">
      <h1>Reports</h1>
      <div id="reports"></div>
    </div>

CSS

body {
        margin: 0;
        padding: 0;
        font-family: 'Open Sans', sans-serif;
      }

      #map {
        position: absolute;
        top: 0;
        bottom: 0;
        width: 100%;
      }

      .sidebar {
        position: absolute;
        margin: 20px 20px 30px 20px;
        width: 25%;
        top: 0;
        bottom: 0;
        padding: 20px;
        background-color: #fff;
        overflow-y: scroll;
      }

      .card {
        font-size: small;
        border-bottom: solid #d3d3d3 2px;
        margin-bottom: 6px;
      }

      .card-header {
        font-weight: bold;
        padding: 6px;
      }

      .no-route {
        background-color: #d3d3d3;
        color: #f00;
      }

      .obstacle-found {
        background-color: #d3d3d3;
        color: #fff;
      }

      .route-found {
        background-color: #33a532;
        color: #fff;
      }

      .card-details {
        padding: 3px 6px;
      }

JavaScript

mapboxgl.accessToken = 'pk.eyJ1Ijoic3ByaW5nZ2VtIiwiYSI6ImNrc2c3YTJ0YzFkbjMycm5xaGR0MnludWEifQ.k04fviSsj-CTCWSboCHZ8Q';
      const map = new mapboxgl.Map({
        container: 'map', // Specify the container ID
        style: 'mapbox://styles/mapbox/light-v10', // Specify which map style to use
        center: [-84.5, 38.05], // Specify the starting position [lng, lat]
        zoom: 11 // Specify the starting zoom
      });

      const directions = new MapboxDirections({
        accessToken: mapboxgl.accessToken,
        unit: 'metric',
        profile: 'mapbox/driving',
        alternatives: false,
        geometries: 'geojson',
        controls: { instructions: false },
        flyTo: false
      });

      map.addControl(directions, 'top-right');
      map.scrollZoom.enable();

      const clearances = {
        type: 'FeatureCollection',
        features: [
          {
            type: 'Feature',
            geometry: {
              type: 'Point',
              coordinates: [-84.47426, 38.06673]
            },
            properties: {
              clearance: "13' 2"
            }
          },
          {
            type: 'Feature',
            geometry: {
              type: 'Point',
              coordinates: [-84.47208, 38.06694]
            },
            properties: {
              clearance: "13' 7"
            }
          },
          {
            type: 'Feature',
            geometry: {
              type: 'Point',
              coordinates: [-84.60485, 38.12184]
            },
            properties: {
              clearance: "13' 7"
            }
          },
          {
            type: 'Feature',
            geometry: {
              type: 'Point',
              coordinates: [-84.61905, 37.87504]
            },
            properties: {
              clearance: "12' 0"
            }
          },
          {
            type: 'Feature',
            geometry: {
              type: 'Point',
              coordinates: [-84.55946, 38.30213]
    ...