noWrap option on tilelayer is only partially working

Question

To prevent multiple duplicated world maps on highest zoom level I'm using noWrap=true option. It's working well but only on the left side on the map (the grey area), the right side still displays extra tiles. Why is that?

UPDATE1: Looks like it's an issue with specific Mapbox tiles or the way they are loaded? Here noWrap and https://{s}.tiles.mapbox.com/v3/ebrelsford.ho06j5h0/{z}/{x}/{y}.png

works perfectly: NoWrap works JSBIN link

But once I change to another way of loading tiles using styles

NoWrap broken JSBIN Link

I can scroll right and still get tiles

I opened a github issue, I suspect it's a bug with the library https://github.com/Leaflet/Leaflet/issues/5938

Answer 1

It is an issue with certain Mapbox styles and an "incomplete" usage of noWrap option in your code: (emphasis mine)

noWrap: Whether the layer is wrapped around the antimeridian. If true, the GridLayer will only be displayed once at low zoom levels. Has no effect when the map CRS doesn't wrap around. Can be used in combination with bounds to prevent requesting tiles outside the CRS limits.

• noWrap, as its name says, tells Leaflet not to copy the "main" world. Therefore, Leaflet has to assume that the "main" world is "infinite", and it tries to load tiles everywhere, extending the quadtree scheme: alongside tile 0/0/0 (at zoom 0), it tries to load tiles 0/1/0, 0/-1/0, etc.
• For some reason, some Mapbox styles return an image for tiles outside the normal quadtree scheme: besides tile 0/0/0, you can also get an image for 0/1/0, 0/2/0, etc. In your case, those "imaginary" tiles are always the same graphics, repeating the world. Therefore it looks like Leaflet still wraps the tiles, whereas in fact it displays different images; it is Mapbox tile server that serves the same graphics in all these images.

If you want to tell Leaflet not to extend the quadtree scheme, you should specify that there are no tiles available outside the "main" world.

The solution is therefore simply to use the Tile Layer bounds option in conjunction with the noWrap one:

L.tileLayer(urlTemplate, {
  noWrap: true,
  bounds: [
    [-90, -180],
    [90, 180]
  ]
}).addTo(map);

Updated JS Bin: http://jsbin.com/nokasukozo/1/edit?html,js,console,output