Leaflet.js Zoom to Clicked Feature and then Pan to Right

Question

I want to be able to adapt to the function when you click on it, but when it approaches, I would like it to take into account the level of control that will be displayed after zooming and scaling, but only 150 pixels to the left. I can currently do this with the following code, but unfortunately it is not a smooth scale, because my current method will be incremented using fitBounds, and then when it is enlarged, it uses panBy to pan 150 pixels to the left. This would not be so bad if the panning was smooth, perhaps after waiting for 250 ms. Ideally, I would like to do some math at the boundaries passed to the fitBounds method, just to allow for a shift of 150 pixels to the left.

Here is an example of what I am currently working on.

Here is a simplified version of the code I'm using: (you can click here for a fully working version with all source code)

when you click

function clickFeature(e) { var layer = e.target; map.fitBounds(layer.getBounds()); } 

map on zoomEnd:

 map.on({ zoomend: function() { map.panBy([150, 0]); } }); 

So, I have achieved the desired function, but it is just not smooth.

Is there a way to do some math at the borders that we get for the click function, so when we zoom in, we zoom in the already changed coordinate, thereby eliminating the two-stage animation process?

Answer 1

First of all, you can control the animation using the pan options. This can help you make the transition smoother. You can see these here .

Secondly, you can calculate the offset you need using the conversion functions. Here you can see here .

For example, you can do something like (from my point of view) using getBoundsZoom for the map object at the borders of the polygon to determine your future scale, and then use this scaling of the project function using the polygon and create a new LatLngBound from the polygon binding, which slightly offset.

Hope this helps!

Answer 2

I had the same problem, and if it was easier than I thought! You can install the add-on using the fitBounds method (and all pan / zoom methods, for that matter)

http://leafletjs.com/reference.html#map-fitboundsoptions

So:

 map.fitBounds(layer.getBounds(),{paddingBottomRight:[150,0]});