10

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(
    latitudeSum/locations.length,
    longitudeSum/locations.length
  )
  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.

23

You could simply use:

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

map.fitBounds(group.getBounds());
  • 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 '13 at 13:20
  • 1
    Definitely use the next answer unless you already have markers created. – Andy Apr 6 '16 at 15:01
10

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

map.fitBounds([
  [-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. – Jan Kyu Peblik Jul 24 '18 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 '18 at 2:32
  • 3
    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.) – Jan Kyu Peblik Jul 25 '18 at 3:54
0

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"
crossorigin=""></script>

// 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? – LeeGee Feb 20 at 11:48
0

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 ])

VUE.JS WAY:

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


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.