• Optimization
  • Navigation
  • Tracking
  • Maps
  • Places

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;

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


Have Questions ?