<div id="map"></div>
body {
  margin: 0;
  padding: 0;
}
#map {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
}
mapboxgl.accessToken =
  "pk.eyJ1Ijoib3R0eWxhYiIsImEiOiJjbTNsYmhxdWwwaWJtMnFxenIzNmJuaGJmIn0.QEnCKZZKJQBAbK8GFBzAcw";

const map = new mapboxgl.Map({
  container: "map",
  // Choose from Mapbox's core styles, or make your own style with Mapbox Studio
  style: "mapbox://styles/mapbox/streets-v12",
  center: [-79.4512, 43.6568],
  zoom: 13
});

const style = [
  {
    id: "directions-origin-point",
    type: "circle",
    source: "directions",
    paint: {
      "circle-radius": 18,
      "circle-color": "#ff0000"
    },
    filter: ["all", ["in", "$type", "Point"], ["in", "marker-symbol", "A"]]
  }
];

map.addControl(
  new MapboxDirections({
    accessToken: mapboxgl.accessToken,
    styles: style,
  }),
  "top-left"
);

External CSS

  1. https://api.mapbox.com/mapbox-gl-js/v3.0.0/mapbox-gl.css
  2. https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-directions/v4.1.1/mapbox-gl-directions.css

External JavaScript

  1. https://api.mapbox.com/mapbox-gl-js/v3.0.0/mapbox-gl.js
  2. https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-directions/v4.1.1/mapbox-gl-directions.js