tolonuk / leaflet.edgebuffer Goto Github PK

Thanks for providing this leaflet plugin which is a really great improvement! Anyway we discovered some issues with the new Google leaflet plugin GoogleMutant
(https://gitlab.com/IvanSanchez/Leaflet.GridLayer.GoogleMutant/) - tiles are missing on basemap change (eg from OSM to Google Roadmap) if the option edgeBufferTiles is not explicitly set to 0 for GoogleMutant basemaps. Perhaps this could be added to the readme so that other users do not run into the same issue (which took us quite a while to figure out ;-)

Anyway as the edgeBuffer does not work for GoogleMutant in the first run (due to the way tiles are loaded via GoogleMutant), it would be great in the long run if EdgeBuffer support could also be added for GoogleMutant basemaps. We tried to figure out how to best achieve this, but did not succeed here yet - so any help would be much appreciated!

It seems that GridLayer is not exported from leaflet 0.7.7

If you use Leaflet's maxBounds option - to restrict the view to the given geographical bounds - together with the EdgeBuffer plugin, Leaflet tries to fetch tiles outside of the specified bounds. This leads to many unnecessarily loaded tiles.

Need some unit tests for the basic functionality and to test the various plugin loading mechanisms.

The example mentions "tile layers", and users might assume that this plugin works only with L.TileLayers.

Given that the plugin monkey-patches L.GridLayer, and that things like L.GridLayer.GoogleMutant interact with this plugin, I suggest adding a note to the readme, like

This plugin adds a new option to all instances of L.GridLayer and L.TileLayer:

Hi! First of all, thank you for this great plugin! Finally I can preload my tiles!! 🎉

There's just a little problem; using this plugin with angular 10 this warning is thrown:

WARNING in /frontend/webviews-workspace/dist/webviews-lib/fesm2015/webviews-lib.js depends on 'leaflet-edgebuffer'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

It is Angular warning us that this module is packed as a CommonJS or AMD module, and could cause the generation of large bundles, thus slower serving times of the application.

Suggestion

Angular suggests to use ECMAScript modules. Could it be possible to have a leaflet-edgebuffer-es package to use? ❤️

UI thread is blocked during edgebuffer image load and nothing is shown on the map until all edgebuffered tiles are loaded

Hello,

I have a leaflet project with typescript and i don't succeed to use the plugin ad it doesn't recognize the edgeBuffer option with L.tileLayer.

How to use it?

Thanks for the plugin. It would be nice if it would not depend on globals like L so it could be used when "leaflet" is imported into an ES6 project with different names than L.

This would then allow us to:

import { GridLayer } from "leaflet"
import { edgeBuffer } from "leaflet-edgebuffer"

edgeBuffer(GridLayer)

Hey,
I get this error when trying to use Leaflet.EdgeBuffer

Uncaught RangeError: Maximum call stack size exceeded
at NewClass._getTiledPixelBounds (leaflet.edgebuffer.js:24)
at NewClass._getTiledPixelBounds (leaflet.edgebuffer.js:25)

Leaflet 1.0.1 with the following code to create a map

import '../vendor/leaflet.edgebuffer.js' [...] L.tileLayer('http://a.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png', { subdomains: '1234', type: 'osm', edgeBufferTiles: 1, attribution: 'Map tiles by CartoDB, under CC BY 3.0. Data by OpenStreetMap, under ODbL.' }).addTo(map);

Any ideas what I am doing wrong? Thanks!

Because why would I use this plugin if I'd set the buffer to 0? I use it to have at least 1 as a buffer.
What you think?

my overlay is a geojson acting as a fog of war, so when I pan/drag the map it shows the boundary where no geojson is loaded exposing my map before I am ready, I would like to know If I could get this buffering to happen with my geojson too.
thanks to you for contributing to the leaflet community! Greatly appreciated!

If map options include tms == true, then the calculation of the tile y value is incorrect, due to this plugin overriding _pxBoundsToTileRange.

_pxBoundsToTileRange is called in Leaflet's GridLayer.js, in function _resetGrid, to get the tile coordinates for the entire world.

If the edgeBufferTiles value is set to non-zero, then the max y value for the world is increased by 2. Then, in Leaflet's TileLayer.js, in function getTileUrl, when variable invertedY is calculated, it uses the value of this._globalTileRange.max.y, which is too large by the value of edgeBufferTiles, so invertedY is too large. If tms is set true, then this affects which tiles are displayed in the viewport, leading to the map appearing to be offset from the true position supposed to be displayed.

Hello,
Thanks for this great plug-in.
I use it to provide map offline access to my website. The only issue I see is the overall tile loading time that is longer due to the higher number of tiles to load.
Is there a possibility to lazy-load tiles that are outside of the viewport ? That way the visible map is loaded straight away and the ones outside the viewport start loading at a second step ?

Hi,

According to the leaflet docs, the tileSize option can be either a Number or a Point.
In case it is a Point, the function _getTiledPixelBounds() is broken an returns NaN.

The fix is to adapt the computation of the pixel bounds as stated below:

if (edgeBufferTiles > 0) {
        var pixelEdgeBuffer = L.GridLayer.prototype.getTileSize.call(this).multiplyBy(edgeBufferTiles);
        pixelBounds = new L.Bounds(pixelBounds.min.subtract(pixelEdgeBuffer), pixelBounds.max.add(pixelEdgeBuffer));
}

The prototype function getTileSize() always returns a point from the value set on the options and takes care to convert a scalar to a Point.

If you need me to create a quick pull request, just drop me a line.

Regards,
Hauke

_getTileSize() has been renamed to getTileSize()