Floating Labels

Map geometry alone is not enough to have a sense of a location. Let's add labels to name the stores and other points-of-interest in the Mappedin Demo Mall. We can add the Floating Labels with default styles easily with mapView.labelAllLocations().

However, this sample CodeSandbox does a bit more than just render the labels in the beginning. Try clicking on a polygon to see a styled label and outside of interactive polygons to reset the labels.

Floating Label styling options

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

  • Margin in pixels around the label and marker. This will affect label density

Text styles:

  • Text size in pixels
  • If the text spans multiple lines, this sets the maximum number of lines to display
  • Maximum width of text in pixels
  • Line height sets the height of a text line box, by default it is set to 1.2
  • Text has a foreground and background colors that can be set like CSS colors #333 as Hex string or the CSS name of a color such as crimson

Marker styles:

  • Size of the marker in pixels
  • The marker takes both active and inactive variants of its foreground and background colors

The label created by clicking on a polygon is styled to have a larger marker and larger, more colorful text.

const label = mapView.labelPolygon(polygon, {
text: location.name,
appearance: {
marker: {
size: 20
},
text: {
size: 32,
foregroundColor: "#ffb702",
backgroundColor: "#0a0a0a"
}
}
});
label.enable();

The label needs to be explicitly enabled after creation with label.enable(). Labels can be removed individually or all at once with mapView.removeAllLabels().

Was this page helpful?

Next Topic

Flat Labels