Interface MapLibreGlDirectionsConfiguration

The default|MapLibreGlDirections configuration object's interface.

interface MapLibreGlDirectionsConfiguration {
    api: string;
    bearings: boolean;
    dragThreshold: number;
    layers: LayerSpecification[];
    linesScalingFactor: number;
    makePostRequest: boolean;
    pointsScalingFactor: number;
    profile: string;
    refreshOnMove: boolean;
    requestOptions: Partial<Record<string, string>>;
    requestTimeout: number | null;
    sensitiveAltRoutelineLayers: string[];
    sensitiveRoutelineLayers: string[];
    sensitiveSnappointLayers: string[];
    sensitiveWaypointLayers: string[];
    sourceName: string;
}

Index

Properties

api bearings dragThreshold layers linesScalingFactor makePostRequest pointsScalingFactor profile refreshOnMove requestOptions requestTimeout sensitiveAltRoutelineLayers sensitiveRoutelineLayers sensitiveSnappointLayers sensitiveWaypointLayers sourceName

Properties

api

api: string

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"

Example

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

bearings

bearings: boolean

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

See

Default

false

Example

// enable the bearings support
bearings: true

dragThreshold

dragThreshold: number

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

layers

layers: LayerSpecification[]

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",
      // ...
    }
  ])
}

linesScalingFactor

linesScalingFactor: number

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

makePostRequest

makePostRequest: boolean

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

pointsScalingFactor

pointsScalingFactor: number

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

profile

profile: string

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

See

Default

"driving"

Example

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

Example

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

refreshOnMove

refreshOnMove: boolean

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

requestOptions

requestOptions: Partial<Record<string, string>>

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"
}

Example

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

requestTimeout

requestTimeout: number | null

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

sensitiveAltRoutelineLayers

sensitiveAltRoutelineLayers: string[]

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"
]

sensitiveRoutelineLayers

sensitiveRoutelineLayers: string[]

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"
]

sensitiveSnappointLayers

sensitiveSnappointLayers: string[]

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"
]

sensitiveWaypointLayers

sensitiveWaypointLayers: string[]

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"
]

sourceName

sourceName: string

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"

Interface MapLibreGlDirectionsConfiguration

Index

Properties

Properties

api

Default

Example

Example

bearings

See

Default

Example

dragThreshold

Default

Example

layers

Default

Example

linesScalingFactor

Default

Example

makePostRequest

Default

Example

pointsScalingFactor

Default

Example

profile

See

Default

Example

Example

refreshOnMove

Default

Example

requestOptions

Default

Example

Example

requestTimeout

Default

Example

sensitiveAltRoutelineLayers

Default

Example

sensitiveRoutelineLayers

Default

Example

sensitiveSnappointLayers

Default

Example

sensitiveWaypointLayers

Default

Example

sourceName

Default

Example

Settings

On This Page