Mappedin Logo

Developer

Mappedin Documentation

Web SDK v4: Floating labels

Web SDK v4: 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. Keep the files from the previous guide and continue by editing the main.js. You might already have the level selector in your main.js as well from the previous guide, but it's not required.

In Mappedin Web SDK version 4, we renamed Smart Labels to Floating labels. We can add the Floating Labels with default styles easily with mapView.labelAllLocations().

We can label an individual location and add a higher rendering priority to it. Add the following to the init function after labeling all locations. First, we get a location by its name and then create attach a label to the first polygon of the location. We then need to enable the label.

const location = venue.locations.find(l => l.name === "Parking Lot B")
console.log(location.polygons)
if (location.polygons[0] !== null) {
const label = mapView.labelPolygon(location.polygons[0], {
text: "Your car",
})
label.enable()
}

However, at this point it might be difficult to find the label because it blends in with the other labels. We have a few options. We could clear all other labels but they might be helpful in orienting the user, so we will add styles to make our new label more visible.

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
export type TFloatingLabelAppearance = {
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;
};
};
};

Let's just add some colors to the text, to help it stand out.

const location = venue.locations.find(l => l.name === "Parking Lot B")
console.log(location.polygons)
if (location.polygons[0] !== null) {
const label = mapView.labelPolygon(location.polygons[0], {
text: "Your car",
appearance: {
text: {
foregroundColor: "#ffb702",
backgroundColor: "#0a0a0a",
},
},
})
label.enable()
}

Result

Search Our Docs

Sign Up

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