I have a leaflet map whose size depends on the size of the browser window. I would like the zoom level to be dynamically chosen so that it is as zoomed in as possible while showing the entirety of the bounding box.

Right now, I just have the zoom level hardcoded and the center point based on an average of points.

map = new L.Map('map', {
  center: new L.LatLng(
  zoom: 9

Instead, I'd like to give it a bounding box (two islands) and have the zoom level chosen based on the size of the window.

4 Answers 4


You could simply use:

var group = new L.featureGroup([marker1, marker2, marker3]);

  • 1
    Useful answer - that is a better way for centering and zooming - before I was just centering with a manual calculation. FitBounds was the answer I need, but I figured out you could simply pass into two coordinates to fitBounds and be done.
    – Mike McKay
    Nov 1, 2013 at 13:20
  • 2
    Definitely use the next answer unless you already have markers created.
    – Andy
    Apr 6, 2016 at 15:01

Using @Farhat's answer, I figured out that all I needed was to pass an array of arrays:

  [-4.8587000, 39.8772333],
  [-6.4917667, 39.0945000]
  • 1
    This is obviously missing a right square bracket near the end. Not sure why you reverted my edit. Jul 24, 2018 at 20:12
  • 1
    You're right about the bracket - thanks. I'll fix that. Your edit also had an extra comma though.
    – Mike McKay
    Jul 25, 2018 at 2:32
  • 4
    developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… Code actually tested with trailing comma, too. (Because life is too short to bother with lines that pointlessly significantly differ in format.) Jul 25, 2018 at 3:54

map.fitBounds() also works great if you're working with Google Map Polylines:

<!-- required for Leaflet Polyline support -->
<script type="text/javascript" src="https://cdn.rawgit.com/jieter/Leaflet.encoded/68e78190/Polyline.encoded.js"

// polylines require backslashes to be escaped (Jinja example)
let encodedRoute = '{{ activity.strava_data['map']['polyline']|replace("\\", "\\\\")|safe }}';
let coordinates = L.Polyline.fromEncoded(encodedRoute).getLatLngs();
let map = L.map('map').fitBounds(coordinates);
  • Why was this answer down-voted? Feb 20, 2019 at 11:48

This is how I made it thanks to @Mike McKay! ;)

Note that I've added a couple of extra to the coords as a inner Padding, so the markers aren't right in the side of the map. This way looks beautifuler.

const [ ...coordinates ] = locations.map(marker => [ marker.coordinates.latitude + 
0.055, marker.coordinates.longitude + 0.055 ])

map.fitBounds([ ...coordinates ])


mounted () {
   this.$nextTick(() => {

methods: {
   initialZoom () {
       const map = this.$refs.myMap.mapObject
       const [ ...coordinates ] = this.locations.map(marker => [                                  
                                          marker.coordinates.latitude + 0.055,
                                          marker.coordinates.longitude + 0.055 

map.fitBounds([ ...coordinates ])

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.