Type alias TLabelAppearance

TLabelAppearance: {
    margin?: number;
    marker?: {
        backgroundColor?: {
            active?: string;
            inactive?: string;
        };
        foregroundColor?: {
            active?: string;
            inactive?: string;
        };
        icon?: string;
        iconFit?: "contain" | "fill" | "cover";
        iconPadding?: number;
        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;
        iconFit?: "contain" | "fill" | "cover";
        iconPadding?: number;
        iconSize?: number;
        iconVisibilityThreshold?: number;
        size?: number;
    }
    • Optional backgroundColor?: {
          active?: string;
          inactive?: string;
      }
      • Optional active?: 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).

      • Optional inactive?: 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).

    • Optional foregroundColor?: {
          active?: string;
          inactive?: string;
      }
      • Optional active?: 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).

      • Optional inactive?: 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).

    • Optional icon?: string

      Icon to be placed inside label. Supports SVG or a URL to png or jpeg.

      Example

      // SVG
      mapView.Labels.add(space, space.name, {
          appearance: {
              icon: `<svg>...</svg>`
          },
      });

      Example

      // Image URL
      mapView.Labels.add(space, space.name, {
          appearance: {
              icon: 'https://example.com/icon.png',
          },
      });
    • Optional iconFit?: "contain" | "fill" | "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'
    • Optional iconPadding?: number

      Padding around the icon, in pixels.

      Default

      4
    • Optional iconSize?: number

      Size of bounding box of the icon in pixels

      Default

      10
    • 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. Color can be set using CSS colors names DarkGoldenRod, as Hex strings #0000FF or the rgb values rgb(255,0,0).

    • Optional foregroundColor?: 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).

    • 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

Settings

Member Visibility

Theme