Leaflet 0.4 — новая версия открытой JS-библиотеки для интерактивных карт

После 5 с половиной месяцев разработки при участии 33 разработчиков с момента выхода предыдущей стабильной версии, я очень рад наконец представить вам Leaflet 0.4 — новую версию легковесной JavaScript-библиотеки для интерактивных карт, которая одинаково хорошо работает и на полноценных компьютерах, и на мобильных устройствах.

Этот релиз несёт в себе более простой, удобный API и громадное множество улучшений и исправлений, и кроме этого сопровождается масштабным обновлением документации, запуском официального блога, и страничкой плагинов. Давайте рассмотрим улучшения по порядку.

Упрощённый API

К следующим изменениям (и многим другим) меня подтолкнула критическая рецензия на Хабре от forgotten. За что ему большое спасибо!

Leaflet 0.4 содержит несколько улучшений API, позволяющих писать более простой и краткий код (в стиле jQuery), при этом оставаясь обратно-совместимым с предыдущим подходом (так что можно смешивать оба стиля):

L.marker([51.5, -0.09])
    .addTo(map)
    .bindPopup('Hello world!')
    .openPopup();

Во-первых, методы теперь принимают объекты LatLng, LatLngBounds, Point и Bounds в форме простых массивов — теперь нет необходимости создавать их явно:

map.panTo([50, 30]); // то же самое, что:
map.panTo(new L.LatLng(50, 30));

Во-вторых, такие методы класса Map, как addLayer, addControl и openPopup, получили свои аналоги с другой стороны:

marker.addTo(map);  // аналогично map.addLayer(marker)
control.addTo(map); // map.addControl(control)
popup.openOn(map);  // map.openPopup(popup)

Учитывая то, что в Leaflet все методы, которые не возвращают какое-то явное значение, возвращают сам объект (this), это позволяет более удобно вызывать методы «по цепочке».

В-третьих, каждый класс в Leaflet теперь имеет свой class factory (с таким же именем, но начинающийся с маленькой буквы), что позволяет создавать объекты без оператора new (что делает код с множеством цепных вызовов более красивым).

L.map('map').fitWorld(); // то же самое, что:
(new L.Map('map')).fitWorld();

Новые возможности

Улучшенная zoom-анимация

Маркеры, popup'ы, векторные объекты и слои из изображений в предыдущей версии прятались во время zoom'а, но теперь красиво и плавно анимируются вместе с тайлами. Если же у вас на карте много сотен маркеров и анимация происходит не очень плавно (скажем, больше 1000 в случае Chrome), ее можно отключить опцией карты markerZoomAnimation, хотя в таком случае было бы более целесообразно использовать плагин кластеризации маркеров.

Управление с помощью клавиатуры

Доступность Leaflet-карт заметно улучшилась благодаря новой возможности управления с помощью клавиатуры, включённой по умолчанию. Она позволяет управлять картой, нажимая клавиши стрелок и +/-. Очень удобно, кстати говоря — попробуйте!

Эффект инерции

Таскать карту мышкой или пальцами теперь тоже стало приятнее засчёт эффекта инерции, при котором карта продолжает плавно замедляться в том же направлении, в которое вы ее дёрнули. Этот эффект достаточно гибко настраивается — можно контролировать максимальную начальную скорость, замедление и порог чувствительности, при котором инерция срабатывает.

Масштабирование пальцами на Android 4

В предыдущей версии Leaflet жест для приближения/удаления на карте работал только на iOS, пользователям Android же приходилось довольствоваться кнопками. Теперь жестами можно изменять масштаб карты на Android 4+, при чём не только во встроенном браузере, но и на Chrome и Firefox для Android.

Индикатор масштаба

Простой индикатор текущего масштаба в метрический и/или имперской системах измерения. Как обычно, внешний вид можно полностью изменить с помощью CSS.

Редактирование ломаных линий и полигонов

Позволяет редактировать ломаные линии и полигоны с помощью простого, интуитивно понятного интерфейса. Правда, эта возможность в будущих версиях скорей всего будет перенесена в отдельный плагин для рисования фигур Leaflet.draw.

Легковесные div-иконки для маркеров

В добавок к традиционным иконкам для маркеров из изображений, теперь можно использовать легковесные иконки, представляющие собой обычный div c определённым HTML внутри, стилизованный внешним CSS. К примеру, сейчас они используются при редактировании (квадратики в вершинах) и в плагине для кластеризации (цветные кластеры).

L.marker([50.505, 30.57], {
    icon: L.divIcon({className: 'my-div-icon'})
}).addTo(map);

Прямоугольник

Простой способ создавать прямоугольные области на карте. То же самое можно было делать раньше с помощью полигонов, но так удобнее:

L.rectangle([[51.505, -0.03], [51.5, -0.045]]).addTo(map);

Улучшения API

GeoJSON API

API для отображения GeoJSON-слоёв был существенно улучшен, чтобы сделать его более гибким и простым в использовании. С обновлённым API можно ознакомиться с помощью учебной статьи на сайте. Правда, изменения эти не обратно-совместимы, поэтому придётся обновить свой старый код.

Icon API

API для иконок был улучшен и упрощён, правда, изменения тоже не обратно-совместимы. Как он выглядит теперь, можно посмотреть в соотетствующей учебной статье, либо сразу в документации.

Control API

Собственные управляющие элементы теперь создавать намного проще — пример можно увидеть в документации.

Улучшенная работа с событиями

Методы для работы с событиями on и off теперь могут принимать несколько типов событий в одной строке (с пробелами между типами):

map.on('click dblclick moveend', doStuff);

Еще в них теперь можно передавать объекты с парами событий/слушателей:

marker.on({
    click: onMarkerClick,
    dragend: onMarkerDragEnd
});

Кроме этого, теперь, если ничего не передавать в метод off кроме названия события, объект отпишет всех слушателей, которые были подписаны на данное событие:

map.off('click');

Другие улучшения

Leaflet 0.4 содержит более 30 новых методов, опций и событий в разных классах, делающие библиотеку более полной и мощной. Можете ознакомиться с полным списком.

Улучшения производительности и удобства пользования

В новой версии содержится несколько улучшений, делающих Leaflet еще быстрее:

• Скорость перетаскивания карты (и изменения ее размеров) была улучшена (о некоторых трюках, которые лежат в основе этого, хотелось бы написать в отдельной статье на Хабре)
• Добавление и обновление векторных слоёв, отрисованных Canvas'ом (например, в случае Android 2) стало работать намного быстрее (большая пачка независимых изменений теперь вызывает только одну перерисовку экрана)
• Тени на управляющих элементах для мобильных устройств были заменены на обычные border'ы для улучшения производительности
• Векторные слои теперь не мерцают после перетаскивания карты на iOS

В добавок, было несколько улучшений usability:

• Перетаскивание карты теперь работает даже тогда, когда курсор находится над маркером (помогает на картах с большим количеством маркеров)
• Улучшен вид popup'а
• У тайловых слоёв теперь есть опция detectRetina, которая удваивает разрешение тайлов на ретине (реализовано небезызвестным на Хабре Mithgol'ом)

Исправления

Leaflet 0.4 содержит около 45 исправлений, делающих библиотеку более стабильной и надёжной среди всех поддерживаемых браузеров и платформ. Исправления, которые хочется особо отметить: стрёмный глюк на iOS, который в некоторых редких случаях приводил к пропаданию карты после зума; неработающий зум на IE10; ломающиеся карты в том случае, когда страница отдаётся со строгим XHTML content-type'ом в заголовках; неправильно работающий зум на картах внутри элемента с position: fixed. Вот полный список исправлений.

Обновление с предыдущей версии

Кроме упомянутых выше изменений в GeoJSON и Icon, при обновлении с предыдущей версии до 0.4 стоит ознакомиться с кратким списком потенциально несовместимых изменений (правда, исправление старого кода вряд ли займёт больше нескольких минут).

Скачать новую версию, получить ссылки на библиотеку в CDN, или почитать инструкции для собственной сборки из исходного кода можно на странице скачивания.

Статистика кода

Я по прежнему привержен тому, чтобы сохранять библиотеку как можно более легковесной. Вот немного статистики по новой версии:

• JavaScript: 26.7 КБ в сжатом виде (102 КБ в минифицированном и 176 КБ в исходном, 7578 строк кода)
• CSS: 1.8 КБ в сжатом виде (8 КБ в исходном, 377 строк кода)
• Изображения: 10 КБ (5 png-картинок)

Обновление документации

До этих пор, документация Leaflet была неполной и не всегда содержалась в полностью актуальном состоянии. Для этого релиза, очень много усилий ушло на то, чтобы довести документацию до состояния полной и актуальной на 100%. Все оставшиеся классы, методы, свойства, опции и события были тщательно задокументированы и сопровождены большим количеством примеров кода. С этого момента, документация будет содержаться в идеальном состоянии.

Кроме этого, дизайн страницы документации был серьёзно улучшен, — расцветка, шрифт, отступы, переносы, даже ширина колонок, — было проработано множество деталей, чтобы сделать страницу лёгкой и приятной для чтения.

Страница плагинов

На сайте Leaflet наконец-то появилась страница со списком сторонних плагинов, которые могут расширить библиотеку множеством интересных функций и помочь интеграции со сторонним сервисами.

Один плагин хотелось бы отметить отдельно — это Leaflet.markercluster, на данный момент лучший плагин для кластеризации маркеров, который я когда-либо видел из решений для всевозможных API карт. Он красивый, быстрый, с плавными анимациями для кластеров, включает умное решение для скоплений маркеров на последнем уровне масштаба (в стиле Google Earth), умеет подсвечивать область, покрытую определённым кластеров, по наведению мышью, хорошо работает на мобильных устройствах, и гибко настраивается. Обязательно посмотрите!

Другой плагин, достойный внимания — Leaflet.draw, добавляющий возвожность создавать разные фигуры, такие, как ломаные линии, полигоны, круги, прямоугольники и точки, с помощью удобного и понятно интерфейса с иконками и подсказками. В будущем, весь код, связанный с редактированием векторных слоёв, скорей всего, перекочует в этот плагин.

Еще, благодаря плагину Proj4Leaflet, который интегрирует Leaflet с библиотекой для географический проекций Proj4js, теперь Leaflet можно использовать с множеством нестандартных проекций.

Кроме этого, обязательно посмотрите на OSM Buildings, JS-библиотеку, позволяющую визуализировать OpenStreetMap-данные высотности домов в перспективной 3D-проекции на Leaflet-картах. Выглядит очень здорово.

Большие компании, использующие Leaflet

С момента предущего релиза Leaflet начали использовать множество замечательных компаний, но отдельно хотелось бы гордо отметить три — Flickr, foursquare и Wikimedia Foundation. Несколько других именитых пользователей красуются теперь на главной странице сайта.

Спасибо

Хотелось бы сказать большое спасибо всем, кто помог развитию библиотеки — всем, кто присылал патчи на GitHub, сообщал об ошибках, использовал Leaflet на своих вебсайтах, рассказывал о ней коллегам и упоминал на конференциях. Очень рад, что вокруг созданной мной библиотеки собралось такое замечательное сообщество.

Спасибо за внимание! Буду рад любым отзывам.

P.S.: Эта статья — немного изменённый русскоязычный вариант моего же официального анонса на сайте Leaflet, но поскольку я сам являюсь автором, решил, что она всё-таки не относится к переводам. Поправьте меня, если что.

Автор: Mourner