visgl / visgl/deck.gl

[Bug] Initializing GeoJSONLayer with one LineString feature takes ~500ms

Open
#7,418 3 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

Adding a GeoJSON layer with one LineString feature (two vertexes) takes about 500ms. I was only able to reproduce this in Chrome and Firefox on Windows and MacOS.
I don't see this behavior when using Safari on iOS or MacOS.

Flavors
  • React
  • Python/Jupyter notebook
  • MapboxLayer
  • GoogleMapsOverlay
  • CartoLayer
  • DeckLayer/DeckRenderer for ArcGIS
Expected Behavior

My expectation was creating a layer in its simplest form should almost be instantaneous.

Steps to Reproduce

To reproduce the issue, please run the following CodePen:
https://codepen.io/urdeveloper-the-flexboxer/pen/dyKzgeB

Click on Draw Path, then Draw Point then Draw Path.
The delay to draw a red line is very noticeable.
Drawing the red point is roughly three times faster but still slow in my opinion.

Environment
  • Framework version:
  • Browser: Chrome, Firefox
  • OS: Windows, MacOS
Logs

The warnings from Chrome:

(After clicking on Draw Path)
[Violation] 'requestAnimationFrame' handler took 593ms

(After clicking on Draw Point)
[Violation] 'requestAnimationFrame' handler took 164ms

(After clicking on Draw Point again)
[Violation] 'requestAnimationFrame' handler took 560ms

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 the GeoJSONLayer initialization path, then profile the requestAnimationFrame handler in Chrome and Firefox. Compare the Draw Path and Draw Point timings and identify where the delay occurs; done means the reported initialization slowdown is reduced and covered by an appropriate regression check.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
frontend, performance, web-dev
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
38/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.