Class Labels

Labels in Mappedin JS

Labels are text elements anchored to map objects that automatically rotate, show/hide based on priority and zoom level, and manage collisions with other labels. They're perfect for displaying location names, points of interest, and contextual information.

Features

  • Automatic collision management and visibility ranking
  • Customizable appearance (color, font, background, etc.)
  • Support for interactivity (click, hover)
  • Automatic rotation and positioning
  • Batch operations for adding all labels at once

Best Practice: Use the rank option to control label visibility priority. Use interactive: true to enable click/hover events for important labels.

Example Usage

// Add a single label
mapView.Labels.add(space, 'Welcome', { appearance: { color: 'blue' } });

// Add a label with high priority
mapView.Labels.add(space, 'Main Entrance', { rank: 'always-visible' });

// Add all labels automatically (experimental)
mapView.Labels.__EXPERIMENTAL__all();

// Remove a specific label
mapView.Labels.remove(label);

// Remove all labels
mapView.Labels.removeAll();

Advanced

  • Use appearance to customize colors, fonts, and backgrounds.
  • Use rank to control collision priority ('low', 'medium', 'high', 'always-visible').
  • Use __EXPERIMENTAL__all() to automatically add labels for all map objects with predefined text (experimental feature).

More Information

This class is accessed using MapView.Labels.

Methods

__EXPERIMENTAL__all add getAll remove removeAll

Methods

__EXPERIMENTAL__all

  • __EXPERIMENTAL__all(options?: TAddLabelOptions): Label[]
    Experimental

    Parameters

    Returns Label[]

    An array of all created Label instances.

    Warning

    EXPERIMENTAL FEATURE UNDER CONSTRUCTION

    This is an experimental feature that may undergo significant changes, including breaking changes, renaming, or complete removal in future versions. Do not rely on this API in production environments.

    Automatically adds all the labels (Label) to the map.

    The text, appearance, priority, etc. of the labels will be automatically determined based on the external data from the map.

    Example: Add all labels with default settings

    const labels = mapView.Labels.__EXPERIMENTAL__all();

    Example: Add all labels with custom appearance

    const labels = mapView.Labels.__EXPERIMENTAL__all({
      appearance: { color: 'darkblue' },
      rank: 'high'
    });

add

  • add(target: IAnchorable, text: string, options?: TAddLabelOptions): Label

    Adds a label (Label) to the map.

    Parameters

    Returns Label

    The created label, or undefined if creation failed.

    Example: Add a simple label

    mapView.Labels.add(space, 'Welcome', { appearance: { color: 'blue' } });

    Example: Add a high-priority interactive label

    mapView.Labels.add(space, 'Main Entrance', {
      rank: 'always-visible',
      interactive: true,
      appearance: {
        color: 'red',
        backgroundColor: 'white',
        fontSize: 14
      }
    });

    See

    Labels Guide

getAll

remove

  • remove(label: Label): void

    Removes a label (Label) from the map.

    Parameters

    • label: Label

      The label which should be removed.

    Returns void

    Example

    mapView.Labels.remove(label);

removeAll

  • removeAll(): Label[]

    Removes all the labels (Label) from the map.

    Returns Label[]

    An array of all removed Label instances.

    Example

    const removedLabels = mapView.Labels.removeAll();

Settings

Member Visibility

On This Page

Labels in Mappedin JS
Methods