# Directions(Sample)
Use the `DirectionsService` to get route data and render it in the most simple way. Checkout the [DirectionsService](../references/directions) to learn more.
## Demo
## Examples
### Plain HTML
You can find the live Demo on CodeSandbox [here](https://codesandbox.io/s/fjgq7?file=/v2/directions.html).
```html
Basic Map
```
### React
You can find the live Demo on CodeSandbox [here](https://codesandbox.io/p/sandbox/unruffled-cache-gvpy6k?file=/src/pages/Directions.js).
```javascript
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 = ''
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 (
)
}
export default DirectionsDemo
```