Map Marker
Map Marker is one of the components that must be added to a Map component to be able to use and configure it. It defines the position marker or markers in a Map component. To insert a Map Marker component in the screen, go to the Left Panel in the Visual Builder. Go through the list of components to find the Map Marker component or click the search bar and type its name. Then, drag and drop the component into the canvas and configure its attributes in the right panel. Refer to the sections below to learn more.Building Tabs and Left Panel
Caution
The Map Marker component must be dragged and dropped within the Map component.
Attributes
In the right panel, you can configure different attributes to customize the component. Refer to the sections below to learn more.Right Panel
Design
In the Design tab, you can configure the selected component's basic information and the attributes that determine how the component will look like in the app. Refer to the sections below to learn more.
In this section, you fill in the selected component's basic details and alignment and size attributes. This section is available for every component dragged into the canvas. To learn more, read Design.
In this section, you can configure basic attributes of the component. Refer to the table below to learn more.
Position | Marker location defined in coordinates. To define the position, click the field and enter the latitude and longitude values following the format "[latitude], [longitude]". |
Title | Text associated to the position defined with the map marker. To configure the title, click the field and enter the text. |
Visible | Attribute that defines whether the component is visible in the app. Click the arrow and choose an option from the drop-down menu. Select true so that the component is visible in the app or false so that it is not visible. |
Important For Accessibility | Attribute that defines whether the screen reader reads or ignores the value defined in the Accessibility Text attribute of the component. Click the arrow and select an option from the drop-down menu. Choose true so that the screen reader reads the component or false so that the screen reader does not read the component. The default value is false. |
Accessibility Text | Alternative text. Add a short text to describe the component to users who may not be able to see it. The text will be read by iOS Voice Over or Android Talk Back. You can also add the accessibility text to the translations dictionary or select an existing translation if there are languages selected in your context settings.TranslationsSettings |
In this section, you can configure the size and position attributes of the component. Refer to the table below to learn more.
Position Type | Click the arrow and select a type from the drop-down menu. Refer to the table below to learn more about the options available.
| ||||||
Abs. Left | Click the field and enter the abs. left (X) value. To define the unit of measurement, click the arrow in the right field and select an option from the drop-down menu. | ||||||
Abs. Top | Click the field and enter the abs. top (Y) value. To define the unit of measurement, click the arrow in the right field and select an option from the drop-down menu. |
In this section, you can define the order of the components within the screen. Refer to the table below to learn more.
Z-Index | Property that defines the components' position order. If several components overlap, components with a higher Z-index will be placed over those with a lower index. This field is filled in automatically. |
In this section, you configure parameters applicable to the shadows of the component.
Shadow offset-x | Enter a value for the shadow with regard to the X (horizontal) axis, which considers the center of the component as starting point. If the value is a negative number, the shadow will point to the left. You can click the arrow located to the right of the shadow field and select a unit of measurement from the drop-down menu. |
Shadow offset-y | Enter a value for the shadow with regard to the Y (vertical) axis, which considers the center of the component as starting point. You can click the arrow located to the right of the shadow field and select a unit of measurement from the drop-down menu. |
Shadow Blur Radius | Enter a value for the width of the shadow radius. You can click the arrow located to the right of the shadow field and select a unit of measurement from the drop-down menu. |
Shadow Color | To set the shadow color, click the Shadow Color field and type a hexa color code or click the rounded-edges square icon to open the color picker located to the left (rounded-edges square icon). In the color picker, select a color or enter the hexa or rgba color code. |
In this section, you can set advanced attributes related to the design of the component as well as actions to be executed under specific circumstances. Refer to the table below to learn more.
Type | Attribute that defines whether the component is fixed or variable as part of a container. To set the type, click the arrow and choose an option from the drop-down menu. Select F to indicate a single element or V so that all the elements of the group are added, according to a specific array to be defined. |
Array | Id of the array from which the data is retrieved and displayed on screen. Enter the array number. ImportantThis attribute must be configured only if the Type attribute is set as V (variable). |
Filter | Attribute used to hide or show specific data from the array defined by setting a boolean expression. The filter will be applied if the condition defined in the boolean expression is true. To define a filter, click the field and enter the desired expression. |
Image | Image defined for the component icon to be visible in the app. By default, this attribute is configured with a pin icon image. To set the image, click the field and type the name of the image, or click the magnifying glass icon to open the image picker. Then, select one of the images available in the list, or use the search bar to find an image by name. |
Snippet | Text of the subtitle associated to the map marker's title. To define the text, click this field and enter a text. |
Snippet Text Color | Snippet text color. To set the color, click the field and type a hex color code or click the rounded edges square icon to open the color picker. In the color picker, select a color or click HEXA or RGBA, then click the field to the left and type a HEXA or RGBA color code, respectively. |
Snippet Text Background Color | Snippet background color. To set a color, click the field and type the hex color code or click the rounded edges square icon to open the color picker. In the color picker, select a color or click HEXA or RGBA, then click the field to the left and type a HEXA or RGBA color code, respectively. |
Actions
In the Actions tab, you can set animations for the components in your app's screen and determine how the user invokes effects and triggers actions while interacting with the app. Refer to the sections below to learn more.
In this section, you can set events or actions on the component that will be triggered by other certain actions. The only action available for configuration is On Click, which is an action involving clicking or tapping the component. If you configure this action, an event or action will be triggered when the app user clicks the component.
To set the event or action, type the action to be triggered in the On click field or click the vertical three-dot icon. The Create new link window opens. Click the down arrow and select one of the link types available in the drop-down menu: View, SW States, Process, Lambda, Pop Up, Toggle, Event, Link, Mail, Module Screen or Interface Message. A new drop-down menu appears. Click the down arrow and select the action or event within the selected type. Then, fill in the parameters applicable to the option selected. Once you configure the required parameters, click Accept.Instancing a Screen-type Module
In this section, you can set different effects on the component's attributes and the animations through which the effects take place. First, you must select the attributes for which you want to set effects. Refer to the table below to learn more.
Alpha | Component’s transparency or opacity. Enter the value to set the initial opacity of the component before the animation is executed. The value can range from 0 to 1, considering 1 as the value that grants the highest level of transparency. |
Rotation | Component's rotation angle. Enter the value to set the component's initial angle of rotation before the animation is executed. The value can go from 0 to 90, and it is expressed in degrees. |
Scale | Component's dimension. Enter the value to set the initial scale of the component before the animation is executed. By default, the scale value is 1, which equals the component’s original size. The value can be any number starting on 1. |
Then, you configure the animation through which the effects previously defined will be executed. The only animation available is On Load Effect, which occurs immediately after the screen loads. You can set the animation's code or configure it with the Animation Editor. To configure the animation, click </> and then click on the text field to start typing the code or click the vertical three-dot icon to open the Animation Editor. To learn more about the Animation Editor, read Actions.
Advanced
There are no attributes available for configuration in the Advanced tab for the Map Marker component.