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