Floating Labels

In the release of Mappedin React Native SDK v5, Flat Labels and Floating Labels have been separated into their own objects under the MapViewStore. labelAllLocations() has been deprecated and labelPolygon() has been removed.

The Mappedin React Native SDK automatically labels all locations with Floating Labels by default. These labels hover above a node and handle repositioning and rotation to face the camera at all times.

Default Floating Labels

Customizing Appearance

Floating Labels can be customized if they are created after the MapView initialization. We can do this by first setting labelAllLocationsOnInit: false in the MiMapView options prop.

options={{
venue: "<VENUE_SLUG>",
clientId: "<MAPPEDIN_CLIENT_ID>",
clientSecret: "<MAPPEDIN_CLIENT_SECRET>",
labelAllLocationsOnInit: false,
}}

Then, in the onFirstMapLoaded callback we create the labels and supply our appearance object with text size and background and foreground colors. This customization will apply to all labels.

onFirstMapLoaded={() => {
mapView.current?.FloatingLabels.labelAllLocations({
appearance: {
marker: {
size: 16,
},
text: {
size: 16,
foregroundColor: '#ffb702',
backgroundColor: '#0a0a0a',
},
},
});
}}

Customized All Labels

Taking this a step further, we could instead customize only the label of a touched polygon. To do this, use the onClick callback and FloatingLabels.add to pass the appearance object to a single label. When the user touches outside of the polygons, we remove and re-label all locations with default appearance.

onClick={({polygons}) => {
if (polygons.length > 0) {
mapView.current?.FloatingLabels.removeAll();
mapView.current?.FloatingLabels.add(
polygons[0],
polygons[0].locations[0].name,
{
appearance: {
marker: {
size: 16,
},
text: {
size: 32,
foregroundColor: '#ffb702',
backgroundColor: '#0a0a0a',
},
},
},
);
} else {
mapView.current?.FloatingLabels.removeAll();
mapView.current?.FloatingLabels.labelAllLocations();
}
}}

Customized Single Label on Click

The documentation for TFloatingLabelAppearance explains all the customization options such as colors and sizes for the marker and the text.

export type TFloatingLabelAppearance = {
/** Margin around the label and marker. This will affect label density */
margin?: number;
/** Text styling options */
text?: {
/** Number of lines to display when text spans multiple lines */
numLines?: number;
/** Text size in pixels */
size?: number;
/** Maxiumum width of text in pixels */
maxWidth?: number;
/** Line height sets the height of a line box. @default 1.2 */
lineHeight?: number;
foregroundColor?: string;
backgroundColor?: string;
};
/** Floating Label marker styling options */
marker?: {
/** Size of the marker in pixels */
size?: number;
/** Foreground color settings when the markers is active and inactive (outranking markers are shown) */
foregroundColor?: {
active?: string;
inactive?: string;
};
/** Background color settings when the markers is active and inactive (outranking markers are shown) */
backgroundColor?: {
active?: string;
inactive?: string;
};
};
};

Preset Themes

Mappedin Web SDK comes with two preset Floating Label themes:

  • labelThemes.darkOnLight (default)
  • labelThemes.lightOnDark

Use the light on dark labels labels by importing them and setting the appearance when labeling locations.

import { labelThemes } from "@mappedin/mappedin-js";
mapView.FloatingLabels.labelAllLocations({
appearance: labelThemes.lightOnDark,
});

This theme provides a solid starting point for a darker visual style.

Light On Dark

Was this page helpful?

Next Topic

Flat Labels