Отображаем карты OpenStreetMap на iPhone 4 с учётом сетчаточного дисплея при помощи Leaflet

Всякий, кому до сегодняшнего дня доводилось запускать полноэкранный пример работы движка Leaflet на новейших мобильниках iPhone 4, неизменно получал перед собою вот какую карту OpenStreetMap в новоайфоновском разрешении 640×960:



Как видите, векторный гипертекст (подпись под картою) выглядит существенно лучше по качеству, чем растровый текст (надписи на карте) и чем контуры дорог на карте. Это потому, что растровые картинки на сетчаточном дисплее по умолчанию состоят из квадратов 2×2 реальных (физических) пикселов — стало быть, растровый текст получается угловатым, контуры дорог получаются ступенчатыми, и так далее.

Сегодня это положение дел изменилось к лучшему.

Сегодня mourner внёс в Leaflet написанный мною джаваскрипт, который проверяет значение window.devicePixelRatio и запускает на сетчаточных дисплеях использование вчетверо большего количества вчетверо меньших по площади (вдвое меньших по размеру) тайлов карты. (Тайлы 256×256 уменьшаются до 128×128 условных пикселов, что составляет 256×256 физических пикселов сетчаточного дисплея.)

Мой джаваскрипт настроен срабатывать не по умолчанию, а только в том случае, если при создании тайлового слоя задан параметр «detectRetina» со значением «true». Дело в том, что вдвое более чёткие надписи одновременно становятся и вдвое более мелкими — далеко не для всех слоёв это может быть удобно.

Например, если поверх слоя ненадписанных космоснимков или не надписанных карт в вашем приложении лежит слой отдельных надписей (скажем, локализованных под язык письменной речи конкретного пользователя), то вы легко сможете уменьшить тайлы космоснимков (да и тайлы карт, если контуры дорог не выйдут чрезмерно тонкими), повысив их чёткость, но при этом не тронуть надписи, если они при уменьшении в два раза становятся чрезмерно трудночитаемыми, хотя и чёткими.

Надеюсь, это улучшение прекрасного mournerовского движка карт окажется для кого-нибудь полезным.