Direction between multiple custom points | TrackAsia GL JS Docs

Example routing multiple points using plugin TrackAsia GL Directions, custom points with Marker and Popup.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Direction between multiple custom 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"
/>

<style>
.custom-marker {
width: 32px;
height: 32px;
border-radius: 50%;
background: orange;

display: inline-block;
position: relative;
border-bottom-left-radius: 0;
transform: rotate(-45deg);
}

.custom-marker .custom-marker-content {
top: 50%;
left: 50%;
font-size: 20px;
position: absolute;
transform: rotate(45deg) translate(-100%, -25%);
}

.custom-marker::before {
content: '';
background: white;
width: 75%;
height: 75%;
border-radius: 100%;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}

.custom-popup .trackasiagl-popup-content {
background-color: lightyellow;
}
</style>

<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');

function createMarkerElement(textContent, color) {
let markerEl = document.createElement('div');
let customMarkerEl = document.createElement('div');
let contentEl = document.createElement('div');

if (color) {
customMarkerEl.style.backgroundColor = color;
}
customMarkerEl.classList.add('custom-marker');
contentEl.classList.add('custom-marker-content');

contentEl.textContent = textContent;

customMarkerEl.appendChild(contentEl);
markerEl.appendChild(customMarkerEl);

return markerEl;
}

function createPopup(content) {
let popup = new trackasiagl.Popup({
offset: 5,
className: 'custom-popup'
}).setText(content);
return popup;
}

map.on('load', () => {
// add origin
directions.setOrigin(originLatLng);
// add marker for origin
const originMarker = new trackasiagl.Marker(
createMarkerElement('A', '#34A853')
);
originMarker.setLngLat(originLatLng);
originMarker.setPopup(createPopup('Starting!'));
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(
createMarkerElement(`${index + 1}`)
);
marker.setLngLat(waypointLatLng);
marker.setPopup(createPopup(`Waypoint: ${index + 1}`));
marker.addTo(map);
}

// add destination
directions.setDestination(destinationLatLng);
// add marker for destination
const destinationMarker = new trackasiagl.Marker(
createMarkerElement('B', '#EA4335')
);
destinationMarker.setLngLat(destinationLatLng);
destinationMarker.setPopup(createPopup('Ending!'));
destinationMarker.addTo(map);
});
</script>
 
</body>
</html>