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

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

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

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

Swaps the displayed start and end locations in the UI. This does not update any routes or displayed 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.

Clears the displayed directions.

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.

Clears the displayed locations.

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.

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.

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.

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[]
}
v1.1.0
Props Wrld.Prop
Themes Wrld.themes
Heatmaps Wrld.Heatmap
Events Event objects
Services (Optional) WrldPoiApi