> ## Documentation Index
> Fetch the complete documentation index at: https://docs.baato.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Navigation route

> Draw a route between two points on a web map.

This example shows you how to make use of a bundled Baato JavaScript Library to display a navigation route received from the [Baato Directions API](/services/directions).

<Frame caption="A walking route drawn between two points">
  <img src="https://mintcdn.com/baato/3GUKEGLT42m2snov/images/html/navigation-route.png?fit=max&auto=format&n=3GUKEGLT42m2snov&q=85&s=2e46e53605e86fe6b94c1edbdc9ffa3b" alt="A route drawn between two points on a Baato web map" width="3074" height="1596" data-path="images/html/navigation-route.png" />
</Frame>

<CodeGroup>
  ```html Mapbox GL JS theme={null}
  <!DOCTYPE html>
  <html lang="en">

  <head>
      <meta charset="UTF-8" />
      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      <title>Navigation API</title>
      <script src="https://api.mapbox.com/mapbox-gl-js/v1.11.0/mapbox-gl.js"></script>
      <link href="https://api.mapbox.com/mapbox-gl-js/v1.11.0/mapbox-gl.css" rel="stylesheet" />
      <style>
          body {
              margin: 0;
              padding: 0;
          }
      </style>
  </head>

  <body>
      <div id="map" style="position: absolute; top: 0; bottom: 0; width: 100%;">
          <div
              style="z-index: 10; padding: 0 5px;background-color: hsla(0,0%,100%,.5);margin: 0; position:absolute; bottom:0px; right: 0px">
              © <a href="https://www.openstreetmap.org/copyright" rel="noopener noreferrer no follow"
                  target="_blank">OpenStreetMap contributors</a></div>
          <div
              style="z-index: 100; padding: 0 5px;background-color: hsla(0,0%,100%,.5);margin: 0; position:absolute; bottom:0px; left: 0px">
              <a href="https://baato.io" rel="noopener noreferrer no follow" target="_blank"><img
                      src="https://sgp1.digitaloceanspaces.com/baatocdn/images/BaatoLogo.svg" alt="Baato"
                      width="80px"></img></a>
          </div>
      </div>
      <script src="https://www.unpkg.com/@klltech/baato-js-client@1.2.0/dist/bundle.js"></script>
      <script>
          var map = new mapboxgl.Map({
              container: "map",
              style: "https://api.baato.io/api/v1/styles/breeze?key=YOUR_BAATO_ACCESS_TOKEN", // Baato stylesheet location
              center: [85.31853583740946, 27.701739466949107], // starting position [lng, lat]
              zoom: 14, // starting zoom
          });

          map.on("load", function () {
              new Baato.Routing({
                  key: "YOUR_BAATO_ACCESS_TOKEN",
              })
                  .addPoints(["27.695007971417382,85.30786383056528", "27.706710946667044,85.33378469848509"]) // points for which routing is to be done
                  .setVehicle("foot") // means of transporation
                  .getBest()
                  .doRequest()
                  .then((response) => {
                      response.forEach((item) => {
                          map.addSource("route", {
                              type: "geojson",
                              data: {
                                  type: "Feature",
                                  properties: {},
                                  geometry: {
                                      type: "LineString",
                                      coordinates: item.geojson.coordinates,
                                  },
                              },
                          });
                          map.addLayer({
                              id: "route",
                              type: "line",
                              source: "route",
                              layout: {
                                  "line-join": "round",
                                  "line-cap": "round",
                              },
                              paint: {
                                  "line-color": "#008148",
                                  "line-width": 8,
                              },
                          });
                      });
                  });
          });
      </script>
  </body>

  </html>
  ```

  ```html MapLibre GL JS theme={null}
  <!DOCTYPE html>
  <html lang="en">

  <head>
      <meta charset="UTF-8" />
      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      <title>Navigation API</title>
      <script src="https://cdn.maptiler.com/maplibre-gl-js/v1.13.0-rc.4/mapbox-gl.js"></script>
      <link href="https://cdn.skypack.dev/maplibre-gl/dist/maplibre-gl.css" rel="stylesheet" />
      <style>
          body {
              margin: 0;
              padding: 0;
          }
      </style>
  </head>

  <body>
      <div id="map" style="position: absolute; top: 0; bottom: 0; width: 100%;">
          <div
              style="z-index: 10; padding: 0 5px;background-color: hsla(0,0%,100%,.5);margin: 0; position:absolute; bottom:0px; right: 0px">
              © <a href="https://www.openstreetmap.org/copyright" rel="noopener noreferrer no follow"
                  target="_blank">OpenStreetMap contributors</a></div>
          <div
              style="z-index: 100; padding: 0 5px;background-color: hsla(0,0%,100%,.5);margin: 0; position:absolute; bottom:0px; left: 0px">
              <a href="https://baato.io" rel="noopener noreferrer no follow" target="_blank"><img
                      src="https://sgp1.digitaloceanspaces.com/baatocdn/images/BaatoLogo.svg" alt="Baato"
                      width="80px"></img></a>
          </div>
      </div>
      <script src="https://www.unpkg.com/@klltech/baato-js-client@1.2.0/dist/bundle.js"></script>
      <script>
          var map = new mapboxgl.Map({
              container: "map",
              style: "https://api.baato.io/api/v1/styles/breeze?key=YOUR_BAATO_ACCESS_TOKEN", // Baato stylesheet location
              center: [85.31853583740946, 27.701739466949107], // starting position [lng, lat]
              zoom: 14, // starting zoom
          });

          map.on("load", function () {
              new Baato.Routing({
                  key: "YOUR_BAATO_ACCESS_TOKEN",
              })
                  .addPoints(["27.695007971417382,85.30786383056528", "27.706710946667044,85.33378469848509"]) // points for which routing is to be done
                  .setVehicle("foot") // means of transporation
                  .getBest()
                  .doRequest()
                  .then((response) => {
                      response.forEach((item) => {
                          map.addSource("route", {
                              type: "geojson",
                              data: {
                                  type: "Feature",
                                  properties: {},
                                  geometry: {
                                      type: "LineString",
                                      coordinates: item.geojson.coordinates,
                                  },
                              },
                          });
                          map.addLayer({
                              id: "route",
                              type: "line",
                              source: "route",
                              layout: {
                                  "line-join": "round",
                                  "line-cap": "round",
                              },
                              paint: {
                                  "line-color": "#008148",
                                  "line-width": 8,
                              },
                          });
                      });
                  });
          });
      </script>
  </body>

  </html>
  ```
</CodeGroup>
