Leaflet / OpenStreetMap map rendering on devices with tiny pixels

I wrote an application that presents maps on a webpage using Leaflet and OpenStreetMaps, and some readers commented that the text was hard to read on their devices.

It turns out that this issue seems present on devices with high resolution small screen (ie high pixels/mm or small pixel size).

The reports raise the question of whether it is the compatibility of the device and the user's Visual Accuity (VA).

VA is often assessed on the familiar Snellen chart which has characters of a 5×5 grid and normal vision is indicated by reading characters that subtend 5 minutes of arc (MOA), or 1MOA for each ‘pixel' (px).

An example phone screen calculation

My Huawei dub-lx2 has a screen height of 1520 px and 144mm, so the px size is 95µm. Keep in mind that the size of this pic may be much smaller on the phone that on your viewing device.

I can read the text just fine… but I have fixed IOLs optimised for distance vision, and read with correction.

When viewed at a distance of 350mm, the angle subtended by a pixel is \(theta = 2 \cdot  atan( \frac{d_p}{2d_v}) \cdot 60=2 \cdot atan( \frac{95e-6}{2 \cdot 0.35}) \cdot 60=0.933 MOA \), very slightly smaller that for normal or 6/6 (20'/20′) vision.

We are buying devices that require better than normal vision to fully exploit them. By contrast, the px size on my desktop computer is 270µm, almost three times that of the phone.

Bear in mind though that the screen is lower contrast than the Snellen chart, and often viewed in adverse light conditions… so in practice even normal 6/6 vision might be inadequate.

It would appear that Leaflet auto sizes text as the map is zoomed, and probably presents text based on the screen resolution in px rather than in terms of VA of a user.

Work around

It is possible to render larger text by rendering larger tile sizes and fixing the zoom. To the tileLayer method add ,tileSize:512,zoomOffset:-1.