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.

Copy
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().