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,
Solved! Go to Solution.
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.
You can use requestAnimationFrame to do smooth animations in your app.
Here is a sample that does what I think you are looking for.
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
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.
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!
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',
})