CODEWITHSUNDEEP
mapsleaflet
Noripsni
Noripsni

Reputation: 425

Shrink leaflet map's bounds by some padding or ratio

I'd like to shrink a Leaflet map's bounds by some factor (say 50px or 5%).

I've tried the following:

marginPoint = new L.Point(50, 50);
bounds = map.getPixelBounds();
bottomLeft = bounds.getBottomLeft();
topRight = bounds.getTopRight();

bounds = new L.LatLngBounds(
  map.unproject(bottomLeft.subtract(marginPoint)),
  map.unproject(topRight.subtract(marginPoint))
);

However, this does not shrink the map, it just moves/translates the current box / current map's bounds.

Upvotes: 1

Views: 1251

Answers (1)

ghybs
ghybs

Reputation: 53360

Since you subtract the same amount to both map containers' corners, the result is that you just shift the map view to the South West (bottom left).

If you are trying to "zoom in" (i.e. the map displays a smaller portion of geographic area, but within the same container dimensions), you would add some pixels to your bottom left corners, and remove some to your top left.

But be noted that you could also simply use the latLngBounds.pad() method (with a negative bufferRatio argument) to achieve the same result.

Upvotes: 1

Related Questions