All examples By author By category About

w8r

Leaflet + mapbox-gl

Leaflet-mapbox-gl with padding

This gist solves the problem with map flickering of mapbox/mapbox-gl-leaflet by adding a padding around the mapbox-gl overlay.

As you can see in this example, panning or zooming the map can produce very unpleasant flickering on around the canvas edges, something that is avoided in leaflet by using buffer tiles: Screenshot 2019-08-07 00 59 05

This PR addresses that issue by introducing a relative padding around the overlay containing the mapbox canvas. The arbitrary value of the padding is 0.15, somewhat close to the value used in the leaflet vector renderers for the same purpose.

You can see the result comparison here https://bl.ocks.org/w8r/26b4f1a6ff0785a71c290d798337689a (map on the left has the padding, map on the right doesn't)

It also bumps the libraries in the examples (there was a maximum call stack exception in the basic example, rooted somewhere in the transformation update in mapbox-gl-js@0.35.x)

I also took the liberty to remove the throttle function implementation, as it has been the part of leaflet API since v1.0.0 for about 3 years now.

Made with blockup