Leaflet fitBounds incorrectly moves the center of the map

Question

I have a map with a circle drawn on it placed in the center of the map. Circle is always present on the map. Radius of the circle is adjustable by the user. On each radius change I am calling fitBounds like this:

leafletData.getMap().then(function(map){
  var currentDiameter = L.circle(map.getCenter(), $scope.radius);
  map.fitBounds(currentDiameter.getBounds());
});

Sometimes fitBounds moves the center of the map. I have tried recentering the map after each fitBounds call but it is not ideal.

Thanks in advance

score 2 · Answer 1 · answered Aug 30 '16 at 14:47

2

It shouldn't be possible to get the bounds of a circle until it has been added to a map, for the same reasons as bug #4740.

answered Aug 30 '16 at 14:47

IvanSanchez

18,272
3
30
45

The circle is already added to the map. It is always on the map, only it's radius is changed. – user3002996 Aug 30 '16 at 19:56
No. By running `L.circle()`, you're creating a new instance. – IvanSanchez Aug 31 '16 at 07:23
Ok, thanks for letting me know then! How do I pick the existing circle? – user3002996 Sep 01 '16 at 11:14
Create the circle once, save it to a variable like `var myCircle = L.circle(...)` and reuse that variable later. Be careful with variable scoping. – IvanSanchez Sep 01 '16 at 13:35
I am adding the circle by using paths attribute from the angular-leaflet-directive. – user3002996 Sep 01 '16 at 13:43

Leaflet fitBounds incorrectly moves the center of the map

1 Answers1