Change directions style/appearance

Nobody has claimed this yet.

I am plotting a route with an origin, two waypoints and a destination but the waypoints do not show as anything on the resulting map, only the origin and the destination. In this case, the origin and the destination are the same so you only actually see the destination marker with a 'B'. It seems a bit odd that a waypoint wouldn't show as anything on the map. I don't seem to be able to find any documentation on how to change the styles for the route generated by mapbox directions. Is this even possible?

Here is my sample code:

<!DOCTYPE html>
<html>

	<head>
		<meta charset='utf-8' />
		<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.44.2/mapbox-gl.js'></script>
		<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.44.2/mapbox-gl.css' rel='stylesheet' />
	</head>
	
	<body>
		<script src='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-directions/v3.1.2/mapbox-gl-directions.js'></script>
		<link rel='stylesheet' href='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-directions/v3.1.2/mapbox-gl-directions.css' type='text/css' />
		<div id='map' style='width: 800px; height: 600px;'></div>
		
		<script>
			mapboxgl.accessToken = 'pk.eyJ1IjoiYW5keWZ1cm5pc3MiLCJhIjoiY2pnandraHJyMGo1aTJ3cDJ0NzEyM2VuZiJ9.tvna-0ojTbNwBmVUgXWMuw';
			
			var directions = new MapboxDirections({
				accessToken: '########',
				unit: 'metric',
				profile: 'walking',
				container: 'directions',
				interactive : false,
				controls: { inputs: false, instructions: false }
			});
			
			var map = new mapboxgl.Map({
				container: 'map',
				style: 'mapbox://styles/andyfurniss/cjgkq5xda006z2rs21ash68cs',
				center: [-123.159060, 49.671622],
				zoom: 12
			});
			
			map.addControl(directions);
			
			map.on('load', function () {		
				directions.setOrigin([-123.159060, 49.671622]);
				directions.addWaypoint(0, [-123.138334, 49.685327]);
				directions.addWaypoint(1, [-123.128262, 49.653568]);
				directions.setDestination([-123.159060, 49.671622]);
			});
		</script>
	</body>

</html>

Start with the sample HTML and the MapboxDirections setup, especially addWaypoint and the map load handler. Inspect how the plugin renders waypoint markers and route layers, then check whether its available styling options cover the requested appearance. Done means the waypoint markers are visible and the route styling can be changed as requested.

Written by the indexing model from the issue text.

Description

Contributor guide

First steps

Research direction

Assessment