Labels

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

Floating Labels

With the Mappedin React Native SDK, automatically label all locations when the map is initialized with Floating Labels. If you want to customize how the labels are displayed, the automatic labeling can be turned off by setting properties of MiMapView.

const options = {
clientId: '<MAPPEDIN_CLIENT_ID>',
clientSecret: '<MAPPEDIN_CLIENT_SECRET>',
venue: 'mappedin-demo-mall',
labelAllLocationsOnInit: false,
}

Floating Labels can be customized if they are created after the MapView initialization (see example below). 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;
};
};
};

More about styling Floating Labels in the Web SDK guide

To label a subset of locations on the map, you could loop through selected locations and label their polygons. The following snippet labels the parking lots of Mappedin demo mall.

const App = () => {
const mapView = React.useRef<MapViewStore>(null);
const [venue, setVenueData] = React.useState<Mappedin>(null);
return (
<SafeAreaView style={{flex: 1}}>
<MiMapView
style={{flex: 1}}
ref={mapView}
options={options}
onDataLoaded={({venueData}) => {
setVenueData(venueData);
}}
onFirstMapLoaded={() => {
const parkingLots = venue.locations.filter(l =>
l.name.startsWith('Parking'),
) as MappedinLocation[];
parkingLots.forEach(l => {
if (l.polygons.length < 1) {
return;
}
mapView.current?.FloatingLabels.add(l.polygons[0], l.name);
});
}}
/>
</SafeAreaView>
);
};

Flat Labels

To use Flat Labels, disable the automatic location labels and use the onFirstMapLoaded -callback and set flatLabels: true. The appearance object is used for styling such as font size, color and scaling.

const App = () => {
const mapView = React.useRef<MapViewStore>(null);
return (
<SafeAreaView style={{flex: 1}}>
<MiMapView
style={{flex: 1}}
ref={mapView}
options={options}
onFirstMapLoaded={() => {
mapView.current?.FlatLabels.labelAllLocations({
appearance: {
color: '#880808',
}
});
}}
/>
</SafeAreaView>
);
};

More about styling Flat Labels in the Web SDK guide

Was this page helpful?

Next Topic

Markers