Type alias TFloatingLabelAppearance

TFloatingLabelAppearance: {
    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 floating label looks

Type declaration

  • Optional margin?: number

    Margin around the label and marker. 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

      • 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>`,
      },
      },
      });

      Example

      // Image URL
      mapView.FloatingLabels.add(polygon, "Label", {
      appearance: {
      marker: {
      icon: 'https://example.com/icon.png',
      },
      },
      });
    • 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
      
    • Optional iconSize?: number

      Size of bounding box of the icon

      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

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