Flat Labels

In Mappedin JS version 4, we brought back official support to what used to be called Legacy Labels and renamed them more descriptively to Flat Labels. We can add the Flat labels with default styles easily with mapView.labelAllLocations({flatLabels: true}).

Styling Flat labels

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

• Height is the upper bounds of the Polygon by default. If you don't have a Polygon, or want a custom height for some reason, you can set this.
• 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". You can specify your own font via @font-face rule with a font family, and then include that here.
• scaleMin sets the the minimum percentage we can 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 we don't end up with too many different font sizes on screen at once. If you are only labeling a few Polygons rather than everything, you can set this and and scaleMin to 0.1 to fit everything except really long names perfectly. The default value is 0.25

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

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

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