diff --git a/apps/fishing-map/features/map/map-interactions.hooks.ts b/apps/fishing-map/features/map/map-interactions.hooks.ts index 59670fa046..377c1d4890 100644 --- a/apps/fishing-map/features/map/map-interactions.hooks.ts +++ b/apps/fishing-map/features/map/map-interactions.hooks.ts @@ -18,6 +18,7 @@ import { DeckLayerInteractionPickingInfo, DeckLayerPickingObject, FourwingsHeatmapPickingObject, + FOURWINGS_MAX_ZOOM, } from '@globalfishingwatch/deck-layers' import { trackEvent } from 'features/app/analytics.hooks' import { useMapDrawConnect } from 'features/map/map-draw.hooks' @@ -141,7 +142,7 @@ export const useClickedEventConnect = () => { if (clusterFeature?.properties?.count > 2) { const { expansionZoom } = clusterFeature const { expansionZoom: legacyExpansionZoom } = clusterFeature.properties as any - const expansionZoomValue = expansionZoom || legacyExpansionZoom + const expansionZoomValue = expansionZoom || legacyExpansionZoom || FOURWINGS_MAX_ZOOM if (!areTilesClusterLoading && expansionZoomValue) { setMapCoordinates({ latitude: event.latitude, diff --git a/libs/deck-layers/src/layers/fourwings/clusters/FourwingsClustersLayer.ts b/libs/deck-layers/src/layers/fourwings/clusters/FourwingsClustersLayer.ts index cf1dcc7c54..346427246e 100644 --- a/libs/deck-layers/src/layers/fourwings/clusters/FourwingsClustersLayer.ts +++ b/libs/deck-layers/src/layers/fourwings/clusters/FourwingsClustersLayer.ts @@ -9,6 +9,7 @@ import { FilterContext, } from '@deck.gl/core' import { TileLayer, TileLayerProps } from '@deck.gl/geo-layers' +import { CollisionFilterExtension } from '@deck.gl/extensions' import { GeoBoundingBox, Tile2DHeader, TileLoadProps } from '@deck.gl/geo-layers/dist/tileset-2d' import { IconLayer, ScatterplotLayer, TextLayer } from '@deck.gl/layers' import Supercluster from 'supercluster' @@ -330,6 +331,21 @@ export class FourwingsClustersLayer extends CompositeLayer< renderSubLayers: () => null, getTileData: this._getTileData, }), + new IconLayer({ + id: `${this.props.id}-${POINTS_LAYER_ID}-icons`, + data: points, + getPosition: this._getPosition, + getColor: hexToDeckColor(color), + getSize: ICON_SIZE, + sizeUnits: 'pixels', + iconAtlas: `${PATH_BASENAME}/events-sprite.png`, + iconMapping: ICON_MAPPING, + //TODO remove fixed value + // getIcon: () => this.props.eventType + getIcon: () => 'encounter', + getPolygonOffset: (params: any) => getLayerGroupOffset(LayerGroup.Cluster, params), + pickable: true, + }), new ScatterplotLayer({ id: `${this.props.id}-${CLUSTER_LAYER_ID}`, data: clusters, @@ -358,21 +374,10 @@ export class FourwingsClustersLayer extends CompositeLayer< sizeUnits: 'pixels', getTextAnchor: 'middle', getAlignmentBaseline: 'center', - }), - new IconLayer({ - id: `${this.props.id}-${POINTS_LAYER_ID}-icons`, - data: points, - getPosition: this._getPosition, - getColor: hexToDeckColor(color), - getSize: ICON_SIZE, - sizeUnits: 'pixels', - iconAtlas: `${PATH_BASENAME}/events-sprite.png`, - iconMapping: ICON_MAPPING, - //TODO remove fixed value - // getIcon: () => this.props.eventType - getIcon: () => 'encounter', - getPolygonOffset: (params: any) => getLayerGroupOffset(LayerGroup.Cluster, params), - pickable: true, + extensions: [new CollisionFilterExtension()], + collisionTestProps: { sizeScale: 3 }, + getCollisionPriority: (d: any) => parseInt(d.properties.count || 0), + collisionGroup: 'text', }), ] }