TrackAsia GL JS Docs
TrackAsiaTrackAsia GL JS DocsExamplesDirection between multiple custom points

Direction between multiple custom points

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>