Type Alias LabelAppearance

LabelAppearance: Partial<z.input<typeof labelAppearanceSchemaBase>> & {
    iconScale?: number | Interpolation<"zoom-level", number[]>;
}

Options to control how a label is rendered.

Option Type Description Default
margin number Margin around the label text and pin in pixels. This will affect label density. Minimum is 6px. 6
maxLines number Number of lines to display when text spans multiple lines. 2
textSize number Text size in pixels 11.5
maxWidth number Maximum width of text in pixels. 150
lineHeight number Line height sets the height of a line box. It's commonly used to set the distance between lines of text. 1.2
color string A color string for the label text and pin. #333
outlineColor string A color string for the outline around the label text and pin. white
textColor string A color string representing just the text color. Defaults to the same as color. -
textOutlineColor string A color string representing just the text outline. Defaults to the same as outlineColor. -
pinColor string A color string representing just the pin color. Defaults to the same as color. -
pinOutlineColor string A color string representing just the pin outline. Defaults to the same as outlineColor. -
pinColorInactive string A color string representing just the pin color when the label is inactive. Defaults to the same as pinColor. -
pinOutlineColorInactive string A color string representing just the pin outline when the label is inactive. Defaults to the same as pinOutlineColor. -
icon string An icon to be placed inside the label pin. Can be an SVG string or a path to a PNG or JPEG. -
iconSize number Size of the icon in pixels. Requires icon to be set. 20
iconScale number | Interpolation Scale the icon uniformly. Specify a number or an Interpolation object. 1
iconPadding number Padding between the icon and the pin's border in pixels. 2
iconFit 'fill' | 'contain' | 'cover' How the icon should fit inside the pin. Options: fill (stretch to fill), cover (maintain aspect ratio and fill), contain (maintain aspect ratio and fit inside). cover
iconOverflow 'visible' | 'hidden' Whether the icon should overflow the circle of the pin. hidden
iconVisible boolean | number Controls icon visibility. If boolean, directly shows/hides the icon. If number, defines the zoom level at which the icon becomes visible. true
opacity number The opacity of the Label when it is enabled and visible. 1

Example: Render a label with an SVG icon

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

Example: Render a label with an image icon

mapView.Labels.add(space, "Label", {
	appearance: {
		icon: 'https://example.com/icon.png',
	},
});

Example: Scale a label's icon with zoom level

mapView.Labels.add(space, "Label", {
	appearance: {
		iconScale: {
			on: 'zoom-level',
			input: [19, 22],
			output: [1, 3],
		},
	},
});

Settings

Member Visibility