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 12font
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" },})