[WIP] Add example: animate a line #3788
Conversation
There was a problem hiding this comment.
Thanks for putting this together @YunjieLi! In addition to the other comments, the sin line continues onto other copies of the world outside of the viewport and I'm afraid this might confuse people. I think it would be preferable to choose a route / path that stays within the viewport
| @@ -0,0 +1,128 @@ | |||
| --- layout: example category: example title: Animate a line description: Animate a line by updating a GeoJSON source on each frame. tags: - layers - sources --- | |||
There was a problem hiding this comment.
this section needs to be formatted like the other examples (not all on one line, etc)
| <button id='play' class='pause'></button> | ||
|
|
||
| <script> | ||
| mapboxgl.accessToken = 'pk.eyJ1IjoieXVuamllbGkiLCJhIjoiY2lxdmV5MG5rMDAxNmZta3FlNGhyMmpicSJ9.CTEQgAyZGROcpJouZuzJyA'; |
There was a problem hiding this comment.
you don't need an access token here. a token is automatically added by jekyll when it compiles the examples
There was a problem hiding this comment.
Good catch! I forgot to remove it from the gist
| 'line-color': '#3cc', | ||
| 'line-width': 5, | ||
| 'line-opacity': .4 | ||
| } |
There was a problem hiding this comment.
This is hard to see on the map -- I would make it a brighter color or more opaque and/or change the basemap.
| // map.panBy([60, 0]); | ||
|
|
||
| // Request the next frame of the animation. | ||
| animation = requestAnimationFrame(animateLine); |
There was a problem hiding this comment.
There's some interesting discussion about using using requestAnimationFrame with GeoJSONSource#setData in #3692
| startTime = performance.now() - progress; | ||
| animation = requestAnimationFrame(animateLine); | ||
| } | ||
| }); |
There was a problem hiding this comment.
Would you be open to removing the "play" button in order to reduce the # of lines of code in this example?
| var x = progress / speedFactor; | ||
| // draw a sine wave with some math. | ||
| var y = Math.sin(x * Math.PI / 90) * 40; | ||
| // append new coordinates to the lineStrin |
There was a problem hiding this comment.
You're missing a "g" on "line string"
| }; | ||
| } | ||
|
|
||
| progress = time - startTime; |
There was a problem hiding this comment.
This is the source of the inactive tab bug-- when on another tab, requestAnimationFrame does not get called, so your progress variable makes a big jump when you return and you don't add any points in between. Consider something like this to limit the maximum timestep between frames:
var startTime;
var lastTime;
var progress = 0;
function animateLine(time) {
var dT = time - lastTime;
if(dT > 30) dT = 30; // Don't jump too far between animation frames, even if the browser tab is inactive
progress += dT;
lastTime = time;
// The rest of what you have should work the same
}
There was a problem hiding this comment.
You can also do this, which should work, though I haven't thoroughly tested it - which would reset the timer when a tab changes visibility:
document.addEventListener("visibilitychange", function() {
startTime = performance.now();
});
|
|
||
| // requestAnimationFrame pauses when the tab is inactive | ||
| // reset startTime and progress when switched back | ||
| document.addEventListener('visibilitychange', function(){ |
There was a problem hiding this comment.
this call shouldn't be inside of animateLine: animateLine will be called many times but document.addEventListener should be called once.
There was a problem hiding this comment.
Thanks @tmcw ! I just pushed some new edits if you want to take a look again?
|
@mollymerp which branch should I rebase this to? |
|
@YunjieLi you can rebase against |
|
Also - currently the map shows a straight line between the starting point and x,y by the time the window is loaded, versus starting animation until the map is ready(?). Will look into it next. |
1ec5
added
GL native → GL JS
commit 5ceec40 did not update yarn.lock after changing package.json as a result every time dependencies are install yarn changes yarn.lock now ideally package.json dependencies should be changed using `yarn add`, `yarn remove` or `yarn upgrade` to keep package.json and yarn.lock in sync
No error or warning is printed for missing patterns. fix #4660
We switched to 16-bit coordinates in attributes in a84083b, so there's no longer any reason to require that they are divisible by four. The integration test updates here are due to: * Underspecified behavior for overlarge text-halo-width values which was perturbed by this change * A bug in icon-text-fit logic where the width after extending mod 4 was used, instead of the intrinsic icon width * Other random and insignificant perturbations
This makes pattern usage more like icons, and will be necessary for data-driven *-pattern properties.
Manually bind a_data at position 0 for symbolSDF shader. Binding unused/undefined attributes to position 0 causes symbols to not render in Safari.
…rom camera to the center of the tile. Recalculating the shape allows the collision approximations in the shaders to remain more accurate.
…rid.length` will always be undefined, but if `grid.keys.length === 0` then we can skip running through the query geometry.
When a label is twice as far away, make it 75% of its original size, instead of 50% of its original size.
Perspective effects may make line labels show at an "effective scale" of less than 1 even though the tile isn't underzoomed. Collision boxes are only generated once at tile parsing time, so they need to account for the possibility of being highly pitched even if the map is not currently pitched.
- Reduces amount of background CPU usage during rotation/pitch operations at cost of somewhat increased latency in collision detection - Adds symbol re-placement during pan operations to support label size changing with distance - Symbol re-placement for "tile distance" changes is restricted to pitches > 25 degrees
…hat won't render well. Hardwire to value of 1.5 for viewport-pitch-aligned line labels. Depending on the size of the viewport, this means something like "start hiding line labels at the top of the screen as you approach a pitch of 50 degrees".
… text scaling behavior.
…ne collision features if the map isn't pitched.
- Necessary because pitched/wrapped tiles now have different CollisionTiles - Introduces potential for more flicker while crossing dateline at zoom level 0 - To preserve the ImageSource/VideoSource wrapping behavior, we can now bind the same image/video to multiple (wrapped) tiles - query_features#mergeRenderedFeatureLayers adds a fair amount of extra work to preserve existing query behavior with wrapped tiles: i.e. don't return a feature twice if it's returned from both tiles. - Flip the tile order of results in box-cutting-antimeridian-z0. This was previously based on the order provided by SourceCache#getIDs, which was only strictly defined for zoom level. It's now defined by query_features#sortTilesIn
This eliminates precision-related disagreement between collision box colors and whether symbols actually show.
…inzoom, etc. This resolves an iOS rendering issue where right at the edge of a collision some vertices could be hidden while others showed. It's possible the underlying issue could still be exposed when the un-rounded perspective_zoom_adjust value is almost exactly at a multiple of .1, but if so it will be much less common.
* fix update edit link, add query parameters for map feedback * update url structure * correct url in test * add access_token param * update tests w access_token param * add pitch and bearing * fix hash, make consistent w existing hash option * use rounding instead of toFixed to get rid of .00s, update tests * make hash conform to feedback expectations * change hash back to private property
|
Somehow I couldn't get this running locally anymore, so moving to #4780! |
* copy and paste from pr #3788 * gentle tweaks * minor edits to example * reverse yarn.lock * styling update * rename pauseAnimation * rename to resetTime * fix comments * copy edits to comments
* copy and paste from pr #3788 * gentle tweaks * minor edits to example * reverse yarn.lock * styling update * rename pauseAnimation * rename to resetTime * fix comments * copy edits to comments
Per #1513 I created a new example of animating a line.
I rewrote the Mpabox.js example using GL JS and requestAnimationFrame so it's smoother. I also add the play and stop buttons which is not in the point animation example.
Here is a demo.
Still working on:
[ ] Slight flickering when I stop and resume animation
[ ] Bug in leaving the tab inactive and come back
[ ] Pan the map to follow animation: speed control?
cc @geografa @mollymerp