Get started with mapbox-gl-directions CDN

ISC licensed

Mapbox-gl-directions is a library for generating route directions using Mapbox GL JS.

Tags:
  • directions
  • routing
  • osm
  • gl

Stable version

Copied!

How to start using mapbox-gl-directions CDN


// Include required Mapbox GL libraries
const mapboxgl = require('mapbox-gl');
mapboxgl.accessToken = 'your.mapbox.access.token';

// Include Mapbox GL Directions
const Directions = require('mapbox-gl-directions/dist/mapbox-gl-directions.js');

// Create a map
const map = new mapboxgl.Map({
  container: 'map', // replace with your map container ID
  style: 'mapbox://styles/mapbox/streets-v11', // replace with your preferred map style
  center: [-122.4194, 37.7749], // replace with your preferred map center
  zoom: 12, // replace with your preferred map zoom level
});

// Create a directions object
const directions = new Directions({
  accessToken: mapboxgl.accessToken,
  unit: 'metric', // set the unit of measurement (metric or imperial)
});

// Add directions to the map
directions.addTo(map);

// Set up directions between two points
const origin = [-122.4194, 37.7749]; // replace with your origin coordinates
const destination = [-122.3521, 37.7749]; // replace with your destination coordinates

directions.route({
  origin: origin,
  destination: destination,
}).then((result) => {
  // Do something with the directions result
  console.log(result);
});
Copied!
Copied!
Copied!
Copied!

All versions