Type Alias TLabelAppearance

Type declaration

• Optionalmargin?: number

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

  Default

  6
  Copy

• Optionalmarker?: {
      backgroundColor?: { active?: string; inactive?: string };
      foregroundColor?: { active?: string; inactive?: string };
      icon?: string;
      iconFit?: "contain" | "fill" | "cover";
      iconPadding?: number;
      iconSize?: number;
      iconVisibilityThreshold?: number;
  }

  • 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 label. Supports SVG or a URL to png or jpeg.

    Example

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

    Example

    // Image URL
    mapView.Labels.add(space, space.name, {
    	appearance: {
    		icon: 'https://example.com/icon.png',
    	},
    });
    Copy

  • OptionaliconFit?: "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'
    Copy

  • OptionaliconPadding?: number

    Padding around the icon, in pixels.

    Default

    4
    Copy

  • OptionaliconSize?: number

    Size of bounding box of the icon in pixels

    Default

    10
    Copy

  • OptionaliconVisibilityThreshold?: 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

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

  • 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
    Copy

  • 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