TomTom Maps for JavaScript
    Preparing search index...

    Type Alias StyleChangeHandler

    Callbacks that respond to map style changes.

    The SDK calls them when the map style changes through TomTomMap.setStyle. Use them to clean up or reinitialize custom map features when the style switches. For example, save and restore custom layers or sources, update UI components for the new style, or clean up resources tied to the previous style. The SDK modules restore or reset themselves in handlers of their own.

    The lifecycle is:

    1. onStyleAboutToChange runs before the new style is applied.
    2. The style changes.
    3. onStyleChanged runs after the new style has fully loaded.
    const styleHandler: StyleChangeHandler = {
      onStyleAboutToChange: () => {
        console.log('Style changing - saving state...');
        // Save custom layer data
      },
      onStyleChanged: () => {
        console.log('Style changed - restoring state...');
        // Restore custom layers
      }
    };

    const unsubscribe = map.addStyleChangeHandler(styleHandler);
    // Call unsubscribe() when the handler's owner is torn down.
    type StyleChangeHandler = {
        onStyleAboutToChange?: (
            context: StyleChangeContext,
        ) => void | Promise<void>;
        onStyleChanged?: (context: StyleChangeContext) => void | Promise<void>;
        priority?: number;
    }
    Index
    onStyleAboutToChange? onStyleChanged? priority?
    onStyleAboutToChange?: (context: StyleChangeContext) => void | Promise<void>

    Called immediately before a style change begins.

    Type Declaration

    Use it to clean up or save state before the current style is removed. It can be synchronous or asynchronous. The SDK awaits it before handing the new style to MapLibre, so nothing of the old style is torn down while it runs. A TomTomMap.setStyle called while it still runs calls it again, before the first call settles.

    onStyleChanged?: (context: StyleChangeContext) => void | Promise<void>

    Called after a new style has fully loaded.

    Type Declaration

    Use it to restore state, reinitialize layers or do other setup that depends on the new style being ready. It can be synchronous or asynchronous. Handlers run one after the other, by StyleChangeHandler.priority, and the promise TomTomMap.setStyle returns resolves only once the last one has finished.

    A switch whose style fails to load runs none for its own style, and the map keeps the style it had: undo what onStyleAboutToChange did from a TomTomMap.addErrorHandler handler. When that style had loaded for a switch the failed one superseded, they run for it instead, with its context.

    priority?: number

    Where this handler runs relative to the others. Lower values run first, and equal values run in registration order. The default 0 is also what the SDK's data and visibility modules use. The custom layers of TomTomMap.addCustomLayer go back at -1, before the modules. The SDK's style knobs land at 90 and the StylingFoundationsModule's raw layer edits at 100, so semantic styling always lands on top of whatever the modules restored.

    0

    Settings
    Member Visibility

    On This Page
    Properties