Load with directions showing Example

Option 1: URL Params

Construct the URL parameters according to the schema and add to the URL of the page that the Web Map 2.0 is embedded on. A full URL would look something like this

https://www.my-web-site.com/map/?wfparams=1&wf_df=mapapp&wf_s=12345&wf_e=67890 and could be used for example as a button link.

Option 2: JS API

A second option is to dispatch the mapapp event on the Wayfinder instance. Pass in the startNodeId and endNodeId of the route you would like to be shown. Optionally, pass in ddaMode to specify whether an accessible route should be preferred. You will need to wait for the database to be loaded before dispatching the event.

This example assumes you have followed the Getting Started guide and your Wayfinder instance is in a variable called wayfinder

// Register the event handler
wayfinder.addEventListener('loaded', () => {
    const startNodeId = 12345;
    const endNodeId = 67890;
    const ddaMode = 0; // Change to 1 for an accessible route
  
    wayfinder.dispatchEvent(
      new CustomEvent('mapapp', {
        detail: {startNodeId, endNodeId, ddaMode},
      })
    );
  });
// Load the project from the API_KEY
wayfinder.loadFromApiKey(API_KEY);