Styling Smart Labels

Smart labels help reduce the visual stress of a map and with customizable styling, we take it a step further. The text, the marker and the margin of the smart label can be customized in size and color.

This can make a big impact especially when the map is styled from the default light background to a darker look. We also individually label one polygon with different configuration to highlight it.

First we set the background of the map with the mapview settings:

Copy
mapview: {
  antialias: "AUTO",
  mode: Mappedin.modes.TEST,
  backgroundColor: 0x333333,
},
// ...

To display the Smart Labels style shown in the example, we can call labelAllLocations with the following appearance settings.

Copy
Mappedin.initialize(options, div).then(data => {
  data.mapview.labelAllLocations({
    smartLabels: true,
    appearance: {
      text: {
        foregroundColor: "white",
        backgroundColor: "#333",
      },
      marker: {
        foregroundColor: {
          active: "white",
          inactive: undefined,
        },
        backgroundColor: {
          active: "#333",
          inactive: undefined,
        },
      },
  })
})

Smart 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

Copy
export type TSmartLabelAppearance = {
    margin?: number;
    text?: {
        size?: number;
        numLines?: number;
        maxWidth?: number;
        lineHeight?: number;
        foregroundColor?: string;
        backgroundColor?: string;
    };
    marker?: {
        size?: number;
        foregroundColor?: {
            active?: string;
            inactive?: string;
        };
        backgroundColor?: {
            active?: string;
            inactive?: string;
        };
    };
};

Labeling individual locations

It's possible to separately label individual polygons in a different style. This can be useful for highlighting individual polygons.

Copy
const label = mapview.labelPolygon({
    polygon: ms,
    text: "Microsoft",
    shortText: "Microsoft",
    smartLabels: true,
    rank: Mappedin.COLLISION_RANKING_TIERS.HIGH,
    appearance: {
      text: {
        foregroundColor: "blue",
        backgroundColor: "white",
      },
    },
  })

label.enable();