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 source that drew topFeature.
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 feature as the module shows
it, with its dates and nested objects intact, but not the object 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. In a drag event, topFeature and allEventFeatures are the ones
pressed at dragstart, and lngLat is where the pointer is now.
allEventFeatures holds the features at the event coordinates from the source that drew
topFeature, such as a route's waypoints but not its lines, each once even when
drawn across several layers or tiles, in the same shape as topFeature, which is the first.
A handler registered through where() gets only the ones in its scope: on its layers, and taken
by its predicate. To inspect every feature there across all modules, including the base map, project lngLat to
a pixel and call map.mapLibreMap.queryRenderedFeatures around 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.places.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.