mapbox / mapbox-gl-directions

Directions plugin for mapbox-gl-js using Mapbox Directions API.
https://mapbox.com/mapbox-gl-js/example/mapbox-gl-directions/
ISC License
238 stars 123 forks source link

Change directions style/appearance #178

Open andyfurniss4 opened 6 years ago

andyfurniss4 commented 6 years ago

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>
Thuunderbear commented 5 years ago

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