tolonuk / leaflet.edgebuffer Goto Github PK
View Code? Open in Web Editor NEWLeaflet plugin to support pre-loading tiles outside the current viewport
License: MIT License
Leaflet plugin to support pre-loading tiles outside the current viewport
License: MIT License
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.TileLayer
s.
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
andL.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.
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()
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.