Zoom to a destination 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_dest=1xx2-3xx4 and could be used for example as a button link.

Alternatively, if you are using the JS Web Directory and passing it the mapUrl setting, then you can find the already constructed URL parameters from each destination's 'View on map' button. From there you can copy the parameters and use them elsewhere as required.

Option 2: JS API

A second option is to dispatch the mapapp event on the Wayfinder instance. To get the Destination from the ID, you will have to wait until the database has been loaded.

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 destinationId = '1xx2-3xx4'; // Change this to the correct ID
  const destination =
    wayfinder.database.destinations.fromId(destinationId);

  wayfinder.dispatchEvent(
    new CustomEvent('mapapp', {
      detail: {destination},
    })
  );
});
// Load the project from the API_KEY
wayfinder.loadFromApiKey(API_KEY)

Zoom to a destination Example

To load the map and zoom to and select a specific destination, all that you need is the destination's Hex ID and the Mapapp URL Schema.

Option 1: URL Params

Option 2: JS API