TomTom Maps for JavaScript
    Preparing search index...

    Type Alias CustomLayerHitTest<HIT>

    CustomLayerHitTest: (point: Point2D) => HIT[]

    Tells which of a custom layer's objects lie under a point on the map.

    Type Parameters

    Type Declaration

      • (point: Point2D): HIT[]

      • Parameters

        • point: Point2D

        Returns HIT[]

    • It gets the pointer's position in pixels from the top left of the map, as MapLibre's event.point has it, and returns the objects there, the topmost first, or none.
    • It runs on every pointer move and click while a handler listens to the layer, so keep it quick: project your objects' positions through the camera matrix you drew them with, and compare in pixels.
    • It owns the depth. The SDK knows nothing of what stands in front of your objects, so a screen projection also hits an object behind a 3D building.
    • Its hits rank against the map's other features by the layer stack: a handler on the 3D buildings, which sit above a 'lowest3D' layer, takes the click on a building even where your object stands in front of it.
    const hitTest: CustomLayerHitTest<VehicleHit> = (point) =>
        vehicles
            .filter((vehicle) => distance(project(vehicle), point) < 20)
            .sort((a, b) => depth(a) - depth(b))
            .map((vehicle) => ({ id: vehicle.id, properties: { line: vehicle.line }, vehicle }));

    Settings
    Member Visibility