No 'Access-Control-Allow-Origin' header is present on the requested resource.

andyfurniss4 commented 6 years ago

I'm trying to set up a simple map that automatically loads directions on the load of the map. Here is my HTML & JS:

<!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 = '########';

            var directions = new MapboxDirections({
                unit: 'metric',
                profile: 'mapbox/walking',
                container: 'directions',
                controls: { inputs: false }
            });

            var map = new mapboxgl.Map({
                container: 'map',
                style: 'mapbox://styles/andyfurniss/cjgkq5xda006z2rs21ash68cs',
                center: [116.0724, 5.9749],
                zoom: 10
            });

            map.addControl(directions);

            map.on('load', function () {
                directions.setOrigin([110.33333, 1.55]);
                directions.setDestination([116.0724, 5.9749]);
            });
        </script>
    </body>

</html>

This is just giving me the following error:

Failed to load https://api.mapbox.com/directions/v5/mapbox/mapbox/walking/110.33333%2C1.55%3B116.0724%2C5.9749.json?geometries=polyline&alternatives=true&steps=true&overview=full&access_token=undefined: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access. The response had HTTP status code 404.

What am I doing wrong? Apologies if I'm being a bit stupid, this is the first time I've using Mapbox!

pathmapper commented 6 years ago

There has been a change since the latest release v3.1.2 you are using. The docs have been updated, but there is no current release which matches the docs (see also https://github.com/mapbox/mapbox-gl-directions/issues/175).

If you use profile: 'walking' instead of profile: 'mapbox/walking' the No 'Access-Control-Allow-Origin' header error is gone.

Or you could build the directions-plugin from master and keep using profile: 'mapbox/walking'.

Please note that you need to set also an access token for the plugin:

var directions = new MapboxDirections({
         accessToken: mapboxgl.accessToken,
     unit: 'metric',
     profile: 'walking',
     container: 'directions',
     controls: { inputs: false } 
});

Additionally there is no route available for your origin and destination coordinates. You may check with the API playground if there's a route available:

auswahl_261

andyfurniss4 commented 6 years ago

Great, thank you. Changing the profile to 'walking' worked. Yes, as you say, there are no available directions for my route :(

andrewharvey commented 6 years ago

Now that v3.1.3 is released, the documentation is correct for the current release. If this is resolved @andyfurniss4 did you want to close this?

mapbox / mapbox-gl-directions

No 'Access-Control-Allow-Origin' header is present on the requested resource. #177