CODEWITHSUNDEEP
javascriptleaflet
mbeloshitsky
mbeloshitsky

Reputation: 357

Is there any reason why Leaflet rounds pixel coordinates?

I wonder that some of leaflet projection methods e.g. latLngToLayerPoint and _setPos method of Marker rounds pixel coordinates.

Is there any reason why? It would be nice not to round, because we can take better positioning and more smooth marker animations.

Upvotes: 2

Views: 339

Answers (1)

IvanSanchez
IvanSanchez

Reputation: 19069

The main reason is pixel fidelity: making sure that one pixel from an image (a tile or a marker icon) corresponds exactly to one pixel in your screen.

This is best explained with a counter-example: some browsers (notably Chrome) perform pixel interpolation when an image (or the container of an image) has a fractional offset.

Let's take for example the map that appears on the leafletjs.com homepage, hit the browser's developer tools...

Original leaflet map

...and change the offset of the main map pane by half a pixel:

Leaflet map with non-integer offsets

It looks blurry. In case your eyesight or your screen doesn't let you appreciate the difference, here's what it looks like when magnified:

Side-by-side blurry and non-blurry maps

While the browser is doing exactly what it's being asked of (moving an image half a pixel), that means that each pixel on the screen is the weighted combination of four pixels from the source tile images (because the webkit engine uses a linear interpolation). Other browsers (e.g. Firefox) don't display this behaviour (because they use a nearest-neighbour approach).

Even though Leaflet is using integer offsets by default, there are some setups (a combination of hi-res screens plus panning animations plus browser setup) that still causes this blurriness; see for example Leaflet bug #6069. Subpixel stuff in general is a PITA to deal with (see Leaflet bug #3575).

Using non-integer offsets would make that kind of bugs more prominent.

Upvotes: 5

Related Questions