Direction between multiple points
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" />
<meta property="og:description" content="Example routing multiple points using plugin TrackAsia GL Directions." />
<script src="https://unpkg.com/[email protected]/dist/trackasia-gl.js"></script>
<link href="https://unpkg.com/[email protected]/dist/trackasia-gl.css" rel="stylesheet" />
<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>
body {
margin: 0;
padding: 0;
}
#map {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}
</style>
</head>
<body>
<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/v2/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>