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.FloatingLabels.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:

• 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
mapView.FloatingLabels.add(polygons[0], location.name, {
    appearance: {
        marker: {
        size: 20,
    },
    text: {
        size: 32,
        foregroundColor: "#ffb702",
        backgroundColor: "#0a0a0a",
    },
},

Labels can be removed individually or all at once with mapView.FloatingLabels.removeAll().

Preset themes

Mappedin Web SDK comes with two preset Floating Label themes. labelThemes.darkOnLight is rendered by default. However, darker page themes might sometimes be preferable and the darker labels might look better. Use the dark mode themed labels by importing them and setting the appearance when labeling locations.

Copy
import { labelThemes } from "@mappedin/mappedin-js";

mapView.FloatingLabels.labelAllLocations({
  appearance: labelThemes.lightOnDark
});

The appearance settings can be overriden but this theme provides a solid starting point for a darker visual style.