Mappedin Logo

Developer

Mappedin Documentation

React Native SDK: Labels

React Native SDK: Labels

Floating Labels

Mappedin React Native SDK, automatically labels 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 props of MiMapView.

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

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 mapView = React.useRef<MapViewStore>(null);
return (
<MiMapView
options={{
ref={mapView}
clientId: '<MAPPEDIN_CLIENT_ID>',
clientSecret: '<MAPPEDIN_CLIENT_SECRET>',
venue: 'mappedin-demo-mall',
labelAllLocationsOnInit: false,
}}
onFirstMapLoaded={() => {
mapView.current?.labelAllLocations({
flatLabels: true,
appearance: {
color: '#00cc00',
}
});
}}
/>
)

More about styling Flat Labels in the Web SDK guide

Search Our Docs

Sign Up

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