Interactions

autk-map exposes three complementary interaction mechanisms. They share the same render-info flags and the same event bus, so they can be combined in any order:

1. Picking — pointer-driven selection that emits events through map.events.on().
2. Programmatic highlight and skip — direct control over which components stand out or are hidden, useful for cross-view coordination.
3. Layer visibility — show, hide, or fully remove an entire layer.

All examples below use projected Mercator data already prepared for the docs site, so each section focuses on a single interaction concern.

Picking

Enable picking on a layer with isPick and subscribe to MapEvent.PICKING through map.events.on(). The handler receives the picking payload for the current frame. Click on a feature to see the payload appear in the console.

Field	Description
layerId	The layer that produced the event. Layers without isPick: true never emit.
selection	Selected component ids in that layer. An empty array means the user clicked outside any pickable feature.

TIP

Picking works on the rendered geometry. For 3D buildings, picking hits the building footprint or its extruded surface depending on the layer type.

Highlight and skip

Besides pointer picking, autk-map lets you control the visible selection directly. This is the main hook for cross-view coordination: a chart, a filter, or any external state can push which components should stand out or be hidden.

• setHighlightedIds() emphasizes specific components while keeping them visible.
• setSkippedIds() hides specific components without removing the whole layer.
• clearHighlightedIds() and clearSkippedIds() reset those states.

Layer visibility

For layer-level visibility, use updateRenderInfo() with isSkip. To fully detach a layer from the map, call removeLayer(). The latter also frees its GPU resources.