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.
1import React, { useEffect } from 'react'
2import '@nbai/nbmap-gl/dist/nextbillion.css'
3import nextbillion, { NBMap, DirectionsService } from '@nbai/nbmap-gl'
4
5const DirectionsDemo = () => {
6 useEffect(() => {
7 nextbillion.apiKey = 'db20c37e79d4420f9b2f71a766cacb91'
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}
70export default DirectionsDemo
713D model
Directions(Complex)
