Skip to content

[fix] vector tile layer - use highlightedFeatureId for hover #3202

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
igorDykhta merged 2 commits into from
Aug 30, 2025
Merged

[fix] vector tile layer - use highlightedFeatureId for hover #3202

Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
18d4da7
[fix] vector tile layer - hover - group adjacent
igorDykhta Aug 30, 2025
429c3cd
smart outline calculation for features that are part of multiple tiles
igorDykhta Aug 30, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
54 changes: 32 additions & 22 deletions src/layers/src/vector-tile/vector-tile-layer.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -73,7 +73,21 @@ export const DEFAULT_HIGHLIGHT_FILL_COLOR = [252, 242, 26, 150];
export const DEFAULT_HIGHLIGHT_STROKE_COLOR = [252, 242, 26, 255];
export const MAX_CACHE_SIZE_MOBILE = 1; // Minimize caching, visible tiles will always be loaded
export const DEFAULT_STROKE_WIDTH = 1;

export const UUID_CANDIDATES = [
'ufid',
'UFID',
'id',
'ID',
'fid',
'FID',
'objectid',
'OBJECTID',
'gid',
'GID',
'feature_id',
'FEATURE_ID',
'_id'
];
Comment thread
igorDykhta marked this conversation as resolved.
/**
* Type for transformRequest returned parameters.
*/
Expand Down Expand Up @@ -538,6 +552,20 @@ export default class VectorTileLayer extends AbstractTileLayer<VectorTile, Featu
if (data.tileSource) {
const hoveredObject = this.hasHoveredObject(objectHovered);

// Try to infer a stable unique id property from the hovered feature so we can
// highlight the same feature across adjacent tiles. If none is found, rely on
// feature.id when available.
let uniqueIdProperty: string | undefined;
let highlightedFeatureId: string | number | undefined;
if (hoveredObject && hoveredObject.properties) {
uniqueIdProperty = UUID_CANDIDATES.find(
k => hoveredObject.properties && k in hoveredObject.properties
);
highlightedFeatureId = uniqueIdProperty
? hoveredObject.properties[uniqueIdProperty]
: (hoveredObject as any).id;
Comment thread
igorDykhta marked this conversation as resolved.
}

const layers = [
new CustomMVTLayer({
...defaultLayerProps,
Expand All @@ -556,7 +584,8 @@ export default class VectorTileLayer extends AbstractTileLayer<VectorTile, Featu
stroked: visConfig.stroked,

// TODO: this is hard coded, design a UI to allow user assigned unique property id
// uniqueIdProperty: 'ufid',
uniqueIdProperty,
highlightedFeatureId,
renderSubLayers: this.renderSubLayers,
// when radiusUnits is meter
getPointRadiusScaleByZoom: getPropertyByZoom(visConfig.radiusByZoom, visConfig.radius),
Expand Down Expand Up @@ -634,26 +663,7 @@ export default class VectorTileLayer extends AbstractTileLayer<VectorTile, Featu
loadOptions: {
mvt: getLoaderOptions().mvt
}
}),
// hover layer
...(hoveredObject
? [
new GeoJsonLayer({
// @ts-expect-error props not typed?
...objectHovered.sourceLayer?.props,
...(this.getDefaultHoverLayerProps() as any),
visible: true,
wrapLongitude: false,
data: [hoveredObject],
getLineColor: DEFAULT_HIGHLIGHT_STROKE_COLOR,
getFillColor: DEFAULT_HIGHLIGHT_FILL_COLOR,
getLineWidth: visConfig.strokeWidth + 1,
lineWidthUnits: 'pixels',
stroked: true,
filled: true
})
]
: [])
})
// ...tileLayerBoundsLayer(defaultLayerProps.id, data),
];

Expand Down