Interface TLabelAppearance

Control how a Label looks

interface TLabelAppearance {
    margin?: number;
    marker?: {
        backgroundColor?: { active?: string; inactive?: string };
        foregroundColor?: { active?: string; inactive?: string };
        icon?: string;
        iconFit?: "fill" | "contain" | "cover";
        iconOverflow?: "visible" | "hidden";
        iconPadding?: number;
        iconSize?: number;
        iconVisibleAtZoomLevel?: number;
    };
    text?: {
        backgroundColor?: string;
        foregroundColor?: string;
        lineHeight?: number;
        maxWidth?: number;
        numLines?: number;
        size?: number;
    };
}

Properties

margin? marker? text?

Properties

Optionalmargin

margin?: number

Margin around the label and marker in pixels. This will affect label density. Minimum is 6px.

Default

6

Optionalmarker

marker?: {
    backgroundColor?: { active?: string; inactive?: string };
    foregroundColor?: { active?: string; inactive?: string };
    icon?: string;
    iconFit?: "fill" | "contain" | "cover";
    iconOverflow?: "visible" | "hidden";
    iconPadding?: number;
    iconSize?: number;
    iconVisibleAtZoomLevel?: number;
}

Type declaration

  • OptionalbackgroundColor?: { active?: string; inactive?: string }
    • Optionalactive?: string

      Background color of the marker when it is active. Color can be set using CSS colors names DarkGoldenRod, as Hex strings #0000FF or the rgb values rgb(255,0,0).

    • Optionalinactive?: string

      Background color of the marker when it is inactive (grayed out due to being outranked by other labels around). Color can be set using CSS colors names DarkGoldenRod, as Hex strings #0000FF or the rgb values rgb(255,0,0).

  • OptionalforegroundColor?: { active?: string; inactive?: string }
    • Optionalactive?: string

      Foreground color of the marker when it is active. Color can be set using CSS colors names DarkGoldenRod, as Hex strings #0000FF or the rgb values rgb(255,0,0).

    • Optionalinactive?: string

      Foreground color of the marker when it is inactive (grayed out due to being outranked by other labels around). Color can be set using CSS colors names DarkGoldenRod, as Hex strings #0000FF or the rgb values rgb(255,0,0).

  • Optionalicon?: string

    Icon to be placed inside the Floating Label marker. Supports SVG or a URL to png or jpeg.

    Example

    // SVG
    mapView.FloatingLabels.add(polygon, "Label", {
    	appearance: {
    		marker: {
    			icon: `<svg>...</svg>`,
    		},
    	},
    });

    Example

    // Image URL
    mapView.FloatingLabels.add(polygon, "Label", {
    	appearance: {
    		marker: {
    			icon: 'https://example.com/icon.png',
    		},
    	},
    });
  • OptionaliconFit?: "fill" | "contain" | "cover"

    How the icon should fit inside the marker.

    • fill will stretch the icon to fill the marker.
    • cover will maintain aspect ratio and fill the marker.
    • contain will maintain aspect ratio and fit the icon inside the marker.

    Default

    'cover'
  • OptionaliconOverflow?: "visible" | "hidden"

    Whether the icon should overflow the circle of the marker.

    Default

    'hidden'
  • OptionaliconPadding?: number

    Padding between the icon and the marker's border in pixels.

    Default

    2
  • OptionaliconSize?: number

    Size of bounding box of the icon

    Default

    20
  • OptionaliconVisibleAtZoomLevel?: number

    Defines the zoom level at which the icon becomes visible. Infinity ensures the icon is never visible. -Infinity ensures the icon is always visible.

    Default

    -Infinity

Optionaltext

text?: {
    backgroundColor?: string;
    foregroundColor?: string;
    lineHeight?: number;
    maxWidth?: number;
    numLines?: number;
    size?: number;
}

Type declaration

  • OptionalbackgroundColor?: string

    Text background color. Color can be set using CSS colors names DarkGoldenRod, as Hex strings #0000FF or the rgb values rgb(255,0,0).

  • OptionalforegroundColor?: string

    Text foreground color. Color can be set using CSS colors names DarkGoldenRod, as Hex strings #0000FF or the rgb values rgb(255,0,0).

  • OptionallineHeight?: number

    Line height sets the height of a line box. It's commonly used to set the distance between lines of text.

    Default

    1.2
  • OptionalmaxWidth?: number

    Maxiumum width of text in pixels.

  • OptionalnumLines?: number

    Number of lines to display when text spans multiple lines.

  • Optionalsize?: number

    Text size in pixels

Settings

Member Visibility

On This Page

Properties
MMNEPVFCICPMFPCPTTAAATR