Type alias TLabelAppearance

TLabelAppearance: {
    margin?: number;
    marker?: {
        backgroundColor?: {
            active?: string;
            inactive?: string;
        };
        foregroundColor?: {
            active?: string;
            inactive?: string;
        };
        icon?: string;
        iconSize?: number;
        iconVisibilityThreshold?: number;
        size?: number;
    };
    text?: {
        backgroundColor?: string;
        foregroundColor?: string;
        lineHeight?: number;
        maxWidth?: number;
        numLines?: number;
        size?: number;
    };
}

Control how a Label looks

Type declaration

  • Optional margin?: number

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

    Default

    6
    
  • Optional marker?: {
        backgroundColor?: {
            active?: string;
            inactive?: string;
        };
        foregroundColor?: {
            active?: string;
            inactive?: string;
        };
        icon?: string;
        iconSize?: number;
        iconVisibilityThreshold?: number;
        size?: number;
    }
    • Optional backgroundColor?: {
          active?: string;
          inactive?: string;
      }
      • Optional active?: string

        Background color of the marker in hex when it is active

      • Optional inactive?: string

        Background color of the marker in hex when it is inactive (grayed out due to being outranked by other labels around)

    • Optional foregroundColor?: {
          active?: string;
          inactive?: string;
      }
      • Optional active?: string

        Foreground color of the marker in hex when it is active

      • Optional inactive?: string

        Foreground color of the marker in hex when it is inactive (grayed out due to being outranked by other labels around)

    • Optional icon?: string

      SVG of icon to place inside a label

      Example

      <svg height="16" viewBox="0 0 36 36" width="16">
      <g fill="white">
      ${icon}
      </g>
      </svg>
    • Optional iconSize?: number

      Size of bounding box of SVG icon in pixels

    • Optional iconVisibilityThreshold?: number

      Defines when the icon becomes visible relative to the current zoom level anything below 0 will result in icons never showing up 0 ensures icons show up at maxZoom (fully zoomed in) 1 ensures they always show up

    • Optional size?: number

      Size of the marker in pixels

      Deprecated

      Behavior when using this along with iconVisibilityThreshold and icon is undefined

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

      Text background color in hex

    • Optional foregroundColor?: string

      Text foreground color in hex

    • Optional lineHeight?: 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
      
    • Optional maxWidth?: number

      Maxiumum width of text in pixels

    • Optional numLines?: number

      Number of lines to display when text spans multiple lines

    • Optional size?: number

      Text size in pixels