2

I am using Leaflet with Custom GeoJSON Layers to display my map. I noticed that the map off-screen is only loaded after releasing the mouse button during a drag.

Hopefully, this demo makes it more clear what I mean:demonstration of issue

Is there a way to make the map draw before or during a pan movement?

I found the Leaflet.EdgeBuffer plugin which would do what I want but it appears to only work for tile layers.

As you can probably tell, the map I am using is fairly simple so memory or performance shouldn't be impacted much by even buffering the whole map.

1

Is there a way to make the map draw before or during a pan movement?

You're wrong in this assumption: Leaflet has no concept of "drawing the map". Rather, the artefact is due to the map's L.Renderers not being updated during a drag interaction.

This is done for performance reasons: updating the vector data in a L.Renderer can be very intensive in certain scenarios, particularly in old web browsers, and would cause (very) noticeable jitter.

These artefacts are usually alleviated by making the L.Renderers larger than the map itself: this is done by specifying an explicit L.Renderer and tweaking its padding option. Note that, by default, a L.Renderer has an overhand of 10% of the map's size - if you pan the map less than that amount, you'll notice no artefact at all.

Please note that increasing the padding of the L.Renderers is a naïve approach to alleviating these artefacts: it increases the amount of vector data to actually draw, which means there's a performance hit.

the map I am using is fairly simple so memory or performance shouldn't be impacted much by even buffering the whole map.

Do not be deceived here: you may think "Simplicity" of the vector data is the deciding factor... but the sizes of the rasterized images (in terms of pixels to be drawn/kept in memory) have an impact on web browsers. Large values of padding for L.Renderers mean that you can end up with raster images ten times larger than the user's screen, and again some browsers might have troubles with that.

Is there a way to make the map draw before or during a pan movement?

Leaflet already does this: Any L.Renderers in a L.Map will automatically update on the moveend event. This will happen when you release your mouse button and thus end the drag interaction.

[...] but it appears to only work for tile layers.

...then you might have noticed that L.TileLayers (and L.GridLayers) behave different than L.Renderers, particularly when it comes to updates during drag interactions and pan animations.

You can use a L.GridLayer or L.TileLayer to display your data. The two main approaches here are to rasterize your data in advance (AKA "build your own tiles"), or turn to vector tiles. I feel that full explanations of these are out of the scope of this answer.

  • Thanks for the info clearing up how things work. For my use case, it appears that simply increasing the Renderers padding does the trick fine, without any noticeable performance impact – Jack Sep 25 '18 at 12:39

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.