Interface MapLibreGlDirectionsConfiguration

An API-provider URL to make the routing requests to.

Any http://project-osrm.org/|OSRM-compatible or Directions API-compatible API-provider is supported.

Default

"https://router.project-osrm.org/route/v1"

Example

api: "https://router.project-osrm.org/route/v1"
Copy

Example

api: "https://api.mapbox.com/directions/v5"
Copy

Whether to support waypoints' https://docs.mapbox.com/api/navigation/directions/#optional-parameters|bearings.

See

• #Requests
• Direction API #Optional parameters

Default

false

Example

// enable the bearings support
bearings: true
Copy

A minimal amount of pixels a waypoint or the hoverpoint must be dragged in order for the drag-event to be respected, and for network requests to be made when using refreshOnMove: true. Should be a number >= 0. Any negative value is treated as 0.

Default

10

Example

// Don't respect drag-events where a point was dragged for less than 5px away from its initial location
dragThreshold: 5
Copy

The layers used by the plugin.

Default

The value returned by the layersFactory|layersFactory invoked with the passed options.pointsScalingFactor and options.linesScalingFactor

Note that you don't have to create layers with the layersFactory|layersFactory. Any LayerSpecification[] value is OK.

Note that if you add custom layers then you'd most probably want to register them as sensitive layers using the options.sensitiveWaypointLayers, options.sensitiveSnappointLayers, options.sensitiveAltRoutelineLayers and options.sensitiveRoutelineLayers options.

Example

// Use the default layers with all the points increased by 1.5 times and all the lines increased by 2 times and an additional `"my-custom-layer"` layer.
{
  layers: layersFactory(1.5, 2).concat([
    {
      id: "my-custom-layer",
      // ...
    }
  ])
}
Copy

A factor by which all the default lines' dimensions should be increased. The value is passed as is to the layersFactory|layersFactory's second argument.

Note that the option has no effect on the snaplines.

Note that the option has no effect when the layers option is provided.

Default

1

Example

// Increase all the lines by 2 times when the map is used on a touch-enabled device
linesScalingFactor: isTouchDevice ? 2 : 1
Copy

Whether to make a request instead of a GET one.

Note that this is only supported by the Mapbox Directions API. Don't set the value to true if using an OSRM-compatible API-provider.

Default

false

Example

api: "https://api.mapbox.com/directions/v5",
profile: "mapbox/driving-traffic",
makePostRequest: true
Copy

A factor by which all the default points' dimensions should be increased. The value is passed as is to the layersFactory|layersFactory's first argument.

Note that the option has no effect when the layers option is provided.

Default

1

Example

// Increase all the points by 1.5 times when the map is used on a touch-enabled device
linesScalingFactor: isTouchDevice ? 1.5 : 1
Copy

A routing profile to use. The value depends on the API-provider of choice.

See

• #Requests
• Direction API #Routing profiles

Default

"driving"

Example

api: "https://router.project-osrm.org/route/v1",
profile: "driving"
Copy

Example

api: "https://api.mapbox.com/directions/v5",
profile: "mapbox/driving-traffic"
Copy

Whether to update a route while dragging a waypoint/hoverpoint instead of only when dropping it

Default

false

Example

// make the route update while dragging
refreshOnMove: true
Copy

A list of the request-payload parameters that are passed along with routing requests.

Note that the access-token request-parameter has a special treatment when used along with makePostRequest: true. It's automatically removed from the FormData and passed as a URL query-parameter as the Mapbox Directions API https://docs.mapbox.com/api/navigation/http-post/|requires.

Default

{}

Example

requestOptions: {
  overview: "full",
  steps: "true"
}
Copy

Example

api: "https://api.mapbox.com/directions/v5",
profile: "mapbox/driving-traffic",
requestOptions: {
  access_token: "<mapbox-access-token>",
  annotations: "congestion",
  geometries: "polyline6"
}
Copy

A timeout in ms after which a still-unresolved routing-request automatically gets aborted.

Default

null (no timeout)

Example

// abort requests that take longer then 5s to complete
requestTimeout: 5000
Copy

IDs of the layers that are used to represent the alternative route lines which should be interactive.

Default

["maplibre-gl-directions-alt-routeline", "maplibre-gl-directions-alt-routeline-casing"]

Example

sensitiveAltRoutelineLayers: [
  "maplibre-gl-directions-alt-routeline",
  "maplibre-gl-directions-alt-routeline-casing",
  "my-custom-alt-routeline-layer"
]
Copy

IDs of the layers that are used to represent the selected route line which should be interactive.

Default

["maplibre-gl-directions-routeline", "maplibre-gl-directions-routeline-casing"]

Example

sensitiveRoutelineLayers: [
  "maplibre-gl-directions-routeline",
  "maplibre-gl-directions-routeline-casing",
  "my-custom-routeline-layer"
]
Copy

IDs of the layers that are used to represent the snappoints which should be interactive.

Default

["maplibre-gl-directions-snappoint", "maplibre-gl-directions-snappoint-casing"]

Example

sensitiveSnappointLayers: [
  "maplibre-gl-directions-snappoint",
  "maplibre-gl-directions-snappoint-casing",
  "my-custom-snappoint-layer"
]
Copy

IDs of the layers that are used to represent the waypoints which should be interactive.

Default

["maplibre-gl-directions-waypoint", "maplibre-gl-directions-waypoint-casing"]

Example

sensitiveSnappointLayers: [
  "maplibre-gl-directions-waypoint",
  "maplibre-gl-directions-waypoint-casing",
  "my-custom-waypoint-layer"
]
Copy

A name of the source used by the instance. Also used as a prefix for the default layers' names.

Note that if you decide to set this field to some custom value, you'd also need to update the following settings accordingly: sensitiveWaypointLayers, sensitiveSnappointLayers, sensitiveRoutelineLayers and sensitiveAltRoutelineLayers.

Default

"maplibre-gl-directions"

Example

sourceName: "my-directions"
Copy