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
<!DOCTYPE html>
2
<html lang="en">
3
  <head>
4
    <meta name="viewport" content="initial-scale=1.0" />
5
    <meta charset="UTF-8" />
6
    <title>Basic Map</title>
7
    <link
8
      href="https://maps-gl.nextbillion.io/maps/v2/api/css"
9
      rel="stylesheet"
10
    />
11
    <style>
12
      * {
13
        margin: 0;
14
        padding: 0;
15
      }
16
      #map {
17
        width: 100vw;
18
        height: 100vh;
19
      }
20
    </style>
21
  </head>
22
  <body>
23
    <div id="map"></div>
24
    <script src="https://maps-gl.nextbillion.io/maps/v2/api/js"></script>
25
    <script>
26
      (function () {
27
        // You need to replace the apiKey with yours
28
        nextbillion.apiKey = "db20c37e79d4420f9b2f71a766cacb91";
29
        var nbmap = new nextbillion.maps.Map({
30
          container: document.getElementById("map"),
31
          style: "https://api.nextbillion.io/maps/streets/style.json",
32
          zoom: 10,
33
          center: { lat: 34.08572, lng: -118.324569 }
34
        });
35

36
        nbmap.on("load", function () {
37
          const directionsService = new nextbillion.maps.DirectionsService();
38
          // request the directions api
39
          directionsService
40
            .route({
41
              origin: { lat: 34.06, lng: -118.424569 },
42
              waypoints: [{ lat: 33.98, lng: -118.354569 }],
43
              destination: { lat: 34.06, lng: -118.224569 }
44
            })
45
            .then((response) => {
46
              // render the result
47
              nbmap.map.addSource("route", {
48
                type: "geojson",
49
                data: {
50
                  type: "Feature",
51
                  properties: {},
52
                  geometry: {
53
                    type: "LineString",
54
                    coordinates: nextbillion.utils.polyline
55
                      .decode(response.routes[0].geometry, 6)
56
                      .map((c) => c.reverse())
57
                  }
58
                }
59
              });
60
              nbmap.map.addLayer({
61
                id: "route",
62
                type: "line",
63
                source: "route",
64
                layout: {
65
                  "line-join": "round",
66
                  "line-cap": "round"
67
                },
68
                paint: {
69
                  "line-color": "#8D5A9E",
70
                  "line-width": 8
71
                }
72
              });
73
            });
74
        });
75
      })();
76
    </script>
77
  </body>
78
</html>

React

You can find the live Demo on CodeSandbox here.

1
import React, { useEffect } from 'react'
2
import '@nbai/nbmap-gl/dist/nextbillion.css'
3
import nextbillion, { NBMap, DirectionsService } from '@nbai/nbmap-gl'
4

5
const DirectionsDemo = () => {
6
  useEffect(() => {
7
    nextbillion.apiKey = '<your_api_key>'
8
    const nbmap = new NBMap({
9
      container: document.getElementById('map'),
10
      style: 'https://api.nextbillion.io/maps/streets/style.json',
11
      zoom: 10,
12
      center: { lat: 34.08572, lng: -118.324569 }
13
    })
14

15
    nbmap.on('load', function () {
16
      const directionsService = new DirectionsService()
17
      // request the directions api
18
      directionsService
19
        .route({
20
          origin: { lat: 34.06, lng: -118.424569 },
21
          waypoints: [{ lat: 33.98, lng: -118.354569 }],
22
          destination: { lat: 34.06, lng: -118.224569 }
23
        })
24
        .then((response) => {
25
          // render the result
26
          nbmap.map.addSource('route', {
27
            type: 'geojson',
28
            data: {
29
              type: 'Feature',
30
              properties: {},
31
              geometry: {
32
                type: 'LineString',
33
                coordinates: nextbillion.utils.polyline
34
                  .decode(response.routes[0].geometry, 6)
35
                  .map((c) => c.reverse())
36
              }
37
            }
38
          })
39
          nbmap.map.addLayer({
40
            id: 'route',
41
            type: 'line',
42
            source: 'route',
43
            layout: {
44
              'line-join': 'round',
45
              'line-cap': 'round'
46
            },
47
            paint: {
48
              'line-color': '#8D5A9E',
49
              'line-width': 8
50
            }
51
          })
52
        })
53
    })
54
  })
55

56
  return (
57
    <div className="app">
58
      <div
59
        style={{
60
          width: '100%',
61
          height: '100%',
62
          position: 'fixed',
63
          top: '0',
64
          left: '0'
65
        }}
66
        id="map"></div>
67
    </div>
68
  )
69
}
70
export default DirectionsDemo
71