mapbox-gl-directions
mapbox-gl-directions copied to clipboard
mapbox
No 'Access-Control-Allow-Origin' header is present on the requested resource.
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!
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:
Great, thank you. Changing the profile to 'walking' worked. Yes, as you say, there are no available directions for my route :(
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?
