Is there a way to animate a padding change?

402
5
Jump to solution
08-06-2019 07:06 AM
RyannGalea
New Contributor II

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,

Tags (3)
0 Kudos
1 Solution

Accepted Solutions
RyannGalea
New Contributor II

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

Main Function

MapOffset interface

Interface

Goto Function

Goto Function

Calling it

Call

Video Example of it working:

Using a pixel offset with Esri - YouTube 

An example of the offset.

View solution in original post

0 Kudos
5 Replies
ReneRubalcava
Frequent Contributor II

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

0 Kudos
BenElan
Esri Contributor

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

0 Kudos
RyannGalea
New Contributor II

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

Main Function

MapOffset interface

Interface

Goto Function

Goto Function

Calling it

Call

Video Example of it working:

Using a pixel offset with Esri - YouTube 

An example of the offset.

0 Kudos
ReneRubalcava
Frequent Contributor II

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!

Joel-Hickok-1978
New Contributor II

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',
})
0 Kudos