diff --git a/website/src/lib/components/map/map-layer-event-manager.ts b/website/src/lib/components/map/map-layer-event-manager.ts index 29412098c..b87a43874 100644 --- a/website/src/lib/components/map/map-layer-event-manager.ts +++ b/website/src/lib/components/map/map-layer-event-manager.ts @@ -142,9 +142,9 @@ export class MapLayerEventManager { } private _handleMouseMove(e: maplibregl.MapMouseEvent) { - const layerIds = this._filterLayersContainingCoordinate( + const layerIds = this._filterLayersIntersectingBounds( Object.keys(this._listeners), - e.lngLat + this._getBounds(e.point) ); const features = layerIds.length > 0 @@ -228,11 +228,11 @@ export class MapLayerEventManager { } private _handleTouchStart(e: maplibregl.MapTouchEvent) { - const layerIds = this._filterLayersContainingCoordinate( + const layerIds = this._filterLayersIntersectingBounds( Object.keys(this._listeners).filter( (layerId) => this._listeners[layerId].touchstarts.length > 0 ), - e.lngLat + this._getBounds(e.point) ); if (layerIds.length === 0) return; const features = this._map.queryRenderedFeatures(e.points[0], { layers: layerIds }); @@ -258,17 +258,28 @@ export class MapLayerEventManager { }); } - private _filterLayersContainingCoordinate( + private _getBounds(point: maplibregl.Point) { + const delta = 30; + return new maplibregl.LngLatBounds( + this._map.unproject([point.x - delta, point.y + delta]), + this._map.unproject([point.x + delta, point.y - delta]) + ); + } + + private _filterLayersIntersectingBounds( layerIds: string[], - lngLat: maplibregl.LngLat + bounds: maplibregl.LngLatBounds ): string[] { let result = layerIds.filter((layerId) => { if (!this._map.getLayer(layerId)) return false; const fileId = layerId.replace('-waypoints', ''); if (fileId === layerId) { - return fileStateCollection.getStatistics(fileId)?.inBBox(lngLat) ?? true; + return fileStateCollection.getStatistics(fileId)?.intersectsBBox(bounds) ?? true; } else { - return fileStateCollection.getStatistics(fileId)?.inWaypointBBox(lngLat) ?? true; + return ( + fileStateCollection.getStatistics(fileId)?.intersectsWaypointBBox(bounds) ?? + true + ); } }); return result; diff --git a/website/src/lib/logic/statistics-tree.ts b/website/src/lib/logic/statistics-tree.ts index 972491192..38d6a6a0c 100644 --- a/website/src/lib/logic/statistics-tree.ts +++ b/website/src/lib/logic/statistics-tree.ts @@ -49,7 +49,7 @@ export class GPXStatisticsTree { return statistics; } - inBBox(coordinates: { lat: number; lng: number }): boolean { + intersectsBBox(bounds: maplibregl.LngLatBounds): boolean { for (let key in this.statistics) { const stats = this.statistics[key]; if (stats instanceof GPXStatistics) { @@ -57,18 +57,18 @@ export class GPXStatisticsTree { stats.global.bounds.southWest, stats.global.bounds.northEast ); - if (!bbox.isEmpty() && bbox.contains(coordinates)) { + if (!bbox.isEmpty() && bbox.intersects(bounds)) { return true; } - } else if (stats.inBBox(coordinates)) { + } else if (stats.intersectsBBox(bounds)) { return true; } } return false; } - inWaypointBBox(coordinates: { lat: number; lng: number }): boolean { - return !this.wptBounds.isEmpty() && this.wptBounds.contains(coordinates); + intersectsWaypointBBox(bounds: maplibregl.LngLatBounds): boolean { + return !this.wptBounds.isEmpty() && this.wptBounds.intersects(bounds); } } export type GPXFileWithStatistics = { file: GPXFile; statistics: GPXStatisticsTree };