leaflet – Preventing Leaflet Map from Becoming Invisible Out of World’s Edge

antimeridianjavascriptleaflet

I am working at zoom bounds to my map.

Unfortunately, if I go beyond the min zoom 2.75 I start to see the map beyond the World's edge. I mean, that the world map tends to be repeatable, but without the content visible on the main map.

enter image description here

As you can see in the image above (Zoom level 1) I have my main world map with the content, whereas other "maps" beyond the World's range are still visible with nothing. It makes my final map not neat enough.
After setting my bounds:

    var SouthEast = L.latLng(-90,180),
    NorthWest = L.latLng(90,-180),
    Bounds = L.latLngBounds(SouthEast,NorthWest);

var map = L.map('map', {
    zoomSnap: 0.25,
    minZoom: 1,
    maxBounds: Bounds,
    maxBoundsViscosity: 1.0

}).setView([0, 0], 3);

and applying maxBoundsViscosity: 1.0 as explained in the example below:

https://stackoverflow.com/questions/22155017/can-i-prevent-panning-leaflet-map-out-of-the-worlds-edge

it still not works as expected. The ma is fine from Zoom level higher than 2.75, but not valid for smaller zoom levels.
In turn the example here:

Setting bounds and making map bounce back if moved away

describes the situation, when we want to bounce back our map. It's even worse in my example because I cannot see the highest latitudes.

Is there any way to "switch off" these maps at smaller zoom levels? I would rather to see:

  • grey background instead of blank map
    OR
  • replicated content in these maps

How can I do this?

Best Answer

What you want to achieve cannot be done at the map level.

You can achieve this at the tile layer level with the noWrap option set to true. For example, for OSM layer this would look something like this:

L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    noWrap: true,
    maxZoom: 19
}).addTo(map);
Related Question