Mappedin Logo

Developer

Mappedin Documentation

Web SDK: Styling Smart Labels

Web SDK: 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.

Source code for the interactive example below

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

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.

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

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

Search Our Docs

Sign Up

© 2020 Copyright Mappedin, All Rights Reserved. View our Privacy Policy