Options are optional attributes added to your epicmap elements in Webflow that are used to customise their look or behaviour, or to add interactivity with ACTIONS.
Option attributes are written as with option replaced by the option’s name.
In epicmaps you can add any Mapbox option as an attribute within Webflow and have that option used when initialising MAPs, MARKERs, and POPUPs. These options can also be inherited, such as from LISTs to MARKERs, explained in Inherited Options.
Attributes in Webflow are always lowercase but Mapbox options are written in camelCase, i.e. the MARKER option className, where the first word is all lowercase and the first letter of each following word is capitalised. When adding this option as an attribute, a hyphen is added between each word and the capitalised N is changed to lowercase, so className becomes class-name.
The full attribute would be
Some Mapbox options contain more than one value, such as the MAP BOUNDS option padding, which can have individual values for padding top, padding left, padding right, and padding bottom. In Webflow, each of these would be set as their own attribute, with an underscore used to denote a nested option. For example, padding top becomes padding_top.
The full attribute would be , along with , , and .
If each of these were given a value of 16, this would be translated to the Mapbox option: padding: {top: 16, left: 16, right: 16, bottom: 16}
Elements that have other elements nested inside them, such as LISTs or ITEMs with their associated nested MARKER and POPUP elements, can have option attributes that are labelled for one of the nested elements and which will be passed on as inherited options. These options are labelled using the nested element’s type, in this case either marker or popup, followed by an underscore and then the option name, similar to nested values.
For example,
= set on a LIST element would mean that the MARKER for each ITEM in that LIST would inherit the option , along with the value . If the nested element also has the same option set, the nested element’s option value would override the inherited option. This allows for setting default options to groups of elements, such as MARKERs, but with the option for each MARKER to have a unique version of that option, if set.