Leaflet - get a map that covers the full screen

Question

In leaflet and mapbox I would like to get rid of the two gray bars above and under the map as seen on the picture below. My #map DOM element takes the full screen and the gray bars disappear when I zoom in (e.g., zoomLevel = 3). So the gray bars seem to be caused by the fact that a zoomLevel has a given height (in px) of the tiles which is smaller than my screen.

I want to keep the tiles of the same zoom level but make sure the height of the tiles cover at least the full screen.

Here is my map setup code:

                vm.map = L.map('map', {
                    center: [35, 15],
                    zoom: 2,
                    maxZoom: 21,
                    scrollWheelZoom: true,
                    maxBounds: [
                    [89.9, 160.9],
                    [-89.9, -160.9]
                    ],
                    zoomControl: false,
                    noWrap: true,
                    zoomAnimation: true,
                    markerZoomAnimation: true,
                });

I am using angular and my screen dimensions are 1920 x 1080

Answer 1

Sounds like you need to calculate the minimum zoom level at which the map only shows the area between 85°N and 85°S.

The getBoundsZoom() method of L.Map helps with this, e.g.:

var bounds = L.latLngBounds([[85, 180],[-85, -180]]);
var wantedZoom = map.getBoundsZoom(bounds, true);
var center = bounds.getCenter();
map.setView(center, wantedZoom);

Note that this is a generic solution, and works for any size of the map container.

You could also set the minZoom of the map to that value, and experiment with fractional zoom (see the zoomSnap option). If you want the user to be unable to drag outside the painted area, use the map's maxBounds option with something like [[85, Infinity],[-85, -Infinity]].

(And if you are wondering why 85°N and 85°S, do read https://en.wikipedia.org/wiki/Web_Mercator )