Direction between two points | TrackAsia GL JS Docs

Example routing from point A to point B.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Direction between two points</title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<script src="https://unpkg.com/trackasia-gl@1.0.5/dist/trackasia-gl.js"></script>
<link href="https://unpkg.com/trackasia-gl@1.0.5/dist/trackasia-gl.css" rel="stylesheet" />
<style>
	body { margin: 0; padding: 0; }
	#map { position: absolute; top: 0; bottom: 0; width: 100%; }
</style>
</head>
<body>
<script src="https://unpkg.com/trackasia-gl-directions/dist/trackasia-gl-directions.js"></script>
<link
rel="stylesheet"
href="https://unpkg.com/trackasia-gl-directions/dist/trackasia-gl-directions.css"
/>
 
<div id="map"></div>
 
<script>
const originLatLng = [106.62,10.76];
const destinationLatLng = [106.7,10.8];
const customStyles = [
{
'id': 'directions-route-line-alt',
'type': 'line',
'source': 'directions',
'layout': {
'line-cap': 'round',
'line-join': 'round'
},
'paint': {
'line-color': '#bbb',
'line-width': 2
},
'filter': [
'all',
['in', '$type', 'LineString'],
['in', 'route', 'alternate']
]
},
{
'id': 'directions-route-line-casing',
'type': 'line',
'source': 'directions',
'layout': {
'line-cap': 'round',
'line-join': 'round'
},
'paint': {
'line-color': '#2d5f99',
'line-width': 4
},
'filter': [
'all',
['in', '$type', 'LineString'],
['in', 'route', 'selected']
]
},
{
'id': 'directions-route-line',
'type': 'line',
'source': 'directions',
'layout': {
'line-cap': 'butt',
'line-join': 'round'
},
'paint': {
'line-color': {
'property': 'congestion',
'type': 'categorical',
'default': '#4882c5',
'stops': [
['unknown', '#4882c5'],
['low', '#4882c5'],
['moderate', '#f09a46'],
['heavy', '#e34341'],
['severe', '#8b2342']
]
},
'line-width': 3
},
'filter': [
'all',
['in', '$type', 'LineString'],
['in', 'route', 'selected']
]
},
{
'id': 'directions-origin-point',
'type': 'circle',
'source': 'directions',
'paint': {
'circle-radius': 10,
'circle-color': '#3bb2d0'
},
'filter': [
'all',
['in', '$type', 'Point'],
['in', 'marker-symbol', 'A']
]
},
{
'id': 'directions-destination-point',
'type': 'circle',
'source': 'directions',
'paint': {
'circle-radius': 10,
'circle-color': '#8a8bc9'
},
'filter': [
'all',
['in', '$type', 'Point'],
['in', 'marker-symbol', 'B']
]
}
];
 
var map = new trackasiagl.Map({
container: 'map',
style: 'https://maps.track-asia.com/styles/v1/streets.json?key=public_key',
center: {"lat":10.762622,"lng":106.660172},
zoom: 3
});
 
const directions = new TrackAsiaDirections({
api: 'https://maps.track-asia.com/route/v1/',
apiKey: 'public_key',
unit: 'metric',
profile: 'car',
controls: {
inputs: false,
instructions: false
},
interactive: true,
instructions: true,
styles: customStyles
});
 
map.addControl(directions, 'top-left');
map.on('load', () => {
directions.setOrigin(originLatLng);
directions.setDestination(destinationLatLng);
});
</script>
 
</body>
</html>