TomTom Maps SDK for JavaScript
This is the documentation of version 1.0.0-rc.3. Go to the latest version, 1.0.0-rc.5.
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, reinitialize map modules, update UI components for the new style, or clean up resources tied to the previous style.

    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.

    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.

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