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

Map Settings API

The Embedded Web Directory also allows passing in settings for the Web Map V2.0 API. Using this feature, the styles of the map preview images on the destination view can be customised for example.

Overview

In addition to the required apiKey attribute and the optional settings API attribute the Embedded Web Directory web component accepts an optional mapSettings attribute. This accepts a JavaScript object of various settings to customise the component's content. Details of the settings options are available in the. Documentation for the Web Map v2.0

Passing the Map Settings Attribute to the Component

The settings object can either be passed to the component in two ways.

1. Pass the attribute directly on the component - if you use this approach, be sure to use single quote marks when passing the object.
<wf-app apiKey="xxxxxxxx-xxxxxxxxxxxxx" mapSettings='{"label": {"color": {"r": 255, "g": 165, "b": 0}}}'></wf-app>
 

2. By creating the settings object as a variable and then selecting the web component and setting the attribute using JavaScript. To use this approach give the Embedded Web Directory component a unique id:

<wf-app id="webDirectory" apiKey="xxxxxxxx-xxxxxxxxxxxxx"></wf-app>

and then include a script such as this:

<script>
  const mapSettings = {
    label: {color: {r: 255, g: 165, b: 0}}
    // other settings
  };
  let webDirectory = document.getElementById('webDirectory');
  webDirectory.mapSettings = mapSettings;
</script>