Handling the View on map Link

Web Map 1

The 'View on map' link on the destination detail view of the Embedded Web Directory will link to a URL composed of the URL passed into mapUrl in the settings API plus a 'slugified' version of the destination name, the destination mesh ID and the destination's map (floor) ID as URL query parameters: https://www.example.com/map_page?dest=destination-name&mesh=MESH-ID&mapId=FLOOR-ID .

On your web page with the web map you can then check for the query parameters in the URL and use the Wayfinder Web API V1 to centre the map on the destination. An example snippet of code to get you started is shown below.

checkURLParams(1000);

/**
 * Loads the map, optionally specifying which
 * map to show first if URL param is present.
 *
 * @param mapId
 */
function loadMap(mapId) {
  // Get the URL params
  const urlParams = new URLSearchParams(window.location.search);
  // Get the destination param & 'un-slugify' it.
  const destParam = urlParams.get('dest');
  const destination = destParam ? decodeURIComponent(destParam) : '';
  // Get the mesh param
  const mesh = urlParams.get('mesh');

  // Set up event listeners
  ACQ.addEventListener("error", function(e) {
    console.log("Sorry we cannot load the map. Error: " + e.detail);
  });

  ACQ.addEventListener("ready", function() {
    // If the destination param exists, find and focus on the destination.
    if(destination.length) {
      // In some cases you may find that the focus on the destination does not work
      // because the map is not quite ready. Try wrapping it in a setTimeout if necessary.
      // setTimeout(
      //   function () {
      focusOnDestination(destination, mesh);
      //   },
      //   1000
      // );
    }
  });

  // Initialise the map with passing in any chosen settings
  ACQ.init(document.getElementById("wayfinder-map"), {
    apiKey: "your-api-key",
      // ...other settings
    }
  });
}

/**
 * Focuses on a given destination.
 *
 * @param destination
 * @param mesh
 */
function focusOnDestination(destination, mesh) {
  ACQ.destination.findByName(destination).then((destination) => {
    if (destination.length) {
      // check for multiple results
      if(destination.length > 1) {
        console.warn("multiple destination results found: ", destination);
        // code to handle multiple results - set destination to be the one clicked on from the 'view on map' link
        destination = destination.filter(dest => {
          return dest.object === mesh;
        });
      }

      // move to correct floor if not already on it
      if (destination[0].floor != WF.map.getActiveMapId()) {
        ACQ.map
          .loadFloor(destination[0].floor)
          .then(() => ACQ.destination.focus(destination[0].object));
      } else {
        ACQ.destination.focus(destination[0].object);
      }
    } else {
      console.warn("cannot find destination");
      // code to handle no match found - this is up to the particular implementation on your website.
      // A suggestion could be, if you are using a JavaScript alert replacement, such as Sweet Alert:
      // you could trigger an alert with a helpful message to the user.
    }
  })
}

/**
 * Waits until URL params are available.
 *
 * @param timeout
 * @returns {Promise<unknown>}
 */
function waitForURLParams(timeout) {
  const check = resolve => {
    if (location.search.length > 0) {
      // Get the mapId param if present or default to start up map of your choice
      const params = new URLSearchParams(window.location.search);
      const mapId = params.has('mapId') ? +params.get('mapId') : 136;
      resolve(mapId);
    } else {
      if (document.readyState !== 'complete') {
        setTimeout(() => check(resolve), timeout);
      } else {
        resolve(136);
      }
    }
  }
  return new Promise(check);
}

/**
 * Checks for startupMap URL param then initiates map loading.
 *
 * @param timeout
 * @returns {Promise<void>}
 */
async function checkURLParams(timeout) {
  const startupMap = await waitForURLParams(timeout);
  loadMap(startupMap);
}