<aside> đź’ˇ Defines the default appearance and behavior settings of the infobox.
</aside>
Structure:
InfoboxProperty = {
default: { //(Optional): Contains default configuration settings for the infobox, such as:
showTitle: boolean //(Optional) - Whether to display the title of the infobox.
title: string //(Optional) - The title text of the infobox.
height: number //(Optional) - The height of the infobox.
heightType: "auto" | "manual" //(Optional) - Specifies whether the height is automatic or manually set.
infoboxPaddingTop, infoboxPaddingBottom, infoboxPaddingLeft, infoboxPaddingRight: number //(Optional) - Padding settings for the infobox.
size: "small" | "medium" | "large" //(Optional) - The size of the infobox.
position: "right" | "middle" | "left" //(Optional) - The position of the infobox relative to the layer.
typography: Typography //(Optional) - Typographic settings for text within the infobox.
bgcolor: string //(Optional) - The background color of the infobox.
outlineColor: string //(Optional) - Color of the outline around the infobox.
outlineWidth: number //(Optional) - Width of the outline around the infobox.
useMask: boolean //(Optional) - Whether a mask is applied to the infobox background.
};
};
Description: This is an optional boolean that determines whether the title of the infobox should be displayed. This property allows developers to configure the visibility of the infobox title, enabling a more streamlined or customized presentation based on the specific needs of the project or user preferences.
Type:
showTitle?: boolean;
//An optional boolean that explicitly controls the display of the infobox title. This straightforward yet powerful setting provides flexibility in how information is presented within the infobox, allowing for both visibility and suppression of the title based on the setting provided.
//If not specified, the default behavior typically depends on the broader configuration settings of the infobox or the default styling guidelines of the Reearth platform.
true //When set to true, the title specified in the title property of the infobox will be displayed to the user;
false //when set to false or if undefined, the title will not be shown, which can be useful in cases where a minimalistic design is preferred or the context itself provides sufficient identification of the content.
Description: This is an optional string that specifies the title or headline of the infobox. This property serves as a label or caption for the infobox, providing a concise description or name that helps users quickly understand the context or content represented by the infobox. The title is typically displayed at the top of the infobox and is used to attract attention or summarize the information contained within. Setting this property allows developers to customize the infobox according to specific thematic or informational requirements, enhancing user engagement and comprehension.
Type:
title?: string;
//When provided, is used as the displayed title of the infobox. This can include any textual content that is deemed appropriate for describing or identifying the infobox content.
//If the title property is not set, the infobox may not display a title, depending on the default configuration or specific design choices made for the infobox presentation.
//This flexibility allows for both structured, labeled presentations and more streamlined, minimalist designs without a prominent title.
Description: This is an optional numeric value that specifies the height of the infobox in pixels. This property allows developers to explicitly set the height of the infobox to accommodate the content it contains or to fit specific design requirements. By specifying the height, developers can ensure that the infobox appears with a consistent size across different screens and configurations, or adjust it dynamically based on the context or user interaction. Setting this property is crucial for creating visually appealing and functionally appropriate interfaces, especially when the infobox needs to display varying amounts of content or interact with other UI elements in a controlled manner.
Type:
height?: number;
//Defines the height of the infobox in pixels.
//If provided, it sets a fixed height for the infobox, overriding any default or automatic sizing that might otherwise adjust based on the infobox's content or container.
//If this property is not specified, the height of the infobox may default to auto-sizing based on its content or other styling rules defined within the platform, which can be beneficial for adaptability but might lack the precision of fixed sizing.
Description: This is an optional setting that specifies how the height of the infobox should be determined. This property can be set to either "auto" or "manual," providing control over the sizing behavior of the infobox. This property allows developers to tailor the infobox presentation to specific layout needs or content variability, enhancing the user interface's adaptability and consistency.
Type:
heightType?: "auto" | "manual";
// The heightType property can take either of these two string values, allowing for flexible configuration of the infobox height.
// Choosing between "auto" and "manual" provides developers with strategic control over the display and user experience, accommodating both dynamic content that requires adaptable space and static layouts that benefit from uniform sizing.
"auto" //When set to "auto," the height of the infobox automatically adjusts to fit the content it contains. This setting ensures that the infobox is always the right size to display its entire content without any overflow or excessive whitespace, making it responsive to varying content sizes.
"manual" //When set to "manual," the height of the infobox adheres to a fixed value specified by the height property. This setting is useful when a consistent infobox size is needed across different instances, regardless of the amount of content.
Description: This is an optional numerical value that specifies the padding space at the top of the infobox. Padding is the space between the content inside the infobox and its boundaries. The infoboxPaddingTop defines this space specifically for the top edge of the infobox, allowing developers to control how the content is visually presented within the infobox frame.
Type:
infoboxPaddingTop?: number;
//The infoboxPaddingTop is an optional number representing the padding size in pixels at the top of the infobox.
//If specified, it sets a precise amount of space above the content within the infobox, contributing to the overall styling and readability.
//If this property is not set, the top padding might default to a pre-configured amount or be absent, depending on the default styling rules defined within the Reearth platform or the specific design choices made for the infobox.
//This flexibility allows developers to customize the user interface to fit both the content needs and aesthetic preferences.
Description: This is an optional numerical value that specifies the padding space at the bottom of the infobox. Padding is the space between the content inside the infobox and its outer boundaries. The infoboxPaddingBottom sets this space for the bottom edge of the infobox, allowing developers to control the spacing and ensure that the content does not directly touch the bottom boundary of the infobox frame.
Type:
infoboxPaddingBottom?: number;
//The infoboxPaddingBottom is an optional number that denotes the padding size in pixels at the bottom of the infobox.
//If specified, this property establishes a specific distance between the content's lower end inside the infobox and the infobox’s bottom boundary.
//If this property is not set, the bottom padding might default to a standard value based on the overall styling rules of the Reearth platform or can be absent, depending on the default configurations.
//This flexibility allows for tailored user interface designs that can adapt to various content types and visual requirements.
Description: This is an optional numerical value that specifies the padding on the left side of the infobox. Padding is the space between the inner content of the infobox and its outer boundaries, and setting the infoboxPaddingLeft allows developers to control the spacing on the left edge, ensuring that the content within the infobox does not touch or come too close to the left boundary.
Type:
infoboxPaddingLeft?: number;
//Determines the size of the padding in pixels on the left side of the infobox.
//If this property is specified, it sets a defined space that serves as a margin between the left boundary of the infobox and the start of its content.
//If not specified, the left padding may default to either a pre-set value dictated by the platform's styling rules or be absent, depending on the default configuration or design aesthetics in place.
//This flexibility in configuration allows developers to customize the spacing according to the specific needs of the project or the desired visual impact.
Description: This is an optional numerical value that specifies the padding on the right side of the infobox. This padding is the space between the content inside the infobox and the right boundary of the infobox frame. Setting the infoboxPaddingRight allows developers to control this spacing, ensuring that the content does not directly touch or come too close to the right edge of the infobox
Type:
infoboxPaddingRight?: number;
//Represents the padding size in pixels on the right side of the infobox.
//If specified, this property sets a defined distance that acts as a buffer zone between the content's end within the infobox and the infobox’s right boundary.
//If this property is not set, the right padding might default to a certain value based on the platform's overall design rules, or it could be omitted, depending on the default styling preferences.
//This customization capability allows developers to tailor the infobox appearance to meet specific design standards or to accommodate the specific layout needs of the content displayed within the infobox.
Description: This is an optional setting that specifies the overall size of the infobox. This property allows developers to select between predefined size categories— "small," "medium," or "large." Each category represents a different set of dimensions for the infobox, affecting how much space it occupies on the screen and how much content it can comfortably display.
Setting the size property is important for ensuring that the infobox is appropriately scaled for the information it needs to convey and the space available within the user interface.
Type:
size?: "small" | "medium" | "large";
//The size property is a string that allows for selection among three predefined size options.
//Choosing the appropriate size ensures that the infobox not only fits the designated content well but also aligns harmoniously with the overall design and layout of the application.
//If not specified, the size of the infobox may default to a standard setting, typically "medium," unless overridden by other design considerations or specific project requirements.
"small" //might be used for infoboxes that contain minimal text or simple images.
"medium" //could be suitable for more detailed information or a moderate amount of content.
"large" //may be appropriate for extensive content, including detailed descriptions, multiple images, or interactive elements.
Description: This is an optional setting that specifies the horizontal positioning of the infobox relative to the layer or the content it is associated with. This property provides three options for placement: "right," "middle," or "left." Adjusting the position of the infobox is crucial for achieving optimal visibility and integration with the rest of the user interface, ensuring that the infobox does not obstruct important content on the map or screen while remaining accessible and noticeable to users.
Type:
position?: "right" | "middle" | "left";
//The position property is a string that allows the developer to choose the horizontal placement of the infobox within the viewing area.
//This strategic placement helps in enhancing the user's experience by considering both the informational needs and the visual balance of the interface.
//If not specified, the positioning of the infobox may default to a standard setting based on the platform's layout norms or the specific design requirements of the project.
"right" //Places the infobox to the right of the layer or specified anchor point. This is commonly used when the main content or focus area is on the left, allowing the infobox to provide supplementary information without covering the primary visual elements.
"middle" //Centers the infobox, typically over the layer or the anchor point. This position is useful when the infobox content is the primary focus or when it needs to appear directly over the layer for maximum emphasis.
"left" //Positions the infobox to the left of the layer or anchor point, suitable when the right side contains essential visuals or interactive elements that should remain unobstructed.
Description: This is an optional attribute that defines the styling of text within the infobox. This property enables developers to customize the appearance of the infobox's textual content, enhancing readability, aligning with brand standards, or improving visual appeal. The Typography settings include various attributes such as font family, size, weight, color, and text alignment, as well as options for bold, italic, and underline styles. These settings are crucial for ensuring that the text is not only legible but also aesthetically consistent with the rest of the application.
Type:
typography?: Typography;
Typography = {
fontFamily?: string;
fontSize?: number;
fontWeight?: number;
color?: string;
textAlign?: "left" | "center" | "right" | "justify" | "justify_all";
bold?: boolean;
italic?: boolean;
underline?: boolean;
};
fontFamily //The font family used for the text, allowing for specific typefaces to be set for branding or readability.
fontSize //The size of the font in points, controlling the readability and emphasis of the text.
fontWeight //The weight (thickness) of the font, where higher numbers represent bolder text.
color //The color of the text, specified in CSS-compatible color formats such as names, hex codes, or RGB values.
textAlign?: "left" | "center" | "right" | "justify" | "justify_all" //Alignment of the text within the infobox, which can be set to left, center, right, justify, or fully justified.
bold //A boolean indicating whether the text should be displayed in a bold style.
italic //A boolean indicating whether the text should be displayed in an italic style.
underline //A boolean indicating whether the text should have an underline.
Description: This is an optional string that specifies the background color of the infobox. This property allows developers to set a specific color for the background of the infobox, enhancing its visual appearance and ensuring that it stands out or blends in with the rest of the user interface as required. The color can be defined using any standard CSS color format, such as hexadecimal codes, RGB values, or named colors.
Type:
bgcolor?: string;
//The bgcolor is an optional string that should be a valid CSS color value. This flexibility allows developers to precisely tailor the look of the infobox to fit various design themes or branding requirements.
//If not specified, the background color of the infobox may default to a predefined color set by the platform or the infobox's styling settings, which typically aims to ensure sufficient contrast and readability.
Description: This is an optional string that specifies the color of the outline around the infobox. This property is used to set a distinct border color for the infobox, which can help to visually separate the infobox from the background or other UI elements. The choice of outline color can enhance the visual impact of the infobox, making it more prominent or subtly integrating it with the overall design of the user interface.
Type:
outlineColor?: string;
//The outlineColor is an optional string that should be a valid CSS color value.
//If specified, it determines the color of the outline that encircles the infobox, adding a visual layer that can either contrast sharply for emphasis or blend smoothly for aesthetic harmony.
//If this property is not specified, the outline may default to a color that fits with the default or custom styling settings of the infobox, potentially designed to ensure adequate visibility and stylistic coherence.
Description: This is an optional numerical value that specifies the width of the outline around the infobox. This property allows developers to define the thickness of the border that surrounds the infobox, enabling precise control over its visual prominence and aesthetic appeal. By adjusting the width of the outline, developers can enhance the visibility of the infobox against complex backgrounds or subtly frame the content to align with the overall design of the user interface.
The choice of outline width is important for achieving the desired visual impact. A wider outline can make the infobox stand out more distinctly, which is especially useful in crowded or visually busy environments. Conversely, a narrower outline can be used for a more understated, elegant appearance that complements the surrounding content without overwhelming it.
Type:
outlineWidth?: number;
//The outlineWidth is an optional number that represents the thickness of the infobox’s outline in pixels.
//If specified, it sets a defined width for the outline, creating a clear boundary around the infobox.
//This can range from a fine line that subtly encases the content to a bold border that clearly demarcates the infobox from other elements.
//If this property is not specified, the width of the outline may default to a standard value that typically aims to balance visibility and aesthetic discretion based on the platform's default styling or the specific design settings of the project.
Description: This is an optional boolean that specifies whether a mask should be applied to the background of the infobox. This property enables developers to control the visibility and interaction between the infobox and the underlying map or content by adding a semi-transparent or opaque layer between the infobox and the background elements.
Using a mask can be particularly effective in improving readability and focus on the infobox content, especially in visually complex environments where the underlying map or imagery might distract from the information presented in the infobox. The mask typically dims or blurs the area behind the infobox, allowing the text and other elements within the infobox to stand out more clearly, thus enhancing the user's ability to concentrate on the infobox content.
Type:
useMask?: boolean;
//The useMask is an optional boolean that dictates whether a masking effect is applied to the background when the infobox is displayed
true //If set to true, the infobox will overlay a mask that can help to visually separate the infobox from the map or background content, making the infobox easier to read.
false //If set to false or if undefined, no mask will be applied, and the infobox will be displayed without any additional background modifications.
//This allows for flexibility in design and user experience, accommodating different presentation needs and preferences.