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

© 2024 NextBillion.ai all rights reserved.