CODEWITHSUNDEEP
leafletmaps
dila tation
dila tation

Reputation: 21

Leaflet.js grid of white lines

When I move the map then the map displays a grid of white lines. That comes from what?

1

Upvotes: 2

Views: 3697

Answers (2)

Ragnar Kruse
Ragnar Kruse

Reputation: 767

Stumbled upon this first when googling, leaving a workaround here for future reference.

// based on https://github.com/Leaflet/Leaflet/issues/3575#issuecomment-150544739
if (window?.chrome !== undefined) {
  const originalInitTile = L.GridLayer.prototype._initTile;

  L.GridLayer.include({
    _initTile: function (tile) {
      originalInitTile.call(this, tile);

      const tileSize = this.getTileSize();

      tile.style.width = `${tileSize.x + 1}px`;
      tile.style.height = `${tileSize.y + 1}px`;
    }
  });
}

Upvotes: 0

IvanSanchez
IvanSanchez

Reputation: 19069

That's caused by the way Leaflet positions the tile images on the DOM tree (3D CSS transforms) and some over-optimizations made by web browsers (rounding of fractional sub-pixel coordinates on a per-tile basis instead of on a per-DOM-parent basis).

For more technical information, see the bug report at https://github.com/Leaflet/Leaflet/issues/3575 (and related ones, like https://github.com/Leaflet/Leaflet/issues/6101). For a possible solution, see https://github.com/Leaflet/Leaflet.TileLayer.NoGap

Upvotes: 1

Related Questions