The type of the top feature being interacted with
The event's primary target feature, positioned on top of any overlapping features.
The geographic coordinates where the event occurred
The features at the event coordinates, scoped to the module whose handler fired and de-duplicated, so a feature drawn across several layers or tiles appears once. From GeoJSON-backed modules (places, routes, geometries), entries are the original typed Feature you passed to show(), with un-stringified properties (nested objects, Dates, arrays). From vector-tile modules (POIs, traffic), entries are the underlying MapGeoJSONFeature, which extends Feature. The first entry is the same feature as topFeature, though for modules with a mapping callback, topFeature is the mapped shape while this entry stays raw. To inspect every feature at the point across all modules, including the base map with .source/.layer intact, query MapLibre directly. Note that lngLat is geographic, so project it to a pixel first: const p = map.mapLibreMap.project(lngLat); const all = map.mapLibreMap.queryRenderedFeatures([[p.x - 5, p.y + 5], [p.x + 5, p.y - 5]]);
The source and layer configuration to which the topFeature belongs
The SDK calls it when a user interacts with features on the map, for example on click or hover. It receives the feature, the event location and all features at the event coordinates.
In GeoJSON modules (places, routes, geometries), topFeature is the original feature you passed
to show(). In vector tile modules (POIs, traffic), topFeature comes from MapLibre's internal
feature representation.
Depending on MapEventsConfig.precisionMode, the lngLat coordinates may be near the feature
rather than exactly on it.
Click handler for route features:
routingModule.events.mainLines.on('click', (route, lngLat, allFeatures, source) => {
console.log('Clicked route:', route.properties.index);
console.log('At coordinates:', lngLat);
console.log('Total features at location:', allFeatures.length);
});
Hover handler for places with feature inspection:
placesModule.events.on('hover', (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`);
}
});
UserEvents.on - For registering event handlers
Handler function for user interaction events on map features.