Type alias TFloatingLabelAppearance

Type declaration

• Optional margin?: number

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

  Default

  6
  Copy

• Optional marker?: {
      backgroundColor?: {
          active?: string;
          inactive?: string;
      };
      foregroundColor?: {
          active?: string;
          inactive?: string;
      };
      icon?: string;
      iconFit?: "contain" | "fill" | "cover";
      iconPadding?: number;
      iconScaleInterpolation?: boolean;
      iconSize?: number;
      iconVisibilityThreshold?: number;
      size?: number;
  }

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

    • Optional active?: string

      Background color of the marker when it is active

    • Optional inactive?: string

      Background color of the marker 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 when it is active

    • Optional inactive?: string

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

  • Optional icon?: 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>`,
            },
        },
    });
    Copy

    Example

    // Image URL
    mapView.FloatingLabels.add(polygon, "Label", {
        appearance: {
            marker: {
                icon: 'https://example.com/icon.png',
            },
        },
    });
    Copy

  • Optional iconFit?: "contain" | "fill" | "cover"

    How the icon should fit inside the marker. By default, this is not set and the icon will be centered 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.

  • Optional iconPadding?: number

    Padding around the icon, in pixels.

    Default

    4
    Copy

  • Optional iconScaleInterpolation?: boolean

    Whether the icon should scale with the zoom level

  • Optional iconSize?: number

    Size of bounding box of the icon

    Default

    10
    Copy

  • 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

  • Optional foregroundColor?: string

    Text foreground color

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

  • 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