Location Labels Missing After Upgrading to MappedinSDK v6

[shlomomdahan]

After upgrading from Mappedin React Native SDK v5 to v6 (6.5.0), we’ve noticed that many location labels are no longer appearing on the map.

In v5, we used the FloatingLabels API to display all location labels:

await mapView.current?.FloatingLabels.labelAllLocations();

This worked reliably and showed labels for all locations that had been configured in our map data. Following the migration guide, we updated to use the new Labels API:

mapView.Labels.__EXPERIMENTAL__all();

After this migration, many location labels are now missing from the map. Only a subset of locations display their labels, while others that were previously visible in v5 no longer appear.

1. Is there a known difference in behavior between FloatingLabels.labelAllLocations() in v5 and Labels.__EXPERIMENTAL__all() in v6?
2. Are there specific criteria (priority, zoom level, collision detection) that determine which labels are displayed with the new API?
3. Is there a recommended stable approach for displaying all location labels in v6, or should we manually iterate through spaces and add labels using Labels.add()?

Thanks

[msohm]

Can you give examples of labels that are missing?

The Labels.all() method is still incomplete and being worked on, which is why it is prefixed with __EXPERIMENTAL__. Let me know what you aren’t seeing and I can check on the status of those types of labels.

Also note that labels will show and hide themselves depending on the zoom level and how much space is available (i.e. overlapping labels are hidden at higher zoom levels).

As you mention, an alternative approach is to loop through all locations and/or spaces and add labels using Labels.all() or by using the Label component.

[shlomomdahan]

I just noticed something that might explain what’s going on. The labels do show up when they’re on the edge of the camera view (like Ulta Beauty - img below), but as soon as you pan the camera toward them or over them, they disappear. So this might be part of the issue we’re seeing.

[msohm]

Do they appear when you zoom into that area? Are there other labels in that area too? Please post a screen shot of ULTA BEAUTY zoomed in. Thanks!

[shlomomdahan]

I was able to fix this with a workaround. I think the issue was that the labels were being added irrespective to selected floor using the experimental add all.

However, it seems like a significant step backwards to have to do something like the below to get this working correctly.

const useFloorLabels = () => {
  const { mapView, mapData } = useMap();

  const showLabelsForCurrentFloor = useCallback(async () => {
    const currentFloor = mapView.currentFloor;
    mapView.Labels?.removeAll?.();

    const allEnterpriseLocations = mapData.getByType?.('enterprise-location') || [];

    for (const enterpriseLocation of allEnterpriseLocations) {
      const floorSpace = enterpriseLocation.spaces
        .map(space => typeof space === 'string' 
          ? mapData.getById?.('space', space) 
          : space)
        .find(space => {
          const spaceFloor = space?.map || space?.floor;
          return spaceFloor?.id === currentFloor.id;
        });

      if (floorSpace && enterpriseLocation.name) {
        mapView.Labels?.add?.(floorSpace, enterpriseLocation.name, {
          interactive: true
        });
      }
    }
  }, [mapView, mapData]);

  return { showLabelsForCurrentFloor };
};

whereas in v5 it was simply

await mapView.current?.FloatingLabels.labelAllLocations();

Similarly, when trying to handle map clicks and extract location data from the click we previously could simply do:

locationName = polygons[0].locations[0].name;
mappedinLocationId = polygons[0].locations[0].id;

to access location info since the click event contained those polygons/locations.

Now, we need to loop through all enterprise locations and see if the space id included in the new click event payload is within the spaces array of a certain enterprise location. It’s very verbose and doesn’t seem to work well at all using this approach as some clicks fail to link up to the correct location.

useMapViewEvent(‘click’, async (payload) => {
const position = {latitude: payload.coordinate.latitude,
                  longitude: payload.coordinate.longitude
                  };


let location = null;
if (payload.spaces?.length > 0) {
   const clickedSpace = payload.spaces[0];
   const allEnterpriseLocations = mapData.getByType(‘enterprise-location’);

// Loop through ALL locations to find which contains this space
for (const enterpriseLocation of allEnterpriseLocations) {
  const hasSpace = enterpriseLocation.spaces.some(space =>
    (typeof space === 'string' ? space : space.id) === clickedSpace.id
  );
  if (hasSpace) {
    location = enterpriseLocation;
    break;
  }
}

Are there plans to streamline these APIs or return to patterns from v5?

Thanks

[msohm]

Using mapView.__EXPERIMENTAL__auto(); should only show labels for the current floor, were you seeing otherwise? How are you changing floors?

Here are a couple of examples that handle building changes and use mapView.__EXPERIMENTAL__auto();

• Building & Floor Selection
• Dynamic Focus

Please compare what you are doing with these and let me know what scenario reproduces it if you can.

That is good feedback regarding the lack of aSpace.enterpriseLocations when we do have a Space.locationProfiles class for non enterprise locations. I will take this back to our SDK team, adding that would make this much easier to use. Thanks for the feedback!

[shlomomdahan]

mapView.__EXPERIMENTAL__auto(); worked correctly.

I was previous using mapView.Labels.__EXPERIMENTAL__all(); which didn’t work correctly.

Thank you

[shlomomdahan]

We also noticed that a few labels on the map show up in purple and appear larger than the others. Is there any logic behind which locations get styled that way? And can that be turned off?

Thanks

[msohm]

The different label sizes are from Mappedin JS trying to fit labels on the screen without overlapping. When using MapView.__EXPERIMENTAL_auto() there isn’t a way to customize the look or priority of a label.

However, this can be done when adding labels to the map individually using Labels.add(). The add method lets you set a priority (the weight that determines which are shown vs hidden when overlapping), zoom level they expand and contract at and their full look and feel. TAddLabelOptions has the general options and LabelAppearance the options for look and feel.

You can find out more in our Labels Guide.

[shlomomdahan]

Is that also the case for those much larger ones in purple?

[msohm]

Are you adding Labels or were these all added using the auto method?

Without an icon Labels are default size with 8px padding, if the icon is an SVG (all the ones used by auto) it’s 30px with 10px padding, if it’s an uploaded image its 48px with 2px padding.