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

I managed to get rid of the bars by adding the followin css property to my #map element: `transform: scale(1.1)`. However, this creates a mess in the rest of my code so I am looking for something else. — Robycool, Mar 17 '17 at 10:15
You could try to make leaflet repeat the map vertically. However this is not supported by the official repo at the moment ( https://github.com/Leaflet/Leaflet/issues/904) so you may want to open a PR for that. It should not be too hard to do since it is already implemented for the x-axis. — Buddyshot, Mar 17 '17 at 10:35
Thank you @Buddyshot. You seem to follow me well and answer all my questions ! A good illustration of the awesomeness of open source. I'll first check if I can fix my issue with the existing leaflet package and otherwise implement your solution. — Robycool, Mar 17 '17 at 11:36
Just found this option: http://leafletjs.com/reference.html#tilelayer-continuousworld Can you give it a try? — Buddyshot, Mar 17 '17 at 11:51

score 3 · Accepted Answer · answered Mar 17 '17 at 11:10

3

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 )

answered Mar 17 '17 at 11:10

IvanSanchez

18,272
3
30
45

Thank you, this seems to be an elegant solution. However, in my specific case it is important to keep the tiles of zoom level = 2, otherwise my map is getting too ugly. In fact, I would need a zoom level of 2.1 or so that just scales up a little bit the tiles of zoom level 2. Or alternatively, a feature to scale up/down tile size at a given zoom level. – Robycool Mar 17 '17 at 11:31
1

As I said already, experiment with `zoomSnap`. Try setting `zoomSnap` to `0.1` and `minZoom` to `2.1`. :-) – IvanSanchez Mar 17 '17 at 11:49
Works like a charm. Thank you! – Robycool Mar 17 '17 at 12:26

Leaflet - get a map that covers the full screen

1 Answers1

Linked