Class Journey

Clear the current Journey drawn by draw.

mapView.Journey.clear();
Copy

Draw a Journey based on directions. Example usage:

const startLocation = mapView.venue.locations.find(location => location.name === "Cleo");
const endLocation = mapView.venue.locations.find(location => location.name === "American Eagle");

const directions = startLocation.directionsTo(endLocation);
mapView.Journey.draw(directions);
Copy

Use options to set connection (such as elevators and escalators) HTML tooltip template, departure and destination marker templates, path style and polygon higlight color. If no options are set, sane defaults are used to draw markers, tooltips and polygon highlights.

Set the step of a multipart Journey. Requires draw to have been called with an array of MappedinDirections. An active step receives different styling.

// A multi destination set of directions
const departure = mapView.venue.locations.find((l) => l.name === "Apple")!;
const destination1 = mapView.venue.locations.find((l) => l.name === "Cleo")!;
const destination2 = mapView.venue.locations.find((l) => l.name === "KFC")!;
const destinationSet = new MappedinDestinationSet([destination1, destination2]);
const directions = departure.directionsTo(destinationSet);

// By default step 0 is active, meaning Apple to Cleo
mapView.Journey.draw(directions);

// Activate the step of the Journey from Cleo to KFC
mapView.Journey.setStep(1);
Copy

Set the step using a Path instance. Requires draw to have been called with an array of MappedinDirections. An active step receives different styling. This is most commonly used to activate a step when a path has been clicked.

// A multi destination set of directions
const departure = mapView.venue.locations.find((l) => l.name === "Apple")!;
const destination1 = mapView.venue.locations.find((l) => l.name === "Cleo")!;
const destination2 = mapView.venue.locations.find((l) => l.name === "KFC")!;
const destinationSet = new MappedinDestinationSet([destination1, destination2]);
const directions = departure.directionsTo(destinationSet);

// Make sure that the paths are all interactive
mapView.Journey.draw(directions, {
    pathOptions: { interactive: true },
    inactivePathOptions: { interactive: true },
});

// Listen for a path being clicked
mapView.on(E_SDK_EVENT.CLICK, ({ path }) => {
    if (path != null) {
        mapView.Journey.setStepByPath(path);
    }
});
Copy