Maps Web SDK

Class L.RouteInstructions

Extends L.Control
Category Widgets

This widget display a panel with route instructions over the map.

Constructor

L.RouteInstructions([options])

Parameters
Name Description Required Type/Values Default
options Options to configure the widget No Object None
options.size Size of panel. The first element of the array is the width and the second the maximum height. It will fit to the size of the instructions. No Number[] [320, 320]
options.position Location of the widget No "topright" | "topleft" | "bottomright" | "bottomleft" "topleft"
options.instructionGroupsCollapsed Should instruction groups be collapsed on init No Boolean false
options.showInstructionGroups Should instruction groups be displayed No Boolean true
options.imperialDistance Set this option if you want to use a specific unit measurement system for the new instance of the widget instead of use the default unit No Boolean null
Example
var routeInstructionsInstance = new L.RouteInstructions({
    size: [270, 268],
    position: "topleft"
})
routeInstructionsInstance.addTo(map);

Methods

hide( )

Hides the route instructions.

By default instructions will be hidden.

hideInstructionGroups( )

Method to hide instructions groups.

Use this method to disable groups. Only instructions will be visible.

initialize([options])

Leaflet init method executed when adding control to map.

Options will be stored inside control.

Parameters
Name Description Required Type/Values Default
options Options to setup control. No Object None

onAdd(map): HTMLElement

Leaflet method executed when adding control to map. Map will be stored inside control.

Parameters
Name Description Required Type/Values Default
map Yes L.Map None
Returns

The main HTML element containing the widget.

show( )

Shows route instructions.

By default the instructions will be hidden. Use this method to show the control after data is ready.

showInstructionGroups( )

Method to show instructions with groups if there are any.

updateGuidanceData(guidanceData, [imperial])

Display the route instructions or update the already displayed content.

This method should be called to update the instructions displayed after each route calculation.

Parameters
Name Description Required Type/Values Default
guidanceData The routing properties object containing instruction groups and instructions. Yes Object None
imperial Display distance using imperial units No Boolean None

Events

L.RouteInstructions.Events.event InstructionGroupClickedCollapse

Event that is fired when group of instructions is clicking and related instructions are collapsing.
Properties
Name Description Type/Values Default
points Object with points that represents latitude and longitude of all instruction locations in route Object None
type Event's name String "instructionGroupClickedCollapse"
target Event's target Element None
Example
var widget = (new L.RouteInstructions())).addTo(map);
widget.on(L.RouteInstructions.Events.InstructionGroupClickedCollapse, function(event) {
     console.log(event);
});

L.RouteInstructions.Events.event InstructionGroupClickedExpand

Event that is fired when group of instructions is clicking and related instructions are expanding.
Properties
Name Description Type/Values Default
points Object with points that represents latitude and longitude of all instruction locations in group Object None
type Event's name String "instructionGroupClickedExpand"
target Event's target Element None
Example
var widget = (new L.RouteInstructions())).addTo(map);
widget.on(L.RouteInstructions.Events.InstructionGroupClickedExpand, function(event) {
     console.log(event);
});

L.RouteInstructions.Events.InstructionClickedDeselect

Event that is fired when instruction is clicked and is selected. In this case clicked instruction will be deselect (selected-instruction css class will be removed).
Properties
Name Description Type/Values Default
type Event's name String "instructionClickedDeselect"
target Event's target Element None
Example
var widget = (new L.RouteInstructions())).addTo(map);
widget.on(L.RouteInstructions.Events.InstructionClickedDeselect, function(event) {
     console.log(event);
});

L.RouteInstructions.Events.InstructionClickedSelect

Event that is fired when instruction is clicked and is not selected. In this case clicked instruction will be marked as selected (selected-instruction css class will be added). If any other instruction is selected, it will be deselect.
Properties
Name Description Type/Values Default
point Object of point that represents latitude and longitude of instruction location Object None
message Instruction message String None
type Event's name String "instructionClickedDeselect"
target Event's target Element None
Example
var widget = (new L.RouteInstructions())).addTo(map);
widget.on(L.RouteInstructions.Events.InstructionClickedSelect, function(event) {
     console.log(event);
});

L.RouteInstructions.Events.InstructionGroupHoverOff

Event that is fired when cursor is moving out of group of instructions.
Properties
Name Description Type/Values Default
type Event's name String "instructionGroupHoverOff"
target Event's target Element None
Example
var widget = (new L.RouteInstructions())).addTo(map);
widget.on(L.RouteInstructions.Events.InstructionGroupHoverOff, function(event) {
     console.log(event);
});

L.RouteInstructions.Events.InstructionGroupHoverOn

Event that is fired when cursor is moving into group of instructions.
Properties
Name Description Type/Values Default
points Array of objects that contains points (latitude and longitude) of all instructions from this group Array None
message Group message String None
type Event's name String "instructionGroupHoverOn"
target Event's target Element None
Example
var widget = (new L.RouteInstructions())).addTo(map);
widget.on(L.RouteInstructions.Events.InstructionGroupHoverOn, function(event) {
     console.log(event);
});

L.RouteInstructions.Events.InstructionHoverOff

Event that is fired when cursor is moving out of instruction.
Properties
Name Description Type/Values Default
type Event's name String "instructionHoverOff"
target Event's target Element None
Example
var widget = (new L.RouteInstructions())).addTo(map);
widget.on(L.RouteInstructions.Events.InstructionHoverOff, function(event) {
     console.log(event);
});

L.RouteInstructions.Events.InstructionHoverOn

Event that is fired when cursor is moving into instruction.
Properties
Name Description Type/Values Default
point Object of point that represents latitude and longitude of instruction location Object None
message Instruction message String None
type Event's name String "instructionHoverOn"
target Event's target Element None
Example
var widget = (new L.RouteInstructions())).addTo(map);
widget.on(L.RouteInstructions.Events.InstructionHoverOn, function(event) {
     console.log(event);
});