Wayfinding Without Using Journey (Legacy)

While Journey is a great utility for drawing a single path with all the features, it may sometimes be limiting. For instance, you may only draw one Journey at a time, and subsequent calls to Journey.draw() will overwrite the previous.

This guide demonstrates functionality which has changed with the release of Mappedin Web SDK v5.8.0. drawPath(), removePath(), and removeAllPaths() has been deprecated and there is a new Paths Layer. Click here to read the up-to-date guide.

For full control over the route, draw the path using the drawPath() method within the MapView and pass it the directions.path.

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

const directions = startLocation.directionsTo(endLocation);
mapView.drawPath(directions.path);

This creates a basic path with no extra features. Using this method, you will need to handle both multi-floor navigation and multi-destination wayfinding manually using tooltips and by drawing multiple paths.

We can draw a secondary path the same way as the first while providing different start and end locations. To make this new path stand out, style it a different color by changing the color property. The documentation for TPathOptions covers the other options available to you.

The CodeSandbox below demonstrates a single map with multiple destination paths.