maptalks / maptalks/maptalks.js

Bug: Labels with pixel offsets (textDx/textDy) jitter during continuous map.setCenter() panning

Open
#2,691 3 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
HTML
Stars
4.5k
Forks
511
Avg merge
3d 58m
Merged PRs (30d)
1

Description

maptalks.Label geometries, especially those using pixel offsets like textDx or textDy, exhibit a visible "jitter" or "shaking" when the map is panned continuously. This occurs when map.setCenter() is called repeatedly, such as in a requestAnimationFrame loop to follow a moving object.

The jitter appears to be a 1-2 pixel vibration and happens even when the label's own properties are not being changed. The underlying maptalks.Marker (if visible) pans smoothly, but the attached label and its text do not.

Expected behavior
Labels should remain perfectly stable relative to their anchor point and pan smoothly with the map, just as the markers do, without any jitter.

Current behavior
Labels with a textDx or textDy offset visibly shake or jitter on each frame of the continuous pan. The larger the pixel offset, the more noticeable the jitter becomes.

Steps to reproduce

  1. Create a map with a maptalks.VectorLayer.
  2. Add one or more maptalks.Label geometries to the layer.
  3. In the label's textSymbol, set a pixel offset, e.g., textDx: 80.
  4. Create an animation loop using requestAnimationFrame.
  5. Inside the loop, update the map's center coordinate by a small amount and call map.setCenter(newCoords) on every frame.
  6. Observe the map: the labels will shake, while the base map and any non-offset markers pan smoothly.

Live Demo (CodePen)
A live demo reproducing the issue is available here:
https://codepen.io/fredli4qooni/pen/OPMGqoX

  • Check "Auto-move center" to start the continuous pan.
  • Observe the labels (with textDx: 80) shaking.
  • Unchecking "Show Labels" and leaving "Show Markers" on shows that the markers themselves pan smoothly.

Environment

  • MapTalks Version: 0.49.4 (via CDN)
  • Browser: (Reproducible in latest Chrome, Firefox, Edge)
  • OS: (Reproducible in Windows, macOS)

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 the linked CodePen reproduction and trace maptalks.Label behavior for textDx/textDy while map.setCenter() runs in a requestAnimationFrame loop. Compare label movement with the underlying maptalks.Marker; done means offset labels remain stable relative to their anchor without visible jitter during continuous panning.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.