mapbox-gl-directions icon indicating copy to clipboard operation
mapbox-gl-directions copied to clipboard

Published 20 hours ago • verified publisher icon mapbox

Change directions style/appearance

Open andyfurniss4 opened this issue 6 years ago • 1 comments

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>

andyfurniss4 avatar Apr 29 '18 20:04 andyfurniss4

Replace <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' /> by <link href='https://api.tiles.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-directions/v4.0.0/mapbox-gl-directions.css' rel='stylesheet' /> but if someone know how to change the stylesheet of Mapbox directions I want to know too

Thuunderbear avatar May 24 '19 13:05 Thuunderbear