Right now what I'm trying to do is zoom the map in and out based on screen size, so that you can always see basically every piece of land in the world. I'm not worried about the repeating world, but I ideally want to keep it centered basically on the west coast of Africa, like a typical map.

I have something that looks as follows:

function fitMap() {
    if ($) {
        var height = $(window).height();
        var width = $(window).width();
        //Put map into full screen
        $('#map').css({position: "absolute", top: "0", left: "0", right: "0", bottom:"0"});

        if ((height < 586 && width < 1095) || height < 325 || (width < 700 && height > 586)) {
            map.setZoom(1);
        }
        else if (width >= 1500 && height > 900) {
            map.setZoom(3);
        } 
        else {
            map.setZoom(2);
        }
    }
};

//Fit the map more appropriately to screen sizes.
window.onload = fitMap;
window.onresize = fitMap;

I find this to be really hacky and it works if I were to try and put this on a 1920x1080 all the way down to a small 1024x768 but I didn't see anything in Leaflet that would allow me to do this. One idea I had was to create an invisible feature group that basically creates a perimeter from dateline to dateline and use .getBounds() like this: Centering Leaflet map with getbounds and related issues

Does anyone have a better solution?

Right now what I'm trying to do is zoom the map in and out based on screen size, so that you can always see basically every piece of land in the world. I'm not worried about the repeating world, but I ideally want to keep it centered basically on the west coast of Africa, like a typical map.

I have something that looks as follows:

function fitMap() {
    if ($) {
        var height = $(window).height();
        var width = $(window).width();
        //Put map into full screen
        $('#map').css({position: "absolute", top: "0", left: "0", right: "0", bottom:"0"});

        if ((height < 586 && width < 1095) || height < 325 || (width < 700 && height > 586)) {
            map.setZoom(1);
        }
        else if (width >= 1500 && height > 900) {
            map.setZoom(3);
        } 
        else {
            map.setZoom(2);
        }
    }
};

//Fit the map more appropriately to screen sizes.
window.onload = fitMap;
window.onresize = fitMap;

I find this to be really hacky and it works if I were to try and put this on a 1920x1080 all the way down to a small 1024x768 but I didn't see anything in Leaflet that would allow me to do this. One idea I had was to create an invisible feature group that basically creates a perimeter from dateline to dateline and use .getBounds() like this: Centering Leaflet map with getbounds and related issues

Does anyone have a better solution?

• javascript
• jquery
• leaflet

• Is this Google Map v3? if yes update the tags, and what you are trying to achieve is not clear, please explain. – Mehdi Karamosly Commented Jul 24, 2013 at 15:36
• It is not. Just Leaflet with OpenStreet maps – Jacob Morrison Commented Jul 24, 2013 at 15:38

2 Answers 2

Leaflet offers a fitWorld() method to do just this.

You would use this by calling map.fitWorld();, and here's a full example.

Please note, that fitWorld takes zoomSnap into account, so if you are using the default value of 1 and call fitZoom on resize, the map doesn't really fit well in a lot of situations. Decrease zoomSnap to a value that's okay for you. I also remend setting animate to false with this approach:

map.on( 'resize', () => {
    map.fitWorld( { animate: false } );
} );