Flat Labels

A secondary method to label locations is to use Flat Labels. We can add the Flat labels with default styles easily using mapView.FlatLabels.labelAllLocations().

Styling Options

The following type declaration of appearance object describes the customizable attributes of Flat labels.

type TFlatLabelAppearance = {
	height?: number;
	margin?: number;
	color?: string;
	fontSize?: number;
	font?: string;
	scaleMin?: number;
	scaleStep?: number;
};

• height is the upper bounds of the Polygon by default. Height can be set if not using a Polygon or a custom height is desired.
• margin is the amount of space to leave before starting the text from the edge of the bound of the canvas bound. These bounds are set in the Mappedin CMS. The default value is 5 pixels.
• color is a string format of a hexadecimal color representation such as #ff00000 for red.
• fontSize in pixels, by default 12
• font can be set as a CSS style string font. ie "sans-serif". Specify a font via @font-face rule with a font family, and then include that here.
• scaleMin sets the minimum percentage to shrink the label to if it won't fit within the bounds at 100%. If it doesn't fit at that level, it won't be created.
• scaleStep describes how much to decrement the scale each time it doesn't fit, so the map doesn't end up with too many different font sizes on screen at once. If only labelling a few Polygons rather than everything, set this and scaleMin to 0.1 to attempt to fit all text. The default value is 0.25.

Adding the appearance settings in our labelAllLocations function call, we can easily change the font, text color and increase the size to fit our brand style better.

mapView.FlatLabels.labelAllLocations({
	appearance: {
		font: 'Georgia',
		fontSize: 16,
		color: '#1c1c43',
	},
});