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 property="og:description" content="Example routing multiple points using plugin TrackAsia GL Directions, custom points with Marker and Popup." />
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/trackasia-gl.css" />
<script src="https://unpkg.com/[email protected]/dist/trackasia-gl.js"></script>
<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%;
}
.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>
</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');
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(
{element: 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(
{element: 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(
{element: createMarkerElement('B', '#EA4335')}
);
destinationMarker.setLngLat(destinationLatLng);
destinationMarker.setPopup(createPopup('Ending!'));
destinationMarker.addTo(map);
});
</script>
</body>
</html>