Skip to content
English
More support Support Portal
Contact us
  • There are no suggestions because the search field is empty.

JS Web Map UI V2.0 Getting Started

The UI is a Lit web component that interacts with the web map API. It can be themed with CSS variables and customised by passing in settings.

 Installation 

 If you already have the original version of the web map, please see: Upgrading from Web Map 1.0 page

Scripts

Include all required scripts in the document head. Note that the UI needs to be imported with type="module" . 

<script src="https://cdn.wayfinder.acquiredigital.com/live/js-api/three.min.js"></script> 
<script src="https://cdn.wayfinder.acquiredigital.com/live/js-api/wayfinderv2.js"></script> 
<script src="https://cdn.wayfinder.acquiredigital.com/live/js-api/wf-map-ui.js" type="module">
</script>

For those unable to use ECMAScript modules, the UI is also available as a CommonJS script: https://cdn.wayfinder.acquiredigital.com/live/js-api/wf-map-ui.umd.cjs 

Styles

By default, the UI requires two fonts, Lexend and Lato. If you are sticking with the default fonts, please add the following to the document head : 

<link rel="preconnect" href="https://fonts.googleapis.com"> 
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Lato:wght@400;700&family=Lexend:wght@100..900&display=swap" rel="stylesheet">

 There are many ways to include fonts on a webpage, if you are using your own build process, please feel free to use that instead. See: Theming Page for details on how to change the fonts. 

Markup

Add the wf-map-ui web component to the page, and add an element for the map. 

<wf-map-ui id="wayfinderMapUI">   
  <div id="wayfinderMap"></div> 
</wf-map-ui>

Initialise the map instance and pass the Wayfinder instance to the UI. This script tag should be placed in the body to ensure the elements are registered in the DOM. 

<script>   
  const mapElement = document.getElementById('wayfinderMap');   
  const uiElement = document.getElementById('wayfinderMapUI');    

  // Initialise the map and pass the instance to the UI   
  var wayfinder = new Wayfinder(mapElement);   
  uiElement.wayfinder = wayfinder;    

  // Rest of map setup   
  document.fonts.ready.then(() => {     
  wayfinder.loadFromApiKey(API_KEY);   
 }); 
</script>

 Example

An example can be found here: https://codepen.io/AcquireDigitalDemo/pen/xxeJBPZ