Direction between multiple points | TrackAsia GL JS Docs

Example routing multiple points using plugin TrackAsia GL Directions.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Direction between multiple 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 waypointsLatLng = [[106.667,10.76],[106.661,10.7777],[106.698,10.78],[106.691,10.759]];
 
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': 0,
'circle-color': '#3bb2d0'
},
'filter': [
'all',
['in', '$type', 'Point'],
['in', 'marker-symbol', 'A']
]
},
{
'id': 'directions-destination-point',
'type': 'circle',
'source': 'directions',
'paint': {
'circle-radius': 0,
'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: false,
instructions: false,
styles: customStyles
});
 
map.addControl(directions, 'top-left');
 
map.on('load', () => {
// add origin
directions.setOrigin(originLatLng);
// add marker for origin
const originMarker = new trackasiagl.Marker({ color: '#34A853' });
originMarker.setLngLat(originLatLng);
originMarker.addTo(map);
 
// add waypoints
for (let index = 0; index < waypointsLatLng.length; index++) {
const waypointLatLng = waypointsLatLng[index];
directions.addWaypoint(index, waypointLatLng);
 
// add marker for the waypoint
const marker = new trackasiagl.Marker({ color: 'orange' });
marker.setLngLat(waypointLatLng);
marker.addTo(map);
}
 
// add destination
directions.setDestination(destinationLatLng);
// add marker for destination
const destinationMarker = new trackasiagl.Marker({ color: '#EA4335' });
destinationMarker.setLngLat(destinationLatLng);
destinationMarker.addTo(map);
});
</script>
 
</body>
</html>