TomTom Maps for JavaScript
    Preparing search index...

    Type Alias UserEventHandler<T>

    UserEventHandler: (
        topFeature: T,
        lngLat: LngLat,
        allEventFeatures: MapGeoJSONFeature[],
        sourceWithLayers: SourceWithLayers,
    ) => void

    Handler function for user interaction events on map features.

    Type Parameters

    • T

      The type of the top feature being interacted with

    Type Declaration

      • (
            topFeature: T,
            lngLat: LngLat,
            allEventFeatures: MapGeoJSONFeature[],
            sourceWithLayers: SourceWithLayers,
        ): void
      • Parameters

        • topFeature: T

          The primary target feature for the event, positioned on top of any overlapping features

        • lngLat: LngLat

          The geographic coordinates where the event occurred

        • allEventFeatures: MapGeoJSONFeature[]

          All features matching the event coordinates across all map modules, as raw MapLibre GeoJSON features. The first feature corresponds to topFeature

        • sourceWithLayers: SourceWithLayers

          The source and layer configuration to which the topFeature belongs

        Returns void

    Called when a user interacts with features on the map (e.g., click, hover). Provides detailed information about the interacted feature, its location, and all features at the event coordinates.

    Feature Type Mapping:

    • GeoJSON modules (places, routes, geometries): topFeature is the original feature passed to the show() method
    • Vector tile modules (POIs, traffic): topFeature is derived from MapLibre's internal feature representation

    Event Precision:

    • The lngLat coordinates may be near but not exactly on the feature, depending on the precision mode
    • The precision behavior is controlled by MapEventsConfig.precisionMode

    Click handler for route features:

    routingModule.on('click', (route, lngLat, allFeatures, source) => {
    console.log('Clicked route:', route.properties.id);
    console.log('At coordinates:', lngLat);
    console.log('Total features at location:', allFeatures.length);
    });

    Hover handler for places with feature inspection:

    placesModule.on('mousemove', (place, lngLat, allFeatures, source) => {
    // Show tooltip with place information
    showTooltip({
    title: place.properties.poi?.name,
    address: place.properties.address.freeformAddress,
    coordinates: lngLat
    });

    // Check for overlapping features
    if (allFeatures.length > 1) {
    console.log(`${allFeatures.length} features at this location`);
    }
    });

    EventsModule.on - For registering event handlers