topic Re: Is there a way to animate a padding change? in ArcGIS JavaScript Maps SDK Questions

Is there a way to animate a padding change?

RyannGalea — Tue, 06 Aug 2019 14:06:20 GMT

Hi Everyone,

So I have a map where I show some custom data at the bottom of the map and it kind of obscures the view. My code currently calculates the height of the data div and adds that dimension in padding to the bottom of the map to make the centring more pleasant.

The problem is that it is a hard change to the map and does not cleanly animate to the new position. Is there currently a way to animate a padding change using the javascript API?

I actually centre the map at the same time, so perhaps there is a way to calculate an offset size into the new centre before I centre the map.

Any ideas welcome.

Ryann,

Re: Is there a way to animate a padding change?

ReneRubalcava — Tue, 06 Aug 2019 15:24:19 GMT

You can use requestAnimationFrame to do smooth animations in your app.

Here is a sample that does what I think you are looking for.

https://codepen.io/odoe/pen/zPJKeE?editors=0010

Re: Is there a way to animate a padding change?

BenElan — Tue, 06 Aug 2019 16:46:07 GMT

I'd also like to give a quick shout out to D3

If you really want to jazz it up you can use transition easing:

https://bl.ocks.org/d3noob/1ea51d03775b9650e8dfd03474e202fe

Edit: This wouldn't help in your case I'm just a fan of their animations

Re: Is there a way to animate a padding change?

RyannGalea — Thu, 08 Aug 2019 11:42:17 GMT

Solved,

So after playing with the padding, it was evident it didn't really match what I was after. By adding the padding it pushed up any widgets I had along the bottom of the map which was not the desired effect.

What I really needed was a function that would offset the centre point in pixels and zoom to that location instead, this was to account for any information I am showing along the bottom.

In short, I supply a longitude, latitude & and offset object with values in pixels, which then calculates the pixel offset and returns the new longitude & latitude.

There may be an easier way to do this but this is what I ended up with.

This is the main function

MapOffset interface

Goto Function

Calling it

Video Example of it working:

Using a pixel offset with Esri - YouTube

An example of the offset.

Re: Is there a way to animate a padding change?

ReneRubalcava — Thu, 08 Aug 2019 14:44:10 GMT

Ah, so you want to have padding on the map portion of the page without having it impact the UI (widgets) portion of the page? I'll get this feedback into our pipeline. Thanks!

Re: Is there a way to animate a padding change?

Joel-Hickok-1978 — Fri, 19 Feb 2021 20:31:46 GMT

This would be a very nice feature!

Personally, I would be looking for something like this with the option to offset the same way as with the UI padding:

await view.goTo(graphic, { padding: { bottom: 300, }, animate: true, duration: 500, easing: 'ease-in', })