Draw route on map using Goong Directions API | Goong Documents

Draw route on map using Goong Directions API with following tools:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Draw route on map using Goong Directions API</title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<script src="https://cdn.jsdelivr.net/npm/@goongmaps/goong-js@1.0.9/dist/goong-js.js"></script>
<link href="https://cdn.jsdelivr.net/npm/@goongmaps/goong-js@1.0.9/dist/goong-js.css" rel="stylesheet" />
<style>
	body { margin: 0; padding: 0; }
	#map { position: absolute; top: 0; bottom: 0; width: 100%; }
</style>
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/@mapbox/polyline/src/polyline.js"></script>
<script src="https://unpkg.com/@goongmaps/goong-sdk/umd/goong-sdk.min.js"></script>
 
<div id="map"></div>
<script>
goongjs.accessToken = '8qzxZAuxcsctSlmOszInchP1A5GrmRBHJwCBCjO6';
var map = new goongjs.Map({
container: 'map',
style: 'https://tiles.goong.io/assets/goong_map_web.json',
center: [105.80278, 20.99245],
zoom: 11.5
});
 
map.on('load', function () {
var layers = map.getStyle().layers;
// Find the index of the first symbol layer in the map style
var firstSymbolId;
for (var i = 0; i < layers.length; i++) {
if (layers[i].type === 'symbol') {
firstSymbolId = layers[i].id;
break;
}
}
// Initialize goongClient with an API KEY
var goongClient = goongSdk({
accessToken: 'PxNaGKg1NIWUJsFT3DMBkqaDspx5VvdW9CePVHq1'
});
// Get Directions
goongClient.directions
.getDirections({
origin: '20.981971,105.864323',
destination: '21.031011,105.783206',
vehicle: 'car'
})
.send()
.then(function (response) {
var directions = response.body;
var route = directions.routes[0];
 
var geometry_string = route.overview_polyline.points;
var geoJSON = polyline.toGeoJSON(geometry_string);
map.addSource('route', {
'type': 'geojson',
'data': geoJSON
});
// Add route layer below symbol layers
map.addLayer(
{
'id': 'route',
'type': 'line',
'source': 'route',
'layout': {
'line-join': 'round',
'line-cap': 'round'
},
'paint': {
'line-color': '#1e88e5',
'line-width': 8
}
},
firstSymbolId
);
});
});
</script>
 
</body>
</html>