visgl / visgl/deck.gl

[Bug] MVTLayer autohighlight stays highlighted when cursor leaves canvas

Open
#9,667 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

bug
Dominant language
TypeScript
Stars
14.6k
Forks
2.3k
Avg merge
2d 9h
Merged PRs (30d)
42

Description

Description

Thanks for the great library! I am not sure if this is a bug or a feature request. Apologies.

When using MVTLayer from @deck.gl/geo-layers with autoHighlight: true, the last hovered feature remains visibly highlighted after the user’s mouse leaves the map area.
The last feature under the mouse remains highlighted indefinitely until the mouse re-enters the map and hovers over a new feature.

Flavors
  • Script tag
  • React
  • Python/Jupyter notebook
  • MapboxOverlay
  • GoogleMapsOverlay
  • CARTO
  • ArcGIS
Expected Behavior

When the cursor exits the map viewport, the highlight should disappear (i.e., the hoveredFeatureId should be unset or reset).

Steps to Reproduce
Image
  1. Set up a Google Maps integration using @deck.gl/google-maps with a GoogleMapsOverlay and render a MVTLayer with the above configuration.
  2. Hover over a feature (e.g., a polygon) in the MVTLayer. The feature is correctly highlighted.
  3. Move the mouse cursor out of the map container (e.g., to a sidebar, toolbar, or outside the browser window).
  4. Expected behavior: the highlight disappears when the mouse leaves the map.
  5. Actual behavior: the last hovered feature remains visibly highlighted, even though the cursor is no longer over the map.
new MVTLayer({
  id: 'example-layer',
  data: 'https://example.com/tiles/{z}/{x}/{y}.pbf',
  binary: true,
  pickable: true,
  autoHighlight: true,
  uniqueIdProperty: 'id',
  highlightColor: [255, 0, 255, 100],
  getFillColor: [100, 100, 200, 100],
  getLineColor: [0, 0, 0, 255],
  getLineWidth: 2
});
Environment
  • Framework version: @deck.gl/google-maps@9.1.11
  • Browser: Firefox
  • OS: MacOS
Logs

No response

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with MVTLayer's autoHighlight and hoveredFeatureId behavior, then trace how GoogleMapsOverlay reports pointer movement when the cursor leaves the map viewport. Reproduce the issue using the provided MVTLayer configuration and Google Maps integration; done means the highlighted feature clears on exit without requiring a new hover.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
data-visualization
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Clearly specified
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.