search

maplibre / maplibre-gl-leaflet

This is a binding from MapLibre GL JS to the familiar Leaflet API.
ISC License
134 stars 36 forks source link

Blurry tiles #41

Closed ma7moudat closed 1 year ago

ma7moudat commented 1 year ago

While re-implementing the tile layer with maplibre-gl-leaflet I noticed the quality of the tiles dropped due to blurriness.

I hope the difference is recognisable in the screenshots 😅

With leaflet on its own with raster tiles (or maplibre-gl on its own with vector tiles), the map looks sharp and crisp: leaflet

But when I try to use maplibre-gl-leaflet, it's not as clean: maplibre-gl-leaflet

The reason is that tile layer gets a transform css rule with fractions: maplibre-gl-leaflet-style

So if the style were transform: translate3d(-107px, -50px, 0px) instead, we would not have the problem.

Can we round the translate properties?

ma7moudat commented 1 year ago

The problem can also be seen in the examples.

https://raw.githack.com/maplibre/maplibre-gl-leaflet/main/examples/basic.html

ma7moudat commented 1 year ago

Please review https://github.com/maplibre/maplibre-gl-leaflet/pull/42 and, if everything is fine, publish it to npm.