WrldNavigation

WrldNavigation is an optional widget for finding routes and displaying directions. You can display the routes using the WrldRouteView widget.

Dependencies

wrld.css
navigation.js

For an example of how to use the WrldNavigation widget, see this example.

Constructor

var navigation = new WrldNavigation("wrld-navigation-container", map, "your_api_key_here");

Argument	Type	Description
id	string \| null	The id of the DOM element to contain the navigation widget. This is optional. Pass `null` here if you do not require the widgets UI.
map	`Wrld.map`	The map object that the routes will be displayed on.
apiKey	string	A valid API key which is required by the routing service.

Static Methods

WrldNavigation.buildLocation(name, latitude, longitude, indoorMapId, indoorMapFloorId)

Returns a Location object in the format used by the WrldNavigation widget.

Argument	Type	Description
name	string	The name of the location.
latitude	number	The latitude of the location in degrees.
longitude	number	The longitude of the location in degrees.
indoorMapId	string	(Optional) The id of the indoor map where the location is.
indoorMapFloorId	string	(Optional) The identifier of the indoor map floor where the location is. In the WRLD Indoor Map Format, this corresponds to the ‘z_order’ field of the Level object.

Methods

navigation.openControl()

Brings the navigation widget into view. It slides in from the left.

navigation.closeControl()

Removes the navigation widget from view. It slides out to the left.

navigation.resetControl()

Removes the navigation widget from view and clears the locations and displayed directions.

navigation.swapJourneyLocations()

Swaps the displayed start and end locations in the UI. This does not update any routes or displayed directions.

navigation.setDirections(directions)

Sets the displayed directions.

Argument	Type	Description
directions	`Direction`[]	An array of directions to display. Only the ‘name’ and ‘icon’ properties on the `Direction` is required here.

navigation.clearDirections()

Clears the displayed directions.

navigation.setRouteDuration(duration)

Sets the displayed duration of the route. The duration will be displayed in minutes and seconds.

Argument	Type	Description
duration	number	The duration of the route in seconds.

navigation.clearLocations()

Clears the displayed locations.

navigation.setStartLocation(location)

Sets the displayed start location.

Argument	Type	Description
location	`Location`	The start location to be displayed. Only the ‘name’ property on the `Location` is required here.

navigation.setEndLocation(location)

Sets the displayed end location.

Argument	Type	Description
location	`Location`	The end location to be displayed. Only the ‘name’ property on the `Location` is required here.

navigation.findRoute(startLocation, endLocation, callback)

Finds a route between two locations, passing the result into a callback.

Argument	Type	Description
startLocation	`Location`	The start location of the route.
endLocation	`Location`	The end location of the route.
callback	function	The function to call when a route has been found. The function will be passed a `RouteResult` object.

navigation.buildDirectionsForRoute(route, callback)

Builds directions for a route, passing the result into a callback.

Argument	Type	Description
route	`Route`	The route to build directions for.
callback	function	The function to call when directions have been built. The function will be passed a `DirectionsResult` object.

Events

The following events can be listened to :

Event	Data	Description
startlocationfocused	Event	Fired when the start location box gains focus.
endlocationfocused	Event	Fired when the end location box gains focus.
startlocationclear	Event	Fired when the start location box is cleared.
endlocationclear	Event	Fired when the end location box is cleared.
swapjourneylocations	Event	Fired when the swap journey locations button is selected.
backselected	Event	Fired when the back arrow button is selected.
directionresultselected	DirectionResultSelectedEvent	Fired when a direction is selected.

DirectionResultSelectedEvent

Property	Type	Description
direction	Direction	The direction that was selected.
rowIndex	number	The row number of the direction that was selected.

Data Types

There are a few data types used by WrldNavigation. This section describes the structure of these objects, and the types of their fields.

Location

Below is the structure of a Location object which contains all the information about a location that is required by WrldNavigation to find a route.

{
    "name": string,
    "latLng": Wrld.LatLng,
    "indoorMapId": string,
    "indoorMapFloorId": string,
    "isIndoors": boolean
}

RouteResult

Below is the structure of the RouteResult object which is passed into the callback from the findRoute method. Fields with a ? following them are optional and may be omitted.

{
    "error": string?,
    "route": Route?
}

Route

Below is the structure of the Route object which is a property in the RouteResult object.

{
    "sections": {
        "steps": {
            "path": Wrld.LatLng[],
            "mode": string,
            "directions": {
                location: Wrld.LatLng[],
                type: string,
                modifier: string,
                bearingBefore: number,
                bearingAfter: number
            },
            "duration": number,
            "distance": number,
            "indoorMapId": string,
            "indoorMapFloorId": number,
            "isMultiFloor": boolean,
            "isIndoors": boolean,
            "name": string
        }[],
        "duration": number,
        "distance": number
    }[],
    "routeDuration": number,
    "routeDistance": number
}

DirectionsResult

Below is the structure of the DirectionsResult object which is passed into the callback from the buildDirectionsForRoute method. Fields with a ? following them are optional and may be omitted.

{
    "error": string?,
    "directions": Direction[]?,
    "duration": number?,
    "distance": number?,
    "route": Route?
}

Direction

Below is the structure of the Direction object which is a property in the DirectionsResult object.

{
    "name": string,
    "icon": string,
    "distance": number,
    "instruction": string,
    "nextInstruction": string,
    "isIndoors": boolean,
    "indoorMapId": string,
    "indoorMapFloorId": number,
    "indoorMapFloorName": string,
    "nextIndoorMapFloorId": number,
    "isMultiFloor": boolean,
    "path": Wrld.LatLng[]
}