Maps SDK for Web - L.RouteInstructions

Class L.RouteInstructions

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

This widget requires route data to work correcly. For more information please refer to our Routing example.

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

HTMLElement 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

All the class events are keys of the Events static member.

To learn more about how to listen events please refer to this documentation.

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);
});

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);
});

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);
});

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);
});

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);
});

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);
});

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);
});

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);
});