Animating Icon Layer

[sambaskin]

I'm trying to visualize car trip data, and I want to use a moving icon to represent each car.
I haven't been able to find any examples where icons move, so I figured that the best way forward would be to modify either the existing trip or icon layer.
I know that the trips layer works by just adjusting the shading on a normal path layer over time, so I think the best bet would be modifying the icon layer.
Is there a way to consistently change the getPosition attribute in the icon layer over time?

[Foosballfan]

Hi @sambaskin , just add this property transitions: { getPosition: { duration: 100 } } or for JSX transitions={{ getPosition: { duration: 100 } }}

[sambaskin]

Thanks! I should add that in the icon layer javascript file, right? If so, where in the file should I add that property?

[Foosballfan]

In the icon layer parameters Get Outlook for Android<https://aka.ms/ghei36>

…

________________________________ From: Same Basket <notifications@github.com> Sent: Thursday, January 30, 2020 10:08:34 PM To: uber/deck.gl <deck.gl@noreply.github.com> Cc: Charles Killer <charleskiller@coachhire.com>; Manual <manual@noreply.github.com> Subject: Re: [uber/deck.gl] Animating Icon Layer (#4199) Thanks! I should add that in the icon layer javascript file, right? If so, where in the file should I add that property? — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub<#4199>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/ADTHTTYDMFJ2PRKHLEGAC4LRANFWFANCNFSM4KLNCAPQ>.

[sambaskin]

Here's my default props section in icon-layer.js after adding that property in. Does this seem right?
I think I'm confused about where I would actually add in the location data that is used to tell the icon where to move.

`const defaultProps = {

iconAtlas: null,
iconMapping: {type: 'object', value: {}, async: true},
sizeScale: {type: 'number', value: 1, min: 0},
fp64: false,
billboard: true,
sizeUnits: 'pixels',
sizeMinPixels: {type: 'number', min: 0, value: 0}, // min point radius in pixels
sizeMaxPixels: {type: 'number', min: 0, value: Number.MAX_SAFE_INTEGER}, // max point radius in pixels
transitions: { getPosition: { duration: 100 } },
getPosition: {type: 'accessor', value: x => x.position},
getIcon: {type: 'accessor', value: x => x.icon},
getColor: {type: 'accessor', value: DEFAULT_COLOR},
getSize: {type: 'accessor', value: 1},
getAngle: {type: 'accessor', value: 0}
};
`

Edit: Sorry, just realized you probably meant the icon properties in app.js. Was still thinking about this in terms of modifying an existing layer type. Still confused on how the data for the changing position comes into this though.
Here's the icon layer in app.js:
` new IconLayer({
id: 'icon-layer',
data: icon_data,
iconAtlas: 'images/sprite.png',
iconMapping:{ marker: {x: 0, y: 0, width: 128, height: 128, mask: false}},
getPosition: d => d.position,
transitions: { getPosition: { duration: 100 } },
getIcon: d => d.icon,
getSize: 1,
sizeScale: 20,
opacity: 1

  })`

[Foosballfan]

Hopefully they'll invest some time in documenting the transitions so we have a clearer picture of what works.
Right now I'm just scouring the net for any examples.

[sambaskin]

Here's two things I've found:
The docs discussing layer transitions, and one example with radius in a scatter plot layer.
Maybe I could use enter => to access a function which returns the next value stored in a dataset?
Also, thank you for your help with this! I really appreciate it

[sambaskin]

Here's something else
Maybe the icon layer isn't supported by transitions?

[danias]

@Foosballfan Foosballfan transitions: { getPosition: { duration: 100 } } works BUT as soon as an item is added or removed and the array sequence changes, since there is no identifier to match, markers start flying around.

There should probably be a getKey data accessor to avoid this behaviour getKey: d => d.id else how would it be possible to know what goes where? You can only assume that the size of the array remains the same and there are no replacements.

[Pessimistress]

Merging with #2570

[haelimk]

@danias
Hi. Can I ask you something? I cannot find any solution related to icons flying around. I tried to use getKey: d => d.id, but I don't know where to put the code in. I'm using deck.gl icon layer animation with transition, and my icons are animating properly, but sunddenly they start to flying around like you mentioned. Can I get any solution or answer please? Thank you so much.