Directions(Sample)

Use the DirectionsService to get route data and render it in the most simple way. Checkout the DirectionsService to learn more.

Demo

Examples

Plain HTML

You can find the live Demo on CodeSandbox here.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta name="viewport" content="initial-scale=1.0" />
    <meta charset="UTF-8" />
    <title>Basic Map</title>
    <link
      href="https://maps-gl.nextbillion.io/maps/v2/api/css"
      rel="stylesheet"
    />
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      #map {
        width: 100vw;
        height: 100vh;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script src="https://maps-gl.nextbillion.io/maps/v2/api/js"></script>
    <script>
      (function () {
        // You need to replace the apiKey with yours
        nextbillion.apiKey = "db20c37e79d4420f9b2f71a766cacb91";
        var nbmap = new nextbillion.maps.Map({
          container: document.getElementById("map"),
          style: "https://api.nextbillion.io/maps/streets/style.json",
          zoom: 10,
          center: { lat: 34.08572, lng: -118.324569 }
        });

        nbmap.on("load", function () {
          const directionsService = new nextbillion.maps.DirectionsService();
          // request the directions api
          directionsService
            .route({
              origin: { lat: 34.06, lng: -118.424569 },
              waypoints: [{ lat: 33.98, lng: -118.354569 }],
              destination: { lat: 34.06, lng: -118.224569 }
            })
            .then((response) => {
              // render the result
              nbmap.map.addSource("route", {
                type: "geojson",
                data: {
                  type: "Feature",
                  properties: {},
                  geometry: {
                    type: "LineString",
                    coordinates: nextbillion.utils.polyline
                      .decode(response.routes[0].geometry, 6)
                      .map((c) => c.reverse())
                  }
                }
              });
              nbmap.map.addLayer({
                id: "route",
                type: "line",
                source: "route",
                layout: {
                  "line-join": "round",
                  "line-cap": "round"
                },
                paint: {
                  "line-color": "#8D5A9E",
                  "line-width": 8
                }
              });
            });
        });
      })();
    </script>
  </body>
</html>

React

You can find the live Demo on CodeSandbox here.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
import React, { useEffect } from 'react'
import '@nbai/nbmap-gl/dist/nextbillion.css'
import nextbillion, { NBMap, DirectionsService } from '@nbai/nbmap-gl'

const DirectionsDemo = () => {
  useEffect(() => {
    nextbillion.apiKey = 'db20c37e79d4420f9b2f71a766cacb91'
    const nbmap = new NBMap({
      container: document.getElementById('map'),
      style: 'https://api.nextbillion.io/maps/streets/style.json',
      zoom: 10,
      center: { lat: 34.08572, lng: -118.324569 }
    })

    nbmap.on('load', function () {
      const directionsService = new DirectionsService()
      // request the directions api
      directionsService
        .route({
          origin: { lat: 34.06, lng: -118.424569 },
          waypoints: [{ lat: 33.98, lng: -118.354569 }],
          destination: { lat: 34.06, lng: -118.224569 }
        })
        .then((response) => {
          // render the result
          nbmap.map.addSource('route', {
            type: 'geojson',
            data: {
              type: 'Feature',
              properties: {},
              geometry: {
                type: 'LineString',
                coordinates: nextbillion.utils.polyline
                  .decode(response.routes[0].geometry, 6)
                  .map((c) => c.reverse())
              }
            }
          })
          nbmap.map.addLayer({
            id: 'route',
            type: 'line',
            source: 'route',
            layout: {
              'line-join': 'round',
              'line-cap': 'round'
            },
            paint: {
              'line-color': '#8D5A9E',
              'line-width': 8
            }
          })
        })
    })
  })

  return (
    <div className="app">
      <div
        style={{
          width: '100%',
          height: '100%',
          position: 'fixed',
          top: '0',
          left: '0'
        }}
        id="map"></div>
    </div>
  )
}
export default DirectionsDemo


Have Questions ?