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 andlabelPolygon()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.
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', }, }, });}}
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(); }}}
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.
